许多数据 2016-01-12 06:31 采纳率: 26.3%
浏览 1371

控制图片滚动,js代码在chrome里没效果在其他浏览器有效果

//客户合作 图片滚动
$('.imgs-scroll').newsScroll({ className: 'imgs-scroll', scrollElements: 'li', scrollDirection: 'left' });

$.fn.extend({
newsScroll: function (opt) {
if (!opt) opt = {};
opt = {
className: opt.className,//滚动外框的class值
scrollElements: opt.scrollElements,//滚动的标签
scrollSpeed: opt.scrollSpeed || 2000,//定义滚动间隙时间
scrollDirection: opt.scrollDirection || 'up'
}

    var sumtemp = 0;
    if (opt.scrollDirection == 'up' || opt.scrollDirection == 'down') {
        $('.' + opt.className + ' ' + opt.scrollElements).each(function () {
            sumtemp += $(this).height();
        })
        if ($('.' + opt.className).height() >= sumtemp) {
            return false;
        }
    }

    if (opt.scrollDirection == 'left' || opt.scrollDirection == 'right') {
        $('.' + opt.className + ' ' + opt.scrollElements).each(function () {
            sumtemp += $(this).width();
        })
        if ($('.' + opt.className).width() >= sumtemp) {
            return false;
        }
    }


    var _moving;//需要清除的动画 
    $('.' + opt.className).hover(function () {
        clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动 
    }, function () {
        _moving = setInterval(function () {
            var _field = $('.' + opt.className).find(opt.scrollElements + ':first');//此变量不可放置于函数起始处,li:first取值是变化的
            var _h = _field.height();//取得每次滚动高度
            var _w = _field.width();//取得每次滚动宽度

            if (opt.scrollDirection == 'up') {
                _field.animate({ marginTop: -_h + 'px' }, 'slow', function () {//通过取负margin值,隐藏第一行
                    _field.css('marginTop', 0).appendTo($('.' + opt.className));//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动 
                })
            } else if (opt.scrollDirection == 'down') {
                _field.animate({ marginTop: _h + 'px' }, 'slow', function () {
                    _field.before($('.' + opt.className + ' ' + opt.scrollElements + ':last'));
                    $('.' + opt.className).find(opt.scrollElements).css({ marginTop: 0 });
                })
            } else if (opt.scrollDirection == 'left') {
                _field.animate({ marginLeft: -_w + 'px' }, 'slow', function () {
                    _field.css('marginLeft', 0).appendTo($('.' + opt.className));
                })
            } else if (opt.scrollDirection == 'right') {
                _field.animate({ marginLeft: _w + 'px' }, 'slow', function () {
                    _field.before($('.' + opt.className + ' ' + opt.scrollElements + ':last'));
                    $('.' + opt.className).find(opt.scrollElements).css({ marginLeft: 0 });
                })
            }
        }, opt.scrollSpeed)//滚动间隔时间取决于opt.scrollSpeed
    }).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动 
}

})

  • 写回答

1条回答

  • Go 旅城通票 2016-01-12 08:42
    关注

    没看出什么问题

     alert(1111111)//加这句看执行没有,没有的话就是你上面宽度计算有问题直接return掉了。。说明样式有问题导致大小计算失败
                var _moving;//需要清除的动画 
    
    评论

报告相同问题?

悬赏问题

  • ¥100 求数学坐标画圆以及直线的算法
  • ¥100 c语言,请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 自己瞎改改,结果现在又运行不了了
  • ¥15 链式存储应该如何解决
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站