Javascript 加载无限滚动页面时,加载页面的CSS会发生变化
我有无限卷轴、同位素和一个名为.mb_miniplayer_play的音频播放器,在我正在创建的网站上播放。我遇到的问题是,当加载新页面时,先前加载页面上的css会发生变化。假设第2页已加载,第1页的css将发生更改。但这只是一个因素 我尝试过各种方法,但似乎没有什么能使所有页面看起来都正常工作 代码如下:Javascript 加载无限滚动页面时,加载页面的CSS会发生变化,javascript,css,jquery-callback,infinite-scroll,Javascript,Css,Jquery Callback,Infinite Scroll,我有无限卷轴、同位素和一个名为.mb_miniplayer_play的音频播放器,在我正在创建的网站上播放。我遇到的问题是,当加载新页面时,先前加载页面上的css会发生变化。假设第2页已加载,第1页的css将发生更改。但这只是一个因素 我尝试过各种方法,但似乎没有什么能使所有页面看起来都正常工作 代码如下: **//Audio jquery** $(function AudioEvents(){ $(".audio").mb_miniPlayer({ width:21
**//Audio jquery**
$(function AudioEvents(){
$(".audio").mb_miniPlayer({
width:210,
height:34,
inLine:false,
onEnd:playNext
});
var $audios = $('.audio');
function playNext(idx) {
var actualPlayer=$audios.eq(idx),
$filteredAtoms = $container.data('isotope').$filteredAtoms,
isotopeItemParent = actualPlayer.parents('.isotope-item'),
isoIndex = $filteredAtoms.index( isotopeItemParent[0] ),
nextIndex = ( isoIndex + 1 ) % $filteredAtoms.length;
$filteredAtoms.eq( nextIndex ).find('.audio').mb_miniPlayer_play();
}
**//Inifinite Scroll**
var $container = $('#container');
$container.isotope({
itemSelector : '.square'
});
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.square', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
var $newElements = $(newElements);
AudioEvents( $newElements );
// add hover events for new items
bindSquareEvents( $newElements );
setTimeout(function() {
$container.isotope('insert', $newElements );
}, 1000);
});
});
有没有人经历过这种情况。我假设我的jquery代码不正确或遗漏了什么,但我不知道是什么
这是HTML标记。。。正在更改的div是。下载。加载页面上“Top”的css设置需要使其看起来合适,它是Top:-114,而新加载的页面只需要Top:-24看起来合适
<div class="square techno">
<!-- DJ Picture -->
<img src="Pictures/dirtyharris.jpg" class="img1" />
<div class="boxtop">
<span class="genre">Techno</span>
</div>
<div class="box">
<a class="close" href="#close">×</a>
<!-- DJ Name -->
<h1> ThreeSixty & Dirty Harris</h1>
<!-- Song Title -->
<h2>Louka (Funkagenda Re-Edit)</h2>
<!--Song Description(179 characters with spaces)-->
<h4>I had to include this one since it literally took over control of me while driving the other morning. I was bouncing around in my seat like a little kid who desparately needs to use the bathroom. </h4>
<div class="buttons">
<!--Song file info-->
<div class="player">
<a id="m85" class="audio {skin:'#010101',showVolumeLevel:false,showTime:false,showRew:false,ogg:'MP3/Adrian Lux feat. The Good Natured - Alive (Extended Mix).ogg'}" href="MP3/Adrian Lux feat. The Good Natured - Alive (Extended Mix).mp3"></a></div>
<!--Download Link-->
<div class="download">
<a href="MP3/ThreeSixty, Funkagenda - Loudka (Funkagenda Re-Edit).mp3" title='Right Click and Save Link As'>
<img src="img/dlicon.png"/></a>
</div>
</div>
</div>
</div>
技术
六十和肮脏的哈里斯
Louka(Funkagenda重新编辑)
我必须包括这一个,因为它在前几天早上开车时接管了我的控制权。我在座位上蹦蹦跳跳,就像一个绝望地需要上厕所的小孩。
我在jquery中看不到对CSS的任何更改。CSS本身不会根据页面动态地改变样式。当然,Jquery或php可以对其进行操作,但我没有看到这一点。我发现我使用回调的方式存在问题。css没有改变,它实际上是在现有播放器的基础上加载了另一个播放器,这将使div降低到看不见的位置。正在研究回调无法正常工作的原因。