该插件乃本博客作者所写，目的在于提升作者的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>

jquery插件之文字间歇自动向上滚动的更多相关文章

  1. vue文字间歇无缝向上滚动

    公司的管理系统中有"文字间歇无缝向上滚动"的需求,现在这种需求基本在项目开发中已经消失了,没什么新颖的,但架不住公司高层喜欢这种玩意儿,所以,作为开发人员,即使你有一百个不乐意,谁 ...

  2. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  3. 基于zepto的插件之移动端无缝向上滚动并上下触摸滑动

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了 ...

  4. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

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

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的无缝向上滚动特效,当鼠标移动到文字上时,向上滚动会停止, ...

  6. jQuery插件--图片文字向上向左循环滚动

    需要引用jquery 调用非常简单: 一. 向上滚动 $(".scroll_two").jScroll({vertical: true}); <div class=" ...

  7. jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js实现文字列表无缝向上滚动

    body{font-size:12px} #demo{overflow:hidden; height:80px; width:280px; margin:90px auto; position:rel ...

  9. 列表内容自动向上滚动（原生JS）

    效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容 ...

随机推荐

  1. apache https配置步骤

    转自:http://www.cnblogs.com/best-jobs/p/3298258.html 1.  确认是否安装ssl模块 是否有mod_ssl.so文件 2.  生成证书和密钥 linux ...

  2. UML- 模型图介绍

    第一类 用例图 第二类 静态图 类图  对象图  包图第三类 行为图 状态图  活动图第四类 交互图 序列图 协助图第五类 实现图  构件图 部署图 1 用例图:从用户角度描述系统功能,以及每个系统功 ...

  3. 湖南省第十二届大学生计算机程序设计竞赛 A 2016

    1803: 2016 Description  给出正整数 n 和 m,统计满足以下条件的正整数对 (a,b) 的数量:   1. 1≤a≤n,1≤b≤m; 2. a×b 是 2016 的倍数. In ...

  4. wpf template的code写法

    this.Template = XamlReader.Load ("<ControlTemplate xmlns='http://schemas.microsoft.com/clien ...

  5. MySQL数据库监控

    MySQL MTOP由PHP和Python开发,所以监控机需要安装PHP运行环境和Python环境.需要的核心包如下: 1.MySQL 5.0及以上(用来存储监控系统采集的数据) 2.Apache 2 ...

  6. SpringRMI解析2-RmiServiceExporter逻辑脉络

    配置文件是Spring的核心,在配置文件中我们可以看到,定义了两个bean,其中一个是对接口实现类的发布,而另一个则是对RMI服务的发布,使用org.springframework.remoting. ...

  7. 【第三方登录】之QQ第三方登录

    最近公司做了个网站,需要用到第三方登录的东西.有QQ第三方登录,微信第三方登录.先把QQ第三方登录的代码列一下吧. public partial class QQBack : System.Web.U ...

  8. [工作中的设计模式]桥接模式bridge

    一.模式解析: 策略模式一节讲过,通过扩展持有者,使持有者形成抽象类,然后实现多个具体持有者,策略模式可以转化为桥接模式. 桥接模式定义为:将抽象部分与实现部分分离,使它们都可以独立的变化,在软件系统 ...

  9. [自动运维]weblogic自动发布

    近期一个项目属于测试过渡期,bug修复比较频繁,每次都会伴随着项目的打包.上传.发布,此类重复操作近乎每天都会进行,刚好最近在看python相关资料,决定重新将此前学习的weblogic的wlst相关 ...

  10. Glow Android 优化实践

    了解 Glow 的朋友应该知道,我们主营四款 App,分别是Eve.Glow.Nuture和Baby.作为创业公司,我们的四款 App 都处于高速开发中,平均每个 Android App 由两人负责开 ...