我通过codecanyon.net购买了一些文件,它们在所有浏览器上都运行良好。就在最近,我注意到他们没有在Chrome上工作。
代码确实很大,我试图通过js文件上的尝试和错误来更改一些东西,但是没有成功。您可以在http://miguelsart.com/scroller-test看到滑块。
正如你所看到的,标题应该是隐藏的,一旦你悬停,它们就会向上滑动。但使用Chrome时,标题会自动显示,当您悬停时不会发生任何事情。
我认为代码的这一部分有问题:
//init captions
Scroller.prototype.initCaptions = function() {
    var $captions = this._$slides.find(">p:first");
    if (this._displayCaption) {
        var padding = $captions.outerWidth() - $captions.width();
        $captions.css({width:this._slideWidth - padding, display:"inline-block"}).click(preventDefault);
        if (this._captionPos == OUTSIDE) {
            var heights = $captions.map(function() { return $(this).height(); }).get();
            var maxHeight = Math.max.apply(Math, heights);                  
            $captions.css({top:this._captionAlign == TOP ? 0 : this._slideHeight, height:maxHeight});
            this._extHeight = $captions.outerHeight();                  
            if (this._captionAlign == TOP) {
                this._extOffset = this._extHeight;
            }
            $captions.addClass("outside");
        }
        else {
            if (jQuery.browser.msie && parseInt(jQuery.browser.version) > 6 && parseInt(jQuery.browser.version) < 9) {
                $captions.addClass("ie-inside");
            }
            else {
                $captions.addClass("inside");
            }
        }                   
    }
    else {
        $captions.hide();
    }
}我试过把显示替换为不透明或可见性,但没有什么效果。有没有人知道可能出了什么问题?
提前感谢!
发布于 2013-10-01 18:31:00
我相信我已经知道作者的实现出了什么问题,而且你是对的,这与Chrome的最新版本有关。
在jquery.wt.scroller.js的第43行
this._mouseoverCaption = window.Touch ? false : opts.mouseover_caption;插件的作者正在测试本机触摸功能(通过确定是否定义了window.Touch )。Chrome一定是最近在最新版本中增加了本机触摸API功能。
所以作者想说的是,‘你不能在触摸设备上悬停,所以我们不能在触摸设备上显示悬停的标题,所以我们总是展示它们’--这是合乎逻辑的。
然而,仅仅因为存在触摸功能,并不意味着触摸输入是默认的(如本例中所示)。现代派通过执行以下条件(目前)解决了这个问题:
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
有件事告诉我,这个也很快就会被打破。(https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js#L42)
因此,长话短说(我知道为时已晚)将以下内容添加到插件代码中:
将其添加到第7行(将所有行按下一行):
var TOUCH = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
在插件代码中用TOUCH查找并替换所有出现的TOUCH。
告诉插件的作者我会给他寄一张账单。:)
https://stackoverflow.com/questions/19122265
复制相似问题