一. 效果图

二. Html骨架结构

<div class="box">

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</div>

三. 原理讲解

1. div.box是最外层盒子， 给它固定的宽高，记得给div.box添加一个 overflow:hidden 样式（超出的内容隐藏） ，因为滚动肯定会超出box的。

2. 我们通过js控制 ul 标签的 margin 来实现滚动。横向滚动控制 margin-left， 纵向则控制 margin-top。

3. 初始时，我们要进行条件判断，判断其是否应该滚动。即： 当 ul 宽度[横向]（或高度[纵向]）小于外层 div.box 时不进行滚动，反之则进行滚动。

4. ul 的长度是通过计算得来的，即：ul里面单个 li 的长度乘以 li 的个数。ul_width = li_width * li_num。

5. 之所以能实现无缝滚动，是因为每次滚动的长度刚好大于单个 li 的长度时，我们就将 ul 的第一个 li 移动到 ul 的最后，周而复始， 无限循环（关于这一点，你可以先不设置 overflow:hidden 来查看）。

四. 插件实现代码

(function ($) {

    $.fn.scroll = function (options) {

        var root = this,                //将当前上下文对象存入root

            timer = [],                 //计时器

            ulTag = $("> ul", root),    //ul标签

            liTag = $("> li", ulTag),   //li标签(集合)

            liNum = liTag.length,       //li标签个数

            liOne = liTag.first(),      //获取单个li标签

            marquee,                    //滚动器(函数)

            liUnit,                     //单个li的宽或者高(横向时为宽，纵向时为高)

            ulUnit,                     //ul的宽或者高(横向时为宽，纵向时为高)

            limit,                      //root的宽或者高(横向时为宽，纵向时为高)

            cssName,                    //样式名称(横向时为margin-left，纵向时为margin-top)

            effect;                     //动画效果(横向时为marginLeft，纵向时为marginTop)

        //默认配置

        var settings = {

            speed: 40,      //滚动速度,值越大速度越慢

            direction: "x"  //滚动方向("x"或者"y" [x横向;y纵向])

        };

        //不为空，则合并参数

        if (options){

            $.extend(settings, options);

        }

        //横向

        if(settings.direction === "x"){

            limit = root.width();

            cssName = "margin-left";

            liUnit = liOne.outerWidth(true);

            ulUnit = liUnit * liNum;            //单个li的宽 ＊ li的个数 ＝ ul的宽度

            effect = { marginLeft : "-=1" };

            ulTag.css({ width: ulUnit });       //设置ul的宽

        }

        //纵向

        if(settings.direction === "y"){

            limit = root.height();

            cssName = "margin-top";

            liUnit = liOne.outerHeight(true);

            ulUnit = liUnit * liNum;            //单个li的高 ＊ li的个数 ＝ ul的高度

            effect = { marginTop : "-=1" };

            ulTag.css({ height: ulUnit });      //设置ul的高

        }

        marquee = function(){

            ulTag.animate(effect, 0, function(){

                //ul滚动的距离，取绝对值

                var distance = Math.abs(parseInt($(this).css(cssName),10));

                //如果滚动的距离一旦大于单个li的长度

                if(distance > liUnit){

                    $("> li:first", $(this)).appendTo($(this)); //就把第一个li移到最后

                    $(this).css(cssName, 0);                    //滚动长度归0

                }

            });

        }

        //遵循链式原则，并进行初始化

        return root.each(function (i) {

            //只有当ul的长度大于root长度时才进行滚动

            if(ulUnit > limit){

                timer[i] = setInterval(marquee,settings.speed);

                //鼠标进入停止滚动，离开继续滚动

                $(this).hover(function () {

                    clearInterval(timer[i]);

                }, function () {

                    timer[i] = setInterval(marquee,settings.speed);

                });

            }

        });

    };

})(jQuery);

五. 关于代码的讲解

基本的说明注释写的很清楚了，下面针对个别知识点作下讲解

1. var timer=[] 之前 timer 并不是声明的数组类型，是在我写 demo 的时候，由于页面同时存在两个无缝滚动的应用（为了演示横向和纵向），出现了bug。因为它们两个共用了一个 timer 计时器，当鼠标进入其中一个时，另一个的 timer 也被 clear 了。之后修改代码将其声明为数组对象，再通过 root.each() 就实现了每个插件应用都有自己独立的 timer 计时器，互不干扰。也就是说此插件支持页面中同时存在多个无缝滚动的应用。

2. outerWidth() / outerHeight() 函数。 这个函数比较强大，它获取的不仅仅是元素的宽度 / 高度，

实际上 outerWidth() = width + borderLeft + borderRight + marginLeft + marginRight; 当它设置为 true 后，即：outerWidth(true)，它也会将 padding 计算进来。

outerWidth(true) = width + borderLeft + borderRight + marginLeft + marginRight + paddingLeft + paddingRight;

六. 一个完整的示例，效果和上面的效果图一模一样

1. Html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>jQuery无限滚动插件</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />  <!-- 此处引用的为下面的 Css 代码 -->

</head>

<body>

    <h3 class="title">jQuery无限滚动插件</h3>

    <div class="xbox">

        <ul>

            <li><a href="#">x</a></li>

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

            <li><a href="#">4</a></li>

            <li><a href="#">5</a></li>

        </ul>

    </div>

    <div class="ybox">

        <ul>

            <li><a href="#">y</a></li>

            <li><a href="#">1</a></li>

            <li><a href="#">2</a></li>

            <li><a href="#">3</a></li>

            <li><a href="#">4</a></li>

            <li><a href="#">5</a></li>

        </ul>

    </div>

