该插件乃本博客作者所写，目的在于提升作者的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. hdu 4273 2012长春赛区网络赛 三维凸包中心到最近面距离 ***

    新模板 /* HDU 4273 Rescue 给一个三维凸包,求重心到表面的最短距离 模板题:三维凸包+多边形重心+点面距离 */ #include<stdio.h> #include&l ...

  2. JavaScript前端框架的思考

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:现在JavaScript前端框架层出不穷,尤其Angular进入到2.x时候之后,我们 ...

  3. 构造函数创建对象和Object.create（）实现继承

    第一个方法用构造函数创建对象,实现方法的继承 /*创建一个对象把所有公用的属性和方法,放进去*/ function Person() { this.name = "W3cplus" ...

  4. 智能车学习(十五)——K60野火2013版例程

    一.中断函数注册方法: 1.格式: 配置某个功能的中断 注册中断函数 开启中断 2.一个例子 pit_init_ms(PIT0,);//定时中断初始化 set_vector_handler(PIT0_ ...

  5. HeapSort自己yy-未完成

    #include <iostream> #include <cstdio> using namespace std; ; int a[maxn]; int HeapSize; ...

  6. javascript引擎工作原理

    1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序.比方说,当你写了 var a = 1 + ...

  7. Coursera课程下载和存档计划[转载]

    上周三收到Coursera平台的群发邮件,大意是Coursera将在6月30号彻底关闭旧的课程平台,全面升级到新的课程平台上,一些旧的课程资源(课程视频.课程资料)将不再保存,如果你之前学习过相关的课 ...

  8. sql跨电脑导数据

    启用Ad Hoc Distributed Queries: reconfigure exec sp_configure 'Ad Hoc Distributed Queries',1 reconfigu ...

  9. WPF文字排列方式解析zz

      WPF文字的处理是一个比较基础的技能.在使用WPF开发工具时,对于各种文字的处理时经常会遇到的情况.希望大家可以通过实践经验的积累,牢固掌握这一方面知识. AD:WOT2014:用户标签系统与用户 ...

  10. Surf特征提取分析

    Surf特征提取分析 Surf Hessian SIFT 读"H.Bay, T. Tuytelaars, L. V. Gool, SURF:Speed Up Robust Features[ ...