Web前端知识

首页 > 免费 > Web前端知识 >

jquery文字无缝滚动小技巧

来源:北京汇仁智杰科技有限公司   时间:2016-11-17   点击:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="scripts/js.js"></script>

<style>

#con2{

height:200px;

overflow: hidden;

}

#con2 ul{

list-style: none;

}

#con2 ul li{

line-height:25px;

height:25px;

}

</style>

</head>

<body>

<div id="con">

<ul>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

<li><a href="#">效果文字</a></li>

</ul>

</div>

<script>

function autoscroll(obj){

$(obj).find("ul:first").animate({

marginTop:"-25px",

},500,function(){

$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);

})

}

$(document).ready(function(){

var myar=setInterval('autoscroll("#con")',500);

$("#con2").hover(function(){

clearInterval(myar)

},function(){

myar=setInterval('autoscroll("#con")',500);

})

})

</script>

</body>

</html>

网络营销推广 . 北京汇仁智杰科技有限公司!

地址:北京市昌平区回龙观龙冠大厦5层
咨询:13522285853
业务QQ 373002979
E - mail:sales @ huirenzhijie.com
企业网站备案:京ICP备15021091号-1

汇仁智杰与众不同

  • 有网络推广经验
  • 有网站建站队伍
  • 有大型网站建设经验
  • 致力于营销型网站建设
  • 始终坚持技术和服务同样重要
查看PC版网站
备案号:京ICP备15021091号-1 版权所有:汇仁智杰