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

新闻无缝滚动左右

2015-10-24 14:49 537 查看

<!doctype html>
<html>
<head>
<title>新闻无缝滚动  左右</title>
<meta charset="utf-8">
<style type="text/css">
* {padding:0px; margin:0px;}
.box{width:300px;height:30px;line-height30px;position:relative;overflow:hidden;}
.roll {width:1200px;position:absolute;left:0;top:0; }
.roll li{color:#fff;width:200px;line-height30px;height:30px;float:left; text-align:center;}

</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
</head>
<body>
<div class="box">
<ul class="roll">
<li><a href="http://www.875.cn/" target="_blank">哇哈哈哈哈哈哈哈哈</a></li>
<li><a href="http://www.875.cn/" target="_blank">1哇哈哈哈哈哈哈哈哈</a></li>
<li><a href="http://www.875.cn/" target="_blank">2哇哈哈哈哈哈哈哈哈</a></li>
<li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li>
<li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li>
<li><a href="http://www.875.cn/" target="_blank">哇哈哈哈哈哈哈哈哈</a></li>
<li><a href="http://www.875.cn/" target="_blank">1哇哈哈哈哈哈哈哈哈</a></li>
<li><a href="http://www.875.cn/" target="_blank">2哇哈哈哈哈哈哈哈哈</a></li>
<li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li>
<li><a href="http://www.875.cn/" target="_blank">3哇哈哈哈哈哈哈哈哈</a></li>

</ul>
</div>
<script type="text/javascript">
$(function(){
var  num = 0;
function goLeft(){
if (num == -600){
num =0;
}
num -= 1;
$(".roll").css({left:num})
}
var timer =	setInterval(goLeft,20);
$(".box").hover(function(){
clearInterval(timer);
},function(){
timer =	setInterval(goLeft,20);
});

});
</script>

</body>
</html>

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

标签： web前端开发 jQuery

相关文章推荐

新的分享

章节导航

新闻无缝滚动 左右

新闻无缝滚动左右