图片无缝滚动工具类
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撑大照片的容器的方法无效。
范例:请移步至下面的推荐文章