[英]Is there a better way than using the scrollingParallax plugin to scroll my images on the page
I have 34 photos that I would like to scroll slightly faster than the page using javascript and I'm currently using the scrollingParallax plugin to do it. 我有34张照片,我想使用javascript滚动速度比页面略快,而我目前正在使用scrollingParallax插件来做到这一点。 However when I switch to my ipad to view it then it becomes rather sketchy! 但是,当我切换到ipad进行查看时,它会变得很粗略! I wanted to make the site responsive because my mum will only look at it there! 我想让网站具有响应性,因为我的妈妈只会在那儿浏览它! I wondered if this jerkiness is caused by my inefficient coding, an old plugin or just me being a prat! 我想知道这是由于我的编码效率低下,旧的插件还是只是我当普拉特而引起的!
I'm essentially looping into the plugin 34 times and I'm sure that this isn't efficient but having limited time and understanding I thought I'd throw it out to the font of all knowledge stackoverflow! 我实际上是在该插件中循环了34次,我确定这不是很有效,但是时间有限,并且理解我以为我会把它扔成所有知识stackoverflow的字体!
Here's the loop I'm using: 这是我正在使用的循环:
/* Photo sprite alignment and scroll */
for(var i=0; i<34; i++){
var j = '#photo' + (i+1);
$(j).scrollingParallax({staticSpeed : 2.2,staticScrollLimit : false, loopIt : false});
};
The css for a couple of photos: CSS的几张照片:
.photos{position: fixed; z-index:-1;}
#photo1{top:900px; left:10px;}
#photo2{top:1100px; right:10px;}
#photo3{top:1300px; left:10px;}
#photo4{top:1500px; right:10px;}
#photo5{top:1700px; left:10px;}
#photo6{top:1900px; right:10px;}
#photo7{top:2100px; left:10px;}
#photo8{top:2300px; right:10px;}
The html for some photos: 一些照片的HTML:
<div class="photos">
<img src="img/1.png" id="photo1">
<img src="img/2.png" id="photo2">
<img src="img/3.png" id="photo3">
Many thanks for any help! 非常感谢您的帮助!
Shmiddty helped with a better way to call the function but ultimately iOS just didn't run the jquery scrollingParrallax fast enough and so I ended up hiding the class on iOS. Shmiddty提供了更好的方法来调用该函数,但最终iOS只是没有足够快地运行jquery scrollingParrallax,所以我最终在iOS上隐藏了该类。
// Optimalisation: Store the references outside the event handler: var $window = $(window); //优化:将引用存储在事件处理程序之外:var $ window = $(window);
function checkWidth() {
var windowsize = $window.width();
if (windowsize > 1250) {
//if the window is greater than 1250px wide then turn on parallax scrolling..
$('.fixedPhotos').addClass('hidden');
$('.photos img').removeClass('hidden');
}else{
$('.fixedPhotos').removeClass('hidden');
$('.photos img').addClass('hidden');
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.