一. 效果图

二. 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. 浅谈Express的put与del

    假设有一个景区价格列表页,显示当前的价目表. 价目表存放在express应用的数组中: var tours = [ {id:0,name:'Hood River',price:99.99}, {id: ...

  2. docker微服务部署之：七、Rancher进行微服务扩容和缩容

    docker微服务部署之:六.Rancher管理部署微服务 Rancher有两个特色用起来很方便,那就是扩容和缩容. 一.扩容前的准备工作 为了能直观的查看效果,需要修改下demo_article项目 ...

  3. 【xsy1237】 字符转换 矩阵快速幂

    题目大意:给你两个长度都为n,字符集为{a,b,c}的字符串S和T. 对于字符串S的任意一个字符,我们可以用cost[0]的代价,把字符a变成字符b.用cost[1]的代价,把字符b变成c,用cost ...

  4. 【bzoj2789】 Letters 树状数组

    又是一道树状数组求逆序对的题目. 这一题我们可以将第二个串中的每一个字母,与第一个串中的字母做两两匹配,令第二个串第i个字母的值id[i]为该字母与第一个串中的字母匹配到的位置. 然后考虑到所求答案为 ...

  5. 细说Activity与Task（任务栈）

    Task概要: task是一个具有栈结构的容器,可以放置多个Activity实例.启动一个应用,系统就会为之创建一个task,来放置根Activity:默认情况下, 一个Activity启动另一个Ac ...

  6. Impala配置HA-Nginx

    Impala的高可用配置,官方的例子用的是Haproxy,考虑到nginx配置简单,使用人群广泛,再加上nginx1.9以后支持TCP的负载均衡,所以选用nginx. nginx安装:yum inst ...

  7. docker 查看拉取镜像源地址

    命令:  cat /etc/docker/de

  8. Java的Signature签名转换成.Net

    Java: Signature sig = Signature.getInstance("SHA1withRSA"); sig.initSign(rsaPrivateKey); s ...

  9. Android 开发工具类 15_ MyAsyncTask

    AsyncTask 对于生命周期较短且需要在UI上显示进度和结果的后台操作是很好的解决方案.然而,当 Activity 重新启动时,这种操作将不会持续进行,也就是说,AsyncTask 在设备的方向变 ...

  10. 关于注解Annotation第二篇

    写一个注解使用类,如下: public class Test { @Code(author = "mazhi",date="20170611") private ...