Question

我目前正在使用一个脚本，当鼠标悬停在图标上时会执行淡入淡出效果（它将它们从颜色变为黑色和白色）。由于悬停事件，我在iPad或iPhone上无法正常工作时遇到问题。

有没有什么方法可以将以下内容包装在一个不包含iPad，iPhone甚至是机器人设备的条件中？

    <script>
            $(document).ready(function() {
            $("ul.gallery li").hover(function() { //On hover...
            $(this).siblings().each(function () {
                var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
                    //Set a background image(thumbOver) on the &lt;a&gt; tag
                $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
                    //Fade the image to 0
                    $(this).find("span").stop(false,false).fadeTo('normal', 0 , function() {
                    $(this).hide() //Hide the image after fade
                        });
                });
            } ,
            function() { //on hover out...
                $(this).siblings().each(function () {
                        //Fade the image to 1
                    $(this).find("span").stop(false,false).fadeTo('normal', 1).show();
                    });
                    });
            });
    </script>

谢谢

Answer 1

您可以使用navigator.platform检查“iPad”：

// Is the user on an iPad?
var isIpad = navigator.platform.toLowerCase() === "ipad";

同样，您可以使用对象文字和in运算符检查其他iDevices：

// Is the user on an iDevice?
var isIDevice = navigator.platform.toLowerCase() in {
    "ipod": true,
    "ipad": true,
    "iphone": true
};

为了防止您的代码在这些条件下运行，您可以将您的设置逻辑保留在命名函数中，并在DOM-ready上有条件地执行它，例如：

<script type="text/javascript">
(function() {

    // Setup routine
    var ready = function() {
        $("ul.gallery li").hover(function() { //On hover...
            $(this).siblings().each(function () {
                var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
                //Set a background image(thumbOver) on the &lt;a&gt; tag
                $(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
                //Fade the image to 0
                $(this).find("span").stop(false,false).fadeTo('normal', 0 , function() {
                    $(this).hide() //Hide the image after fade
                });
            });
        },
        function() { //on hover out...
            $(this).siblings().each(function () {
                //Fade the image to 1
                $(this).find("span").stop(false,false).fadeTo('normal', 1).show();
            });
        });
    };

    // Current platform
    var platform = navigator.platform.toLowerCase();

    // List of iDevice platforms
    var iDevices = {
        "ipod": true,
        "ipad": true,
        "iphone": true
    };

    /*
    // OPTION 1:
    // On DOM-ready, execute for everthing except iPad
    $(function() {
        if ( platform !== "ipad" ) {
            ready();
        }
    });
    */

    // OPTION 2
    // Only execute if not an iDevice
    $(function() {
        if ( !(platform in iDevices) ) {
            ready();
            $(window).resize(function () {
                viewportSize();
            });
        }
    });

})();

老实说，我从来没有做过android检测，但应该有类似的方法。

希望有所帮助！欢呼声。

从iPad排除Javascript功能

1 个答案: