您的位置：首页 > Web前端 > JavaScript

JS仿网易摄影-社区推荐展示效果

2012-09-29 13:15 176 查看
浏览网页摄影网站的时候，发现这个网站 有个栏目效果不错，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; width:850px; overflow:hidden; zoom:1; margin:20px auto; }
#list li { float:left; width:188px; height:188px; overflow:hidden; margin:0 20px 20px 0; position:relative; font-size:13px; }
#list li img { width:188px; height:188px; display:block; cursor:pointer; }
#list li p { width: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 { width:100px; height:200px; position:fixed !important; position:absolute; top:50px; left:-100px; background:red; }
#kefu span { width: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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航