[英]Changing position background in JavaScript, strange issue
I have a simple question, I would like to change one picture when a user scroll the page (to make an illusion of 3d picture)我有一个简单的问题,我想在用户滚动页面时更改一张图片(以产生 3d 图片的错觉)
the first approach was changing the image src every time (making like 8 different pictures) but I could see the lag on the browser when I was scrolling, the effect was not good.第一种方法是每次更改图像 src(制作 8 张不同的图片),但是当我滚动时我可以看到浏览器上的延迟,效果不好。
So that, I had the idea to make one single image, anche change the background-position while the user scroll.所以,我有一个想法,制作一个单一的图像,当用户滚动时改变背景位置。
This works perfect (when everything is loaded), the only problem is when the user scroll, each time the background-position is changing, the browser reload the picture.这很完美(当所有东西都被加载时),唯一的问题是当用户滚动时,每次背景位置改变时,浏览器都会重新加载图片。 So that, the waiting will be to much.
所以,等待将是太多。 Looks like load different picture, but it's only one.
看起来加载不同的图片,但它只是一张。
I don't understand why, the picture is always the same, why there is this problem?不明白为什么,画面总是一样,为什么会出现这个问题? did someone know another solution?
有人知道另一种解决方案吗?
this is the script:这是脚本:
<script type="text/javascript">
jQuery('.qty-cart-btn2').hide();
jQuery('.shoes-360-2').css('backgroundImage','url(shoes_img1/360.png)');
require(['jquery', 'jquery/ui'], function($){
jQuery(function(){
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() >= 30) {
jQuery('#back-shoes')
.css({'background-position-y':'-264px'})
}
if(jQuery(this).scrollTop() >= 45) {
jQuery('#back-shoes')
.css({'background-position-y':'-528px'})
}
if(jQuery(this).scrollTop() >= 60) {
jQuery('#back-shoes')
.css({'background-position-y':'-792px'})
}
if(jQuery(this).scrollTop() >= 75) {
jQuery('#back-shoes')
.css({'background-position-y':'-1056px'})
}
if(jQuery(this).scrollTop() >= 90) {
jQuery('#back-shoes')
.css({'background-position-y':'-1320px'})
}
if(jQuery(this).scrollTop() >= 105) {
jQuery('#back-shoes')
.css({'background-position-y':'-1584px'});
}
if(jQuery(this).scrollTop() >= 120) {
jQuery('#back-shoes')
.css({'background-position-y':'-1848px'});
}
});
});
});
</script>
Thank you very much非常感谢
Use IF condition in greather than and smaller than, like:在大于和小于中使用 IF 条件,例如:
jQuery(function(){
jQuery(window).scroll(function(){
var Scroll = jQuery(this).scrollTop();
if(Scroll >= 30 && Scroll < 45){
jQuery('#back-shoes').css({'background-position-y':'-264px'})
}
});
}); });
I solved by this example:我通过这个例子解决了:
<div id="rotator"></div>
$(function() {
var rotator = $('#rotator');
var container = $(document);
var viewport = $(window);
var images = 72;
var imageHeight = 30000 / images;
var scrollHeight = container.height() - viewport.height() + imageHeight;
var step = images / scrollHeight;
viewport.scroll(function(event) {
var x = -Math.floor(step * viewport.scrollTop()) * imageHeight;
rotator.css('background-position', x + 'px 0');
});
body {
height: 2000px;
}
#rotator {
font-size: 416px;
width: 1em;
height: 1em;
position: fixed;
top: 0;
right: 0;
z-index: -1;
background: transparent url(http://www.3sessanta.it/images/polaroid/sprite_polaroid_total.jpg) no-repeat 0 0;
}
http://jsfiddle.net/coma/sBTzG/13/ http://jsfiddle.net/coma/sBTzG/13/
Thanks everyone谢谢大家
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.