该插件乃本博客作者所写，目的在于提升作者的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. WPF中查看PDF文件

    需要打开PDF文件时,我们第一印象就是使用Adobe Reader.在开发中,经常会遇到需要展示PDF文件的需求.我们会借助于Adobe Reader的Active控件来实现.不过这需要客户的机器上安 ...

  2. poj 2337 欧拉回路输出最小字典序路径 ***

    把26个小写字母当成点,每个单词就是一条边. 然后就是求欧拉路径. #include<cstdio> #include<iostream> #include<algori ...

  3. [Tools] 设置surface上的VPN

    [背景] 继续前对机器进行配置安装,这次是VPN在win8上的设置,又跟xp不一样,看来要慢慢适应win8的日子,呵呵 [开工] 首先按照原先在win xp上的步骤一步步来配置 选择connect t ...

  4. linux下搭建属于自己的博客（WordPress安装）

    转自:http://www.cnblogs.com/xiaofengkang/archive/2011/11/16/2251608.html WordPress简介 WordPress 是一种使用 P ...

  5. 在网页中显示html代码

    string str = "<div>aaa</div>"; this.Literal1.Text = string.Format("<pr ...

  6. 使用android ProgressBar和Toast生成一个界面

    首先我需要这样一个界面 这个界面是在使用AudioManager.adjustStreamVolume(int streamType, int direction, int flags)显示出来的,记 ...

  7. memcached for windows 修改端口和最大内存，以及常用命令

    在windows中使用memcached,必须先下载memcached for win32安装. PHP模块MemCache下载地址:http://downloads.php.net/pierre 服 ...

  8. 【java 上传+下载】

    一.先说说上传 第一步:pom.xml文件 加上 上传文件依赖架包 <dependency> <groupId>commons-fileupload</groupId&g ...

  9. HDU 4858 项目管理 分块

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4858 题解: 下面说一个插入查询时间复杂度为sqrt(m)的算法: 对每个点定义两个值:val,su ...

  10. HDU 2609 最小表示法

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2609 题意:给定n个循环链[串],问有多少个本质不同的链[串](如果一个循环链可以通过找一个起点使得和 ...