Question

我有一个容器，里面有图像，宽度大于文档窗口的宽度。我添加了这段代码

$(window).on('load', function(){
        function loop_left(){
            $isotope_container.stop().animate({left:'+=50'}, 500, 'linear', loop_left);
        }  
        function loop_right(){
            $isotope_container.stop().animate({left:'-=50'}, 500, 'linear', loop_right);
        }        
        function stop(){
            $isotope_container.stop();
        }
        if ($isotope_container.width()>$(window).width()) {
            $isotope_container.parent().prepend('<div class="left_scroll"><div class="inner"></div></div>');
            $isotope_container.parent().append('<div class="right_scroll"><div class="inner"></div></div>');

            $isotope_container.parent().find('.left_scroll').hover(loop_left, stop);
            $isotope_container.parent().find('.right_scroll').hover(loop_right, stop);
        }
});

它添加了一个div，当你将它们悬停在它们上面时，会将容器向左和向右移动。

现在，这在桌面上很酷，但是当我在移动设备上时，这并不实用。我正在看移动jquery，但是当我添加它时，包含的css改变了我的网站的外观，所以我不得不删除它。

是否可以在没有mobile.js的情况下使该部分可以滑动？

Answer 1

我认为最简单的方法是检查窗口宽度并根据需要进行响应式修改（移动与桌面）。我强烈建议你为这个实现代码移动优先。根据您网站中所有内容的工作方式，您可能需要自定义构建，因此我认为将以下功能添加到您的代码中将只是简单的过程（非常简单但高度可扩展）：

$(document).ready(function() {
    // Store the references outside the event handler to optimize
    var $window = $(window);
    var $pane = $('#pane1');
    var customWidth = 400; // change to your needs
    var device = true; // default should be mobile, thus true

    function checkWidth() {
        if ($window.width() < customWidth) {
            //if the window is smaller than the desired width, then return true.
            return true;
        }
        else {
            //if the window is smaller than the desired width, then return false.
            return false;
        }
    }
    // Execute on load
    device = checkWidth();
    // SUGGESTION: Bind event listener to your custom behavior. 
    // If the above function 'resized' your screen instead, you could bind it to
    // the resize function by having it return a desired width instead.
    $(window).resize(checkWidth);
});

使容器可以在移动设备上滑动

1 个答案: