Jquery实现纵向跑马灯

最新推荐文章于 2023-05-08 09:45:40 发布

oyxm____

最新推荐文章于 2023-05-08 09:45:40 发布

阅读量418

点赞数

文章标签： javascript html jquery

本文链接：https://blog.csdn.net/oyxm____/article/details/122966859

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<style>
*{
    margin:0;
    padding:0;
    font-size:12px;
}
li{
    list-style:none;
}
.box{
    margin:20px;
    width:320px;
    height:195px;
    border:1px solid #ddd;
    padding:10px;
    overflow:hidden;
}
.box ul li{
    line-height:25px;
    }
</style>
<script type="text/javascript" src="./js/jquery.js"></script>
</head>
<body>
<div class="box">
 <ul>
 <li>01这是一个无缝向上滚动的特效</li>
 <li>02这是一个无缝向上滚动的特效</li>
 <li>这是一个无缝向上滚动的特效</li>
 <li>这是一个无缝向上滚动的特效</li>
 <li>这是一个无缝向上滚动的特效</li>
 <li>这是一个无缝向上滚动的特效</li>
 <li>这是一个无缝向上滚动的特效</li>
 <li>这是一个无缝向上滚动的特效</li>
 <li>这是一个无缝向上滚动的特效</li>
 </ul>
</div>

<script>
(function($){
 $.fn.scrollTop = function(options){
      var defaults = {
       speed:30
 }
  var opts = $.extend(defaults,options);
  this.each(function(){
       var $timer;
       var scroll_top=0;
       var obj = $(this);
       var $height = obj.find("ul").height();
       obj.find("ul").clone().appendTo(obj);
       obj.hover(function(){
       clearInterval($timer);
   },function(){
       $timer = setInterval(function(){
       scroll_top++;
       if(scroll_top > $height){
       scroll_top = 0;
  }
       obj.find("ul").first().css("margin-top",-scroll_top);
    },opts.speed);
    }).trigger("mouseleave");
   })
  }
 })(jQuery)

$(function(){
 $(".box").scrollTop({
     speed:30 //数值越大 速度越慢
 });
})
</script>
</body>
</html>

个人记录

oyxm____

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery实现纵向跑马灯

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