<script type="text/javascript" src="script/jquery.min.js"></script>

<script type="text/javascript" src="script/jquery.similar.scroll.js"></script> <!-- 此处引用的为上面的插件实现代码 -->

<script type="text/javascript">

    $(function () {

        $(".xbox").scroll(); //默认横向滚动

        $(".ybox").scroll({ direction: "y" }); //设置为纵向滚动

    });

</script>

</body>

</html>

2. Css

body{

    font-family: Arial;

}

body,ul,li{

    margin:;

    padding:;

}

ul,li,img{

    list-style: none;

}

.title{

    width: 100%;

    text-align: center;

}

.xbox,.ybox{

    overflow: hidden;

    margin: 20px auto;

    padding: 5px;

    border: 2px solid #DDD;

}

.xbox{

    width: 500px;

    height: 50px;

}

.xbox ul li{

    float: left;

    margin-right: 5px;

}

.xbox ul li a, .ybox ul li a{

    display: block;

    width:100px;

    height: 50px;

    box-shadow: 0 0 40px rgba(0,0,0,0.2) inset;

    text-decoration: none;

    color: gray;

    font-size: 20px;

    text-align: center;

    line-height: 50px;

}

.ybox{

    width: 100px;

    height: 250px;

}

.ybox ul li{

    margin-bottom: 5px;

}

自己编写jQuery插件 之 无缝滚动的更多相关文章

  1. 编写jQuery插件--实现返回顶部插件

    国庆过去一周多了,作为IT界的具有严重’工作狂‘性质的宅人,居然还没走出玩耍的心情,拖了程序猿的脚后跟了.最近工作不顺,心情不佳,想吐槽下公司,想了还是厚道点,以彼之道还施彼身,觉得自己也和他们同流合 ...

  2. 基于jQuery的上下左右无缝滚动应用(单行或多行)

    $(function(){     var _wrap=$('ul.line');//定义滚动区域     var _interval=2000;//定义滚动间隙时间     var _moving; ...

  3. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  4. jquery(入门篇)无缝滚动

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

  5. 编写jQuery插件（一）——插件约定及插件中的闭包

    编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,提高开发效率和方便后期维护. 在编写jQuery插件的时候,我们一般会遵循一些约定: jQuery插件推荐命名为:jque ...

  6. 自己编写jQuery插件之表单验证

    自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...

  7. 自己编写jQuery插件之Tab切换

    自己编写jQuery插件之 Tabs切换 jquery ui 带有Tabs切换插件,但其css样式太难维护,引用的东西太多,因此就自己写了个. 起初我Html代码架子是这样的: <div cla ...

  8. 编写jQuery插件的方法和注意点

    编写jQuery插件的方法和注意点 插件的种类 jQuery的插件主要分为3种类型. 1. 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的 ...

  9. 如何编写JQuery 插件详解

    转载自:http://blog.sina.com.cn/s/blog_6154bf970101jam7.html 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jq ...

随机推荐

  1. 解决ORA-21561: OID generation failed

    解决ORA-21561 在linux上使用sqlplus连接oracle数据库 [root@china ~]# sqlplus test/test@ORCL SQL Production :: Cop ...

  2. pymysql模块使用

    一.写函数的原因 写这个函数的原因就是为了能够不每次在用Python用数据库的时候还要在写一遍  做个通用函数做保留,也给大家做个小小的分享,函数不是最好的,希望有更好的代码的朋友能提出 互相学习 二 ...

  3. 剑指offer四十六之孩子们的游戏(圆圈中最后剩下的数，约瑟夫环问题)

    一.题目 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此.HF作为牛客的资深元老,自然也准备了一些小游戏.其中,有个游戏是这样的:首先,让小朋友们围成一个大圈.然后,他随机指 ...

  4. 【Java并发编程】：并发新特性—信号量Semaphore

    在操作系统中,信号量是个很重要的概念,它在控制进程间的协作方面有着非常重要的作用,通过对信号量的不同操作,可以分别实现进程间的互斥与同步.当然它也可以用于多线程的控制,我们完全可以通过使用信号量来自定 ...

  5. Intellij-插件安装-安装CodeGenerator插件并且添加Builder模板

    Intellij IDEA 2018.1.2版本 CodeGenerator插件地址:https://github.com/lotabout/CodeGenerator/releases 步骤一:安装 ...

  6. java aop做一个接口耗时的计算

    看代码: @Aspect @Component public class TimeCostAspect { private static Logger logger = LoggerFactory.g ...

  7. 解决MySQL联表时出现字符集不一样

    mysql 建表时都会设置表的字符集和排序规则,通常是 utf8,不过我这边习惯建表的字符集是 utf8mb4,排序规则是 utf8mb4_unicode_ci.有些 utf8mb4 的表默认排序规则 ...

  8. Linux用户信息查询

    1 查询目前已登录的用户信息w 或者 who [@bjzw_11_210 ~]# w :: up days, :, users, load average: 0.03, 0.04, 0.00 USER ...

  9. 精度更高的double类型计算工具类（借助BigDecimal类型）

    /** * 提供精確的加法運算 * @param args */ public static double add(double v1, double v2) { BigDecimal b1 = ne ...

  10. java ee 中 Jsp 页面的定时的跳转（数字倒数）

    java ee 中 Jsp 页面的定时的跳转,实现数字倒计时跳转固定页面 1,Servlet类  RefreshServlet类实现 package org.servlet; import java. ...