• marquee.js


    图片无缝滚动工具类

    CreateTime--2018年3月7日17:11:03

    Author:Marydon

    /**
     * 图片无缝滚动
     * @description
     *     将要滚动的图片复制一份作为它的兄弟节点拼接到其身后,
     *    通过操作scrollTop和scrollLeft来调节滚动条的距离来实现    
     */
    function Marquee() {
        var object = this;
        var container_father;
        var container_child;
        var container_clone;
        var scrolllDirection;
        var scrollSpeed;
        
        /**
         * 界面滚动参数设置
         * @param direction
         *     滚动方向-没有传参,默认向右滚动
         * @param speed
         *     滚动速度-没有传参,速度为50毫秒
         * @param id_father
         *     父(祖父)容器id
         * @param id_child
         *     子(子孙)容器id
         */
        this.init = function(direction, speed, id_father, id_child) {
            // 定义克隆容器id
            id_clone = "cloneContainer";
            // 对子容器进行克隆并拼接到它的后面
            $('#' + id_child).clone().attr("id", id_clone).appendTo($('#' + id_child).parent());
            container_father = document.getElementById(id_father);
            container_child = document.getElementById(id_child);
            container_clone = document.getElementById(id_clone);
            
            // 滚动方向
            scrolllDirection = direction || "right";
            // 滚动速度
            scrollSpeed  = speed || 50;
            // 选择滚动方向
            switch (scrolllDirection) {
                case 'up':
                    object.MarqueeToTop();
                    break;
                case 'down':
                    object.MarqueeToDown();
                    break;
                case 'left':
                    object.MarqueeToLeft();
                    break;
                case 'right':
                    object.MarqueeToRight();
                    break;
                default:
                    //object.MarqueeToRight();    
                break;
            }
        };
        
        
        /**
         * 向上滚动
         */
        this.MarqueeToTop = function () {
            var MyMarTop = setInterval(MarqueeTop, scrollSpeed);
    
            container_father.onmouseover = function() {
                clearInterval(MyMarTop);
            }
    
            container_father.onmouseout = function() {
                MyMarTop = setInterval(MarqueeTop, scrollSpeed);
            }
            
            function MarqueeTop() {
                if (container_father.scrollTop == container_clone.offsetHeight) {
                    container_father.scrollTop = 0;
                } else {
                    container_father.scrollTop++;
                }
            }
    
        };
    
        /**
         * 向下滚动(倒序播放)
         */
        this.MarqueeToDown = function () {
            var MyMarDown = setInterval(MarqueeDown, scrollSpeed);
    
            container_father.onmouseover = function() {
                clearInterval(MyMarDown);
            }
    
            container_father.onmouseout = function() {
                MyMarDown = setInterval(MarqueeDown, scrollSpeed);
            }
    
            function MarqueeDown() {
                if (container_father.scrollTop == 0) {
                    container_father.scrollTop = container_clone.offsetHeight;
                } else {
                    container_father.scrollTop--;
                }
    
            }
    
        };
    
        /**
         * 向左滚动
         * @description
         *     展现在父容器内的是子容器中的图片,然后从第一张图片开始往左滚动(正序播放)
         * @achieve
         *     通过从左侧滚动过的像素数的递增(0-maxWidth),来实现图片向左移动
         */
        this.MarqueeToLeft = function () {
    
            var MyMarLeft = setInterval(MarqueeLeft, scrollSpeed);
    
            container_father.onmouseover = function() {
                clearInterval(MyMarLeft);
            }
    
            container_father.onmouseout = function() {
                MyMarLeft = setInterval(MarqueeLeft, scrollSpeed);
            }
    
            function MarqueeLeft() {
                // 滚动条向右滚动到最大值
                //debugger;    
                if (container_father.scrollLeft == container_clone.offsetWidth) {
                    container_father.scrollLeft = 0;
                } else {
                    // 滚动条向右移动,图片往左移动
                    container_father.scrollLeft++;
                }
    
            }
    
        };
    
        /**
         * 向右滚动
         * @description
            展现在父容器内的是克隆容器中的图片,然后图片开始往右滚动(倒序播放)
         * @achieve
         *     通过从左侧滚动过的像素数的递减(maxWidth-0),来实现图片向右移动
         */
        this.MarqueeToRight = function() {
            var MyMarRight = setInterval(MarqueeRight, scrollSpeed);
    
            // 鼠标悬浮
            container_father.onmouseover = function() {
                clearInterval(MyMarRight);
            }
            // 鼠标移出
            container_father.onmouseout = function() {
                MyMarRight = setInterval(MarqueeRight, scrollSpeed);
            }
            
            /**
             * 右滚动
             */
            function MarqueeRight() {
                // scrollLeft不会取到负值
                if (container_father.scrollLeft == 0) {
                    container_father.scrollLeft = container_clone.offsetWidth;
                } else {
                    // 滚动条往左移动,图片向右移动
                    container_father.scrollLeft--;
                }
            }
        };
    }

      总结:  

        1.只有scrollLeft和scrollTop,没有scrollRight和scrollDown;

        2.scrollLeft和scrollTop有最小值(0)和最大值,最小值改不成负数,最大值达到最大后无法再增;

        3.上滚动和左滚动,是正序滚动;下滚动和有滚动,是倒序滚动;

        4.无缝滚动实现条件约束,必须遵循:

          水平滚动时,父容器的宽度必须<=子容器所有照片的实际宽度之和;

          因为scrollLeft的最大值<offsetWidth,会造成以下状况:

            左滚动时,当滚动到克隆容器的最后一张照片时,scrollLeft达到最大值,因为不满足if(scrollLeft==offsetWidth)的条件,并且scrollLeft++也无效化,

            所以不再滚动;

            右滚动时,当滚动到子容器的第一张照片(srollLeft=0)时,重置scrollLeft=offsetWidth,两者所在的点,即父容器所展示的图片不是完全一模一样的图片,

            所以给人以不连续的感觉。

          垂直滚动时,父容器的高度必须<=子容器所有照片的实际高度之和。

          因为scrollTop的最大值<offsetHeight,会造成以下状况:

            上滚动时,当滚动到克隆容器的最后一张照片时,scrollTop达到最大值,因为不满足if(scrollTop==offsetHeight)的条件,并且scrollTop++也无效化,

            所以不再滚动;

            下滚动时,当滚动到子容器的第一张照片(scrollTop=0)时,重置scrollTop=offsetHeight,两者所在的点,即父容器所展示的图片不是完全一模一样的图片,

            所以给人以不连续的感觉。

        注:想通过padding撑大照片的容器的方法无效。

      范例:请移步至下面的推荐文章 

     相关推荐:

  • 相关阅读:
    js 数组详解(javascript array)
    CentOS 修改IP地址, DNS, 网关
    Leetcode 652.寻找重复的子树
    Leetcode 650.只有两个键的键盘
    Leetcode 649.Dota2参议院
    Leetcode 648.单词替换
    Leetcode 647.回文子串
    Leetcode 645.最长数对链
    Leetcode 643.子数组最大平均数I
    Leetcode 640.求解方程
  • 原文地址:https://www.cnblogs.com/Marydon20170307/p/8523656.html
Copyright © 2020-2023  润新知