jQuery实现广告条滚动效果

来源：懂视网责编：小OO 时间：2020-11-27 22:31:59

jQuery实现广告条滚动效果

本文实例为大家分享了jQuery实现广告条滚动效果的具体代码，供大家参考，具体内容如下：<，每150毫秒执行一次函数 setInterval(function(){ if(scroll){$("#list li：first").animate( //第一个li开始执行动画 {marginTop：marginTop--}.//设置上面的外边距自减 0.function(){ //动画之后执行的函数 if( -marginTop==$(this).height()+1){ //判断li移动的距离是否超过自身的高度 var $f = $(this)；//复制一个li $(this).remove()；//把第一个移除。第一个移除之后，变成一个无缝连接 } } )；} }。

推荐度：

点击下载本文 文档为doc格式

导读本文实例为大家分享了jQuery实现广告条滚动效果的具体代码，供大家参考，具体内容如下：<，每150毫秒执行一次函数 setInterval(function(){ if(scroll){$("#list li：first").animate( //第一个li开始执行动画 {marginTop：marginTop--}.//设置上面的外边距自减 0.function(){ //动画之后执行的函数 if( -marginTop==$(this).height()+1){ //判断li移动的距离是否超过自身的高度 var $f = $(this)；//复制一个li $(this).remove()；//把第一个移除。第一个移除之后，变成一个无缝连接 } } )；} }。

本文实例为大家分享了jQuery实现广告条滚动效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 *{padding: 0px;margin: 0px;}
 #list{width: 150px;height: 310px;margin: 0px auto;border: 1px solid #ccc;overflow: hidden;}
 #list li{list-style: none;height: 30px;line-height: 30px;border-bottom: 1px dashed #999;}
 </style>
 <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
 <script>
 var marginTop = 0;//注意命名
 var scroll = true; 
 //定时函数，每150毫秒执行一次函数
 setInterval(function(){
 if(scroll){ 
 $("#list li:first").animate( //第一个li开始执行动画
 {marginTop:marginTop--}, //设置上面的外边距自减
 0,
 function(){ //动画之后执行的函数

 if( -marginTop==$(this).height()+1){ //判断li移动的距离是否超过自身的高度
 var $f = $(this); //复制一个li
 $(this).remove(); //把第一个移除。第一个移除之后，第二个就自动变为第一个
 marginTop=0;
 $f.css("margin-top","0px");
 $("ul").append($f); //把第一个追加加到列表的最后，变成一个无缝连接
 }
 }
 );
 }
 },150);
 $(function(){
 $("ul").hover(function(){scroll = false;},function(){scroll = true;});

 });
 </script>
 </head>
 <body>
 <div id="list">
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
 <li>10</li>
 <li>11</li>
 </ul>
 </div>
 </body>
</html>

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

jQuery实现广告条滚动效果

推荐度：

点击下载本文 文档为doc格式

标签：实现滚动广告

热门焦点

jQuery实现广告条滚动效果

jQuery实现广告条滚动效果

jQuery实现广告条滚动效果

最新推荐

猜你喜欢

热门推荐