Javascript jQuery在firefox和opera中部分不工作
我正在浏览器中测试我的网页,似乎有些东西在firefox和opera中不起作用。我想这是由我的页面上使用的jQuery造成的 这是我的网站: 在源代码的底部,您可以找到所有使用的jQuery代码(主要用于调用和应用插件)。我很难确定是什么问题,因为控制台(firefox 20.0)中没有显示错误,主要的功能失调是Javascript jQuery在firefox和opera中部分不工作,javascript,jquery,firefox,opera,mozilla,Javascript,Jquery,Firefox,Opera,Mozilla,我正在浏览器中测试我的网页,似乎有些东西在firefox和opera中不起作用。我想这是由我的页面上使用的jQuery造成的 这是我的网站: 在源代码的底部,您可以找到所有使用的jQuery代码(主要用于调用和应用插件)。我很难确定是什么问题,因为控制台(firefox 20.0)中没有显示错误,主要的功能失调是 播放器,只需比较它在chrome中的工作方式,然后在firefox或opera中查看它,首先它不会显示“…”这表示加载,其次,一旦你在另一个播放器上单击播放,两首歌曲都会继续播放,就像
<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>
//音频播放器
audiojs.events.ready(函数(){
var as=audiojs.createAll();
$('audio')。每个(函数(){
var myAudio=this;
this.addEventListener('play',function(){
$('audio')。每个(函数(){
如果(!(此===myAudio)){
这个。暂停();
}
});
});
});
});
$(文档).ready(函数(){
//增加利润
函数addMargin(){
var add=$(“.advert”);
var addMargin=add.css(“左边距”);
add.css({
“页边距顶部”:添加页边距,
“页边距底部”:添加页边距
});
}
addMargin();
$(窗口)。调整大小(添加边距);
//响应网格
var MusicGrid=(函数(){
变量$musicGridContainer=$('.grid'),
init=函数(){
changeMusicGrid();
initEvents();
initPlugins();
},
changeMusicGrid=函数(){
var w_w=$(窗口).width();
如果(w_w1.广告应该在顶部和底部有由jQuery计算的边距,那么opera和firefox中没有。那么我是否遗漏了什么?也许我需要应用某些代码标准?
元素具有自动边距,因此,根据浏览器,.css('margin-left')
可能返回不同的值,包括0
我建议使用,这是一个轻量级插件,可以让您获得以像素为单位的实际边距
2.播放器,只需比较它在chrome中的工作方式,然后在firefox或opera中查看,首先它不会显示“…”这表示加载,其次,一旦你在另一个播放器上单击“播放”,两首歌曲都会继续播放,就像在其他浏览器中一样,第一首歌曲会暂停,因此只有一首歌曲播放。
Firefox和Opera在其音频元素中不支持mp3,因此它被flash对象取代。因此,您无法再收听这些DOM事件
尽管根据它们的特性,flash对象具有公共方法play()
、pause()
、和isplay
我建议您收听“播放暂停”按钮上的点击事件,并使用以下功能。如下所示:
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 !
});
});
});
最好将相关代码放在这里。@JosephDreamer好的,我将包括我编写的代码,因为我认为这不应该与我在FF中包括的插件有关,var addMargin=add.css(“左边距”);
正在返回0px
。左边距首先设置在哪里?@css margin中的Barmar被设置为margin:0 auto;因此它接受左边距的值并应用于top和bot,以使它们响应。我想您看到了css(“左边距”)的不同方式
设置为auto
时有效。一些浏览器返回计算的边距,其他浏览器返回未设置的声明边距。