该插件乃本博客作者所写，目的在于提升作者的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. linux c学习笔记----互斥锁属性

    转自:http://lobert.iteye.com/blog/1762844 互斥锁属性 使用互斥锁(互斥)可以使线程按顺序执行.通常,互斥锁通过确保一次只有一个线程执行代码的临界段来同步多个线程. ...

  2. Java 体系结构

    Java体系结构包括四个独立但相关的技术: 当编写并运行一个Java程序时,就同时体验了这四种技术.运行流程如下: Java虚拟机的主要任务是装载class文件并且执行其中的字节码.Java虚拟机包含 ...

  3. PDF解析记录——Pdfbox

    此文仅作记录[嫌放电脑里碍事-_-],内容为以前收集的一小段代码.   下面为pdf获取文本的简要代码片段: private string GetPDFText(string filename) { ...

  4. HDU 5791 Two DP

    Two   Problem Description   Alice gets two sequences A and B. A easy problem comes. How many pair of ...

  5. linux常用命令和选项

    (1)比较两个文件. diff filename1 filename2 -y -W number; -y 并列格式输出 -W 并列格式输出时指定的列宽 (2)linux下抓包 tcpdump有三类关键 ...

  6. Understanding, Operating and Monitoring Apache Kafka

    Apache Kafka is an attractive service because it's conceptually simple and powerful. It's easy to un ...

  7. HashMap合并相同key的value

    Map<String, String> map1 = new HashMap<>(); map1.put("x", "y"); map1 ...

  8. 2016.8.14 HTML5重要标签以及属性学习

    1.响应网格系统,这使得它很容易把元素放在行,并指定每个元素的相对宽度 . 要注意的是: 在使用网格布局系统之前,要不把布局的元素都添加到同一个<div>中,而且这个<div> ...

  9. POJ 2785 HASH

    题目链接:http://poj.org/problem?id=2785 题意:给定n行数字,每行4个数分别是a,b,c,d,现在要求能有多少个(a,b,c,d)组合并且和为0 思路:n^2统计所有(a ...

  10. 04_Java面向对象特征之继承与多态

    1. 继承 Java继承的实现(只支持单继承,而不是多继承,但有接口的多实现) 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类. 定义类时直接通过extends关键字指明要继承的父类.子类对 ...