jquery插件之文字间歇自动向上滚动

时间：2022-09-23 16:12:53

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

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

    <!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. thinkphp ajax分页

    临时更改后的page类(很多地方没修改...因为笔者PHP没学好..)如下: 复制代码 <?php namespace Fenye\libs; /** file: page.class.php ...

  2. rsync密码使用要注意的几个点

    1 客户端和服务端的密码文件不一样 服务端的密码文件格式是: 用户名:密码 比如: yejianfeng:123456   客户端的密码文件格式是: 密码: 比如 123456   所以如果一个机器即 ...

  3. 关于 Oracle外键列上是否需要索引问题？

    外键列上缺少索引会带来两个问题,限制并发性.影响性能.而这两个问题中的任意一个都可能会造成严重性能问题.   无论是Oracle的官方文档,还是在Tom的书中都说明了两种情况下可以忽略外键上的索引.其 ...

  4. Delphi F11 全屏

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  5. spring mvc获取路径参数的几种方式 - 浅夏的个人空间 - 开源中国社区

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  6. Android BLE与终端通信（一）——Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址

    Android BLE与终端通信(一)--Android Bluetooth基础API以及简单使用获取本地蓝牙名称地址 Hello,工作需要,也必须开始向BLE方向学习了,公司的核心技术就是BLE终端 ...

  7. error running git

    I ran xcode-select --install and everything worked for me.

  8. C&num; Null 赋值

    在此之前,我们先看一段程序: class Program    {        static void Main(string[] args)        {            Childre ...

  9. 转载：超级强大的vim配置&lpar;vimplus&rpar;--续集

    超级强大的vim配置(vimplus)--续集 原文地址:https://www.cnblogs.com/highway-9/p/5984285.html An automatic configura ...

  10. Java高级架构师（一）第28节：Index、商品详细页和购物车

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

相关文章