一. 效果图

二. 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. WinForm—串口通讯

    ialPort(串行端口资源) 常用属性: BaudRate 此串行端口上要使用的波特率 DataBits 每发送/接收一个字节的数据位数目 DtrEnable 在通讯过程中是否启用数据终端就绪(St ...

  2. UiAutomator -- UiObject2 API

    1.点击与长按 void click() Clicks on this object. void click(long duration) Performs a click on this objec ...

  3. Tomcat 基本配置

    1.配置虚拟目录映射 推荐在 /conf/Catalina/localhost 下新建rand.xml方式建立虚拟目录 其中rand将会被当作映射对象,即外部访问路径. 例子:blog.xml < ...

  4. 【树】Binary Tree Zigzag Level Order Traversal

    题目: Given a binary tree, return the zigzag level order traversal of its nodes' values. (ie, from lef ...

  5. 常用CSS实例

    为表格设置合并边框模型: border-collapse:collapse 规定单元格之间的空间: cellspacing:0 规定内侧边框的哪个部分是可见的: rules:all

  6. webpack4重新梳理一下2

    上一篇已经实现了webpack的基本打包操作,但是并没有使用配置文件,而是使用 CLI 来实现打包. 配置文件 // webpack.config.js module.exports = { //入口 ...

  7. Kafka—性能逆天的存在

    0.引言 Kafka是LinkedIn开源出来的一款消息服务器,用Scala语言实现:这货的性能是百万级的QPS(估计是挂载了多块磁盘),我随便写个测试程序就是十万级. 1.Kafka基本概念 在Ka ...

  8. .bat学习-基础语法(常用)

    一般来说,脚本或者语言都有相同地方 定义变量,输入,输出,判断条件等等.知道的相同之处,我们就可以借助强大的搜索引擎进行查找我们想要知道的东西. bat为批处理脚本BATCH.现在只知道是使用于win ...

  9. C++字符串string类常用操作详解(一)【初始化、遍历、连接】

    代码示例: #include <iostream> #include "string" using namespace std; //字符串初始化 void strIn ...

  10. Java并发编程笔记之ThreadLocalRandom源码分析

    JDK 并发包中 ThreadLocalRandom 类原理剖析,经常使用的随机数生成器 Random 类的原理是什么?及其局限性是什么?ThreadLocalRandom 是如何利用 ThreadL ...