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

JQuery实现仿sina新浪微博新鲜事滚动

2014-04-03 12:51 337 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/jscript">
$(document).ready(function(e) {
var in_out_time = 800 //渐显时间
var scroll_Interval_time = 2000 //滚动间隔时间
var scroll_time = 1000 //滚动动画时间

addli()

function addli(){
$("#scroll_List").css("top",0);
$("#scroll_List li:last").clone().prependTo("#scroll_List");
$("#scroll_List li:first").css("opacity",0);
$("#scroll_List li:first").animate({opacity:1},in_out_time);
setTimeout(delLi_last,scroll_Interval_time)
}

function delLi_last(){
$("#scroll_List li:last").detach();
$("#scroll_List").animate({top:100},scroll_time,addli)
}

});
</script>
<style>
*{
margin:0px;
padding:0px;
list-style:none;
}

.centerBox{
left:50%;
width:212px;
margin-left:-151px;
top:50%;
height:312px;
margin-top:-156px;
position:absolute;
}

.main{
width:210px;
height:310px;
float:left;
border:1px solid #ccc;
}

.main strong{
width:200px;
height:300px;
float:left;
overflow:hidden;
margin:5px;
display:inline;
position:relative;
}

.main strong ul{
width:200px;
position:absolute;
}

.main strong ul li{
width:200px;
height:100px;
line-height:100px;
text-align:center;
color:#FFF;
font-family:"simhei";
font-size:20px;
}

.main strong ul .li_1{
background:#900;
}

.main strong ul .li_2{
background:#9C0;
}

.main strong ul .li_3{
background:#036;
}

.main strong ul .li_4{
background:#C60;
}

.main strong ul .li_5{
background:#636;
}

.main strong ul .li_6{
background:#999;
}

</style>
</head>

<body>
<div class="centerBox">
<div class="main">
<strong>
<ul id="scroll_List">
<li class="li_1">1</li>
<li class="li_2">2</li>
<li class="li_3">3</li>
<li class="li_4">4</li>
</ul>
</strong>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航