• 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:5px 5px 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>03这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
        <li>04这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
        <li>05这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
        <li>06这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
        <li>07这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
        <li>08这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
        <li>09这是一个无缝向上滚动的特效,是我第一次写这样的插件</li>
      </ul>
    </div>
    <script>    
    /*
    * textSlider 0.1
    * Copyright (c) 2014 tnnyang http://tnnyang.cnblogs.com/
    * Dependence jquery-1.7.1.js
    */ 
    ;(function($){
      $.fn.textSlider = function(options){
          var defaults = { //初始化参数
                scrollHeight:25,
                line:1,
                speed:'normal',
                timer:2000
          };
          var opts = $.extend(defaults,options);
          
          this.each(function(){
              var timerID;
              var obj = $(this);
              var $ul = obj.children("ul");
              var $height = $ul.find("li").height();
              var $Upheight = 0-opts.line*$height;
              obj.hover(function(){
                  clearInterval(timerID);                
              },function(){                
                  timerID = setInterval(moveUp,opts.timer);
                  });
                  
              function moveUp(){
                  $ul.animate({"margin-top":$Upheight},opts.speed,function(){
                       for(i=0;i<opts.line;i++){  //只有for循环了才可以设置一次滚动的行数
                          $ul.find("li:first").appendTo($ul);
                       }
                      $ul.css("margin-top",0);
                  });                
              };
                  
              timerID = setInterval(moveUp,opts.timer);
              });
          };
    })(jQuery)
    </script>
    <script>
    $(function(){
        $(".box").textSlider({
            line:2
            });
        })
    </script>
    </body>
    </html>
  • 相关阅读:
    求树的直径算法
    二叉排序树BST+求树深度算法
    HDU1114Piggy-Bank(完全背包)
    HDU1102(最小生成树Kruskal算法)
    NYoj289苹果(0-1背包)
    NYOJ201作业题
    C#发送邮件附件
    JS用户登录保存账号密码
    远程连接服务器
    博客园页面更新了
  • 原文地址:https://www.cnblogs.com/tnnyang/p/4744560.html
一二三 - 开发者的网上家园