WEB前端知识

首页 > 免费 > WEB前端知识

jquery文字无缝滚动小技巧

作者:admin 时间:2016-11-25   点击:3 次

<!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>

CQTV新媒体项目运营中心 . 简米炎龙互联网运营专家!

地址:重庆市江北区观音桥华新软件产业园5F
咨询:023-67122091 023-81803811
业务QQ:1003671285 技术QQ:164983921
E - mail:1003671285@qq.com

简单 快乐 共享 共赢

  • 10年专业互联网运营经验
  • 重庆最专业WEB APP建站队伍
  • 500强集团公司网站建设供应商
  • 营销型网站建设领先者
  • 2000家成功客户经验
  • 始终坚持技术和服务同样重要
查看PC版网站
渝ICP备17000029号 版权所有:简米炎龙