0

我正在浏览器中测试我的网页，似乎有些位在 Firefox 和 Opera 中不起作用。我认为这是由我的页面上使用的 jQuery 引起的。

这是我的网站： http: //freshbeer.lv/ht/index.html

在源代码的底部，您可以找到所有使用的 jQuery 代码（主要用于调用和应用插件）。我无法确定出了什么问题，因为控制台（firefox 20.0）中没有显示错误主要功能障碍是

  1. 播放器，只需比较它在chrome中的工作方式，而不是在firefox或opera中检查它，首先它不显示“...”表示正在加载，其次，一旦您在另一个播放器上单击播放，两首歌曲都会继续播放，在其他浏览器中，第一首歌曲会暂停，所以只会播放一首歌曲。

  2. 广告应该有顶部和底部的边距，由jQuery计算，在opera和firefox中没有。所以我错过了什么吗？也许我需要应用某些代码标准？

这似乎是全部，但我不能确定。

我将把我写的代码放在这里（很可能是其中的问题），注意，上面包含了几个 jQuery 插件。

<script type="text/javascript">

//Audio Player
audiojs.events.ready(function () {
    var as = audiojs.createAll();

        $('audio').each(function () {
            var myAudio = this;
            this.addEventListener('play', function () {
                $('audio').each(function () {
                    if (!(this === myAudio)) {
                        this.pause();
                    }
            });
        });
    });
});

$(document).ready(function() {

    //Responsive add margins
    function addMargin () {
        var add = $(".advert");
        var addMargin = add.css("margin-left");
        add.css({
            "margin-top": addMargin,
            "margin-bottom": addMargin
        });
    }
    addMargin();
    $(window).resize(addMargin);

    //Responsive Grid
    var MusicGrid = (function() {
        var $musicGridContainer = $('.grid'),
            init = function() {
                changeMusicGrid();
                initEvents();
                initPlugins();
            },
        changeMusicGrid = function() {
            var w_w = $(window).width();
            if (w_w <= 765) n = 1;
            else if (w_w <= 1180) n = 2;
            else n = 3;
        },
        initEvents = function() {
            $(window).on('smartresize.MusicGrid', function(event) {
                changeMusicGrid();
            });
        },
        initPlugins = function() {
            $musicGridContainer.imagesLoaded(function() {
                setTimeout(function() {
                    $musicGridContainer.masonry({
                        itemSelector: '.article',
                        columnWidth: function(containerWidth) {
                            return containerWidth / n;
                        },
                        isAnimated: true,
                        animationOptions: {
                            duration: 150
                        }
                    });
                }, 500);
            });
        };
        return {
            init: init
        };
    })();
    MusicGrid.init();
});


//Preload Content
function preloadCode() {
    if (preloadCode.done) return;
    preloadCode.done = true;
    clearTimeout(t);

    $(".preloader").css("display", "none");
    $(".grid").css({ opacity: 0, visibility: 'visible', marginTop: 20 }).animate({ marginTop: 0, opacity: 1 }, 550);

    $('.article[id^="article-"]').each(function () {
        if (parseInt(this.id.replace('article-', '')) % 3 === 0) {
            $('#' + this.id).css({ marginTop: 50 }).animate({ marginTop: 0 }, 350);
        } else if (parseInt(this.id.replace('article-', '')) % 2 === 0) {
            $('#' + this.id).css({ marginTop: 100 }).animate({ marginTop: 0 }, 400);
        } else {
            $('#' + this.id).css({ marginTop: 150 }).animate({ marginTop: 0 }, 450);
        }
    });

    $(".footer").css("display", "block");

}

var t = setTimeout(preloadCode, 6000);
$(window).load(preloadCode);

</script>
4

1 回答 1

1

1. 广告的上下边距由jQuery计算，opera和firefox没有。所以我错过了什么吗？也许我需要应用某些代码标准？

您的元素具有自动边距，因此，根据浏览器的不同，.css('margin-left')可能会返回不同的值，包括0.

我建议使用JsSizes 库，它是一个轻量级插件，可让您获得以像素为单位的实际边距。

2.播放器，只需比较它在chrome中的工作方式，而不是在firefox或opera中检查它，首先它不显示“...”表示正在加载，其次一旦您在另一个播放器上单击播放，两首歌曲都会保留播放，与其他浏览器一样，第一首歌曲会暂停，因此只会播放一首歌曲。

Firefox 和 Opera 在其音频元素中不支持 mp3，因此它被 Flash 对象所取代。因此你不能再听那些 DOM 事件了。

虽然，根据他们的注释源代码，flash 对象有公共方法play()、、pause()和isPlaying。

我建议在“播放暂停”按钮上收听点击事件并使用这些功能。像这样 ：

var as = ''; // You're going to have to make your as variable global to access it outside of your function.
audiojs.events.ready(function () {
    as = audiojs.createAll();
    $('.audiojs .play-pause').click(function(){ //Listening to the click event
        var thisIndex = $(this).parents('.audiojs').index('.audiojs'); // When you create several players, as is an array of instances of players. Here we're finding the DOM index of the player so it reflects its position in the as array.
        $.each(as, function(index,val){ //then, for each instance of players in the as array
            if ( index != thisIndex && as[index].playing ) as[index].pause(); //If the player is already playing, and its index is different than the one we just clicked on, pause it !
        });
    });
});
于 2013-04-20T11:56:51.283 回答