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

夺命雷公狗jquery---43滚动公告栏案例

2015-10-30 00:47 716 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
h1,div{
margin:0;
padding:0;
font-size:12px;
}

h1{
width:180px;
height:30px;
background-color:#369;
line-height:30px;
text-indent:10px;
color:yellow;
font-size:14px;
font-weight:bold;
padding:0;
margin:0;
}

div{
width:158px;
height:200px;
padding:10px;
border:1px solid #369;
}

li{
list-style: none;
padding:3px;
border-bottom:1px dashed #ccc;
}
ul{
padding:0;
margin:0;
}

</style>
<script src="js/jquery.js"></script>
<script>
$(function(){
//setInterval让他循环
setInterval(function(){
$('ul>li:first').clone().appendTo('ul');
$('ul>li:first').remove();
},1000);
});
</script>
</head>
<body>
<h1>Jquery滚动效果</h1>
<div>
<ul>
<li>苹果特价</li>
<li>西瓜特价</li>
<li>香蕉特价</li>
<li>雪梨特价</li>
<li>哈密瓜特价</li>
<li>葡萄特价</li>
<li>提子特价</li>
<li>桔子特价</li>
<li>橙子特价</li>
</ul>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航