拉勾网企业图片列表效果
昨天写了拉勾首页的图片切换效果，今天把首页的企业列表也写了。
代码如下
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="thumbs" class="thumbs"></ul> </body> </html>
window.onload = function(){ var data = [ { href : 'http://www.lagou.com/gongsi/47885.html?i=tg-1', img : 'http://www.lagou.com/upload/promotion/ff8080814d661121014d8e41f0a804b4.png', title :'布拉旅行', dic : '小清新的旅行度假导购平台' }, { href : 'http://www.lagou.com/gongsi/35876.html?i=tg-2', img : 'http://www.lagou.com/upload/promotion/ff8080814d429a94014d51aa13410344.gif', title :'人人投', dic : '人人投投资您身边的店铺' }, { href : 'http://www.lagou.com/gongsi/28623.html?i=tg-3', img : 'http://www.lagou.com/upload/promotion/ff8080814d661121014d8e43bd4e04b5.png', title :'鹏金所', dic : '22家上市公司联袂打造的互联网金融平台' }, { href : 'http://www.lagou.com/gongsi/5634.html?i=tg-4', img : 'http://www.lagou.com/upload/promotion/ff8080814cb64de0014cc19a42490269.jpg', title :'海航通信', dic : '国内首家综合服务集团虚拟运营商' }, { href : 'http://www.lagou.com/gongsi/4314.html?i=tg-5', img : 'http://www.lagou.com/upload/promotion/ff8080814d661121014d9b08d3d3056a.png', title :'OKCoin', dic : '我们邀您一起改变世界' }, { href : 'http://www.lagou.com/gongsi/6636.html?i=tg-6', img : 'http://www.lagou.com/upload/promotion/ff8080814d661121014d9b09d68e056b.png', title :'携程', dic : '携程在手 说走就走' } ] var oThumbs = document.getElementById('thumbs'); for(var i = 0;i < data.length;i++){ var oNewLi = document.createElement('li'); oNewLi.innerHTML = '<a href="'+data[i].href+'" target="_blank">\ <img src="'+data[i].img+'" width="113" height="113" alt="'+data[i].title+'">\ <div class="hot_info">\ <h2 title="'+data[i].title+'">'+data[i].title+'</h2>\ <em></em>\ <p title="'+data[i].dic+'">'+data[i].dic+'</p>\ </div>\ </a>' oThumbs.appendChild(oNewLi); } var oLi = oThumbs.getElementsByTagName('li'); for(var i = 0;i < oLi.length;i++){ oLi[i].onmouseenter = function(ev){ var oEvent = ev || event; var oDiv = this.children[0].children[1]; var n = direction(this,oEvent); switch(n){ case 0:// 0 左 oDiv.style.left = "-113px"; oDiv.style.top = "0"; break; case 1:// 1下 oDiv.style.left = "0"; oDiv.style.top = "113px"; break; case 2:// 2 右 oDiv.style.left = "113px"; oDiv.style.top = "0"; break; case 3:// 3 上 oDiv.style.left = "0"; oDiv.style.top = "-113px"; break; } move(oDiv,{left:0,top:0},{duration:400}); }; oLi[i].onmouseleave = function(ev){ var oEvent = ev || event; var oDiv = this.children[0].children[1]; var n = direction(this,oEvent); switch(n){ case 0: move(oDiv,{left:-113,top:0},{duration:400}); break; case 1: move(oDiv,{left:0,top:113},{duration:400}); break; case 2: move(oDiv,{left:113,top:0},{duration:400}); break; case 3: move(oDiv,{left:0,top:-113},{duration:400}); break; } }; } function direction(obj,oEvent){ var x = oEvent.clientX - obj.offsetLeft-obj.parentNode.offsetLeft - obj.offsetWidth/2; var y = obj.offsetHeight/2 + obj.offsetTop+obj.parentNode.offsetTop - oEvent.clientY; var a = Math.atan2(y,x); return Math.round((a*180/Math.PI + 180)/90)%4; } //获取样式 function getStyle(obj,value){ return obj.currentStyle?obj.currentStyle[value]:getComputedStyle(obj,false)[value]; } //运动 function move(obj,json,options){ options = options || {}; options.duration = options.duration || 700; options.easing = options.easing || 'ease-out'; var start = {}; var dis = {}; for(var name in json){ start[name] = parseFloat(getStyle(obj,name)); dis[name] = json[name] - start[name]; } var count = Math.round(options.duration / 30); var n = 0; clearInterval(obj.timer) obj.timer = setInterval(function(){ n++; for(var name in json){ switch(options.easing){ case 'linear': var a = n/count; var cur = start[name] + dis[name]*a; break; case 'ease-in': var a = n/count; var cur = start[name] + dis[name]*a*a*a; break; case 'ease-out': var a = 1-n/count; var cur = start[name] + dis[name]*(1-a*a*a); break; } if(name == 'opactiy'){ obj.style.opacity = cur; obj.style.filter = 'alpha(opacity:'+cur*100+')'; }else{ obj.style[name] = cur + 'px' } } if(n == count){ clearInterval(obj.timer) options.complete && options.complete(); } },30) } }
*{margin:0;padding:0;} img{border:0;vertical-align: top;} ul{list-style:none;} body{font: 14px/22px "微软雅黑","宋体",Arial;} .thumbs {list-style: none;height: 118px;position: relative;margin:100px auto;width:762px;} .thumbs li { float: left;margin-right:8px;background: #fff;position: relative; border:2px solid #fafafa;} .thumbs li a,.thumbs li a img {display: block;position: relative;} .thumbs li a {color:#fff;overflow: hidden;} .thumbs li a .hot_info {position: absolute;background: #333;background: rgba(0,179,138,0.9);*background:#00b38a;background:#00b38a\0;filter:alpha(Opacity=90); width: 100%;height: 100%;left:-113px;top:0;} .thumbs li a em{display:block;width:100px;height:5px;background:rgba(255,625,255,0.3);*background:#fff;background:#fff\0;filter:alpha(Opacity=30);margin:0 6px;} .thumbs li a h2{font-size:24px;height:24px;line-height:24px;margin:10px 8px 8px 8px;font-weight:normal;text-align:center;overflow:hidden;} .thumbs li a p{font-size:12px;margin:6px 8px;line-height:18px;}
