• jquery插件之文字无缝向上滚动


    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧。

    此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续。整体代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无缝向上滚动</title>
    <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="../../jquery-1.7.1.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>
    /*
    * scrollTop 0.1
    * Copyright (c) 2014 tnnyang http://tnnyang.cnblogs.com/
    * Dependence jquery-1.7.1.js
    */ 
    ;(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)
    </script>
    <script>
    $(function(){
        $(".box").scrollTop({
            speed:30    //数值越大  速度越慢
            });    
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    springboot2系列目录
    zookeeper 集群部署
    canal 配置 详细说明
    在Docker环境下部署Kafka
    Spring4新特性
    centos7 卸载 jdk
    Kafka安装
    Scala 面向对象(三):package 包 (二)
    Scala 基础(七):Scala 运算符
    Maven 专题(四):什么是Maven
  • 原文地址:https://www.cnblogs.com/tnnyang/p/4744537.html
一二三 - 开发者的网上家园