jquery鼠标悬停触发无限循环滚动的图片特效插件

所属分类: 网页特效-图片特效&上传    2023-11-15 09:34:14

jquery鼠标悬停触发无限循环滚动的图片特效插件 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery鼠标悬停触发无限循环滚动的图片特效插件(共7个文件)

    • jquery.scrolloop.js
    • jquery.scrolloop.min.js
    • image1.png
    • index.html
    • style.css
    • image3.png
    • image2.png

使用方法

(function ($) {
    var methods = {
        'init': function (speed) {

            return this.each(function () {

                var $this = $(this),
                    width,
                    maxheight = 0,
                    i,
                    n,
                    img = $this.children("li"),
                    data = $this.data("scrolloop");

                // saving some data in the dom element
                if (!data) {
                    $this.data("scrolloop", {
                        img: img,
                        pos: [img.length],
                        d: 0,
                        interval: null,
                        timeout: null,
                        stopping: false,
                        multiplier: speed || 7
                    });
                    data = $this.data("scrolloop");
                }

                $this.css({
                    'overflow': "hidden",
                    'position': "relative"
                }).show();

                img.each(function () {
                    $(this).css({
                        'position': "absolute",
                        'top': "50%",
                        'margin-top': "-" + ($(this).height() / 2) + "px"
                    });
                });

                for (i = 0; i < img.length; i += 1) {

                    width = 0;
                    if ($(img[n]).outerHeight() > maxheight) {
                        maxheight = $(img[n]).outerHeight();
                    }

                    for (n = 0; n < i; n += 1) {
                        width += $(img[n]).outerWidth(true);
                    }

                    data.pos[i] = width;

                    $(img[i]).css({
                        'left': width
                    });
                }

                $this.height(maxheight).hide();

                // binding events
                $this.mousemove(function (e) {
                    methods.move.apply(this, [e]);
                }).mouseenter(function (e) {
                    methods.startscroll.apply(this, [e]);
                }).mouseleave(function (e) {
                    methods.endscroll.apply(this, [e]);
                });
            });
        },

        // scrolls all the images
        'scroll': function () {
            var data = $(this).data("scrolloop"),
                i,
                n,
                totalwidth,
                speed = -data.d,

                toggle_offscreen = function (i) {
                    // hide the image if it's not visible, show otherwise
                    // safari mac has a weird webkit bug that makes this necessary

                    var img = $(data.img[i]);

                    if (data.pos[i] < -img.outerWidth() ||
                            data.pos[i] > $(this).outerWidth() + img.outerWidth()) {

                        img.hide();
                    } else {

                        img.show();
                    }
                };

            speed *= data.multiplier;

            if (data.stopping) {
                // speed down
                data.d /= 1.1;
            }

            if (speed < 0) {

                for (i = 0; i < data.img.length; i += 1) {
                    data.pos[i] += speed;

                    if (data.pos[i] <= -$(data.img[i]).outerWidth()) {

                        totalwidth = 0;

                        for (n = 0; n < data.img.length; n += 1) {
                            if (n !== i) {
                                totalwidth += $(data.img[n]).outerWidth();
                            }
                        }

                        data.pos[i] = totalwidth + data.pos[i] + $(data.img[i]).outerWidth();
                    }
                    $(data.img[i]).css("left", data.pos[i]);
                    toggle_offscreen(i);
                }
            } else {

                for (i = data.img.length - 1; i > -1; i -= 1) {
                    data.pos[i] += speed;

                    if (data.pos[i] >= $(this).outerWidth()) {

                        totalwidth = 0;

                        for (n = 0; n < data.img.length; n += 1) {
                            totalwidth += $(data.img[n]).outerWidth();
                        }

                        data.pos[i] -= totalwidth;
                    }
                    $(data.img[i]).css("left", data.pos[i]);
                    toggle_offscreen(i);
                }
            }

            return $(this);
        },

        // function to execute on mousemove
        'move': function (e) {
            var $this = $(this),
                w,
                data = $this.data("scrolloop");

            // speed is distance between cursor and center of element
            w = $this.outerWidth();
            data.d = (e.pageX - ($this.offset().left + w / 2)) * 2 / w;
        },

        // begin scrolling
        'startscroll': function (e) {
            var $this = $(this),
                data = $this.data("scrolloop");

            // clear movement interval and timeout
            if (data.interval !== null) {
                clearInterval(data.interval);
                data.interval = null;
                clearTimeout(data.timeout);
                data.timeout = null;
            }

            data.stopping = false;
            data.fevent = e;

            // move
            data.interval = setInterval(function () {
                methods.scroll.apply($this);
            }, 50);
        },

        // stop scrolling
        'endscroll': function () {
            var $this = $(this),
                data = $this.data("scrolloop");

            data.stopping = true;

            // and set timeout to stop movement
            data.timeout = setTimeout(function () {
                if (data.interval !== null) {
                    clearInterval(data.interval);
                    data.interval = null;
                }
                data.stopping = false;
            }, 500);
        }
    };

    // jQuery plugin implementation
    $.fn.scrolloop = function (f) {
        if (methods[f]) {
            return methods[f].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        if (typeof f === 'number' || !f) {
            return methods.init.apply(this, arguments);
        }

        $.error('Method ' + f + ' does not exist on jQuery.scrolloop');

    };
}(jQuery));

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / 图片特效&上传

jquery带缩略图和标题文字摘要的图片轮播特效

一款红色风格的幻灯片特效代码,带箭头手动可切换。
  图片特效&上传
 8233  0

CSS3实现的3D全景图片特效

一款纯css全景图片动画效果,使用了preserve-3d转换样式,此特效不支持IE浏览器。
  图片特效&上传
 974  0

javascript鼠标悬停图片上触发3D倾斜效果

一款鼠标悬停于图片上触发3D倾斜特效,根据鼠标移动调整角度和视角,同步改变图片倾斜坐标。
  图片特效&上传
 1196  0

js轻量级图片对比插件

一款图片对比特效插件,一般用于在拍摄同一个角度的两张图片前后对比不同。鼠标拖动左右滑块,可查看两张图片的局部位置。
  图片特效&上传
 465  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论