浏览网页摄影网站的时候，发现这个网站 有个栏目效果不错，http://pp.163.com/square/ ，他们是用css3实现，虽然效果很棒，但是只能在chrome、火狐等高级浏览器才能看得到，ie就不要想了，so。。。。我用js实现了这个效果，感觉还不错。。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS仿网易摄影-社区推荐展示效果</title> <style type="text/css"> * { margin:0; padding:0; } h1 { font-size:28px; margin-bottom:8px; } #list { list-style:none; 850px; overflow:hidden; zoom:1; margin:20px auto; } #list li { float:left; 188px; height:188px; overflow:hidden; margin:0 20px 20px 0; position:relative; font-size:13px; } #list li img { 188px; height:188px; display:block; cursor:pointer; } #list li p { 188px; height:188px; background:#000; filter:alpha(opacity:70); opacity:.7; position:absolute; top:188px; color:#fff; } #list li p a { height:118px; padding-top:70px; display:block; color:#ccc; text-align:center; text-decoration:none; } #list li p em { font-style:normal; line-height:22px; color:#fff; } #kefu { 100px; height:200px; position:fixed !important; position:absolute; top:50px; left:-100px; background:red; } #kefu span { 24px; text-align:center; padding:15px 0; line-height:22px; display:block; position:absolute; left:100px; background:#A00; color:#fff; font-size:14px; } </style> </head> <body> <div id="kefu"> <span>在线客服</span> </div> <ul id="list"> <h1>仿网易摄影-社区推荐展示效果</h1> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img3.ph.126.net/lEMK8aG0uTt4aOFxVxEE5w==/2726648099413761563.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>让我们从小学开始。~[6张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img8.ph.126.net/WQv5uJf5Oqmy_8DNXBkCBQ==/1295066367863565778.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>让我们从小学开始。~[6张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img2.ph.126.net/0zkmQ2ZdqDAehX2qg058Lg==/6597456794749322132.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>让我们从小学开始。~[6张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img0.ph.126.net/hqURjVOdFHGCmrGn2lTc2Q==/2281636161233464400.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>让我们从小学开始。~[6张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img0.ph.126.net/hqURjVOdFHGCmrGn2lTc2Q==/2281636161233464400.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>让我们从小学开始。~[6张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img2.ph.126.net/0zkmQ2ZdqDAehX2qg058Lg==/6597456794749322132.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>让我们从小学开始。~[6张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img3.ph.126.net/lEMK8aG0uTt4aOFxVxEE5w==/2726648099413761563.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>让我们从小学开始。~[6张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img8.ph.126.net/WQv5uJf5Oqmy_8DNXBkCBQ==/1295066367863565778.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>日出WANAKA~[8张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img8.ph.126.net/WQv5uJf5Oqmy_8DNXBkCBQ==/1295066367863565778.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>让我们从小学开始。~[6张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img3.ph.126.net/lEMK8aG0uTt4aOFxVxEE5w==/2726648099413761563.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>让我们从小学开始。~[6张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img8.ph.126.net/WQv5uJf5Oqmy_8DNXBkCBQ==/1295066367863565778.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <<em>日出WANAKA~[8张]</em><br /> <span>兔子丙</span> </a> </p> </li> <li> <img src="http://imgsize.ph.126.net/?imgurl=http://img2.ph.126.net/0zkmQ2ZdqDAehX2qg058Lg==/6597456794749322132.jpg_188x188x1.jpg" alt=""> <p> <a href="#"> <em>让我们从小学开始。~[6张]</em><br /> <span>兔子丙</span> </a> </p> </li> </ul> <script type="text/javascript"> window.onload = function() { var list = document.getElementById("list"); var li = list.getElementsByTagName("li"); var p = list.getElementsByTagName("p"); for(var i=0; i<li.length; i++) { li[i].index = i; li[i].onmouseover = function() { startMove(p[this.index],"top",0); } li[i].onmouseout = function() { startMove(p[this.index],"top",188); } } var kefu = document.getElementById("kefu"); var kf_title = kefu.getElementsByTagName("span")[0]; kefu.onmouseover = function() { startMove(kefu,"left",0); } kefu.onmouseout = function() { startMove(kefu,"left",-100); } } function getStyle(element,attr) { if(element.currentStyle) { return element.currentStyle[attr]; } else { return getComputedStyle(element,false)[attr]; } } function startMove(element,attr,target) { clearInterval(element.timer); element.timer = setInterval(function() { var cur = parseInt(getStyle(element,attr)); var speed = (target-cur)/3; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); cur==target ? clearInterval(element.timer) : element.style[attr]=cur+speed+"px"; },30); } </script> </body> </html>