gpt4 book ai didi

javascript - 离开窗口选项卡时图像堆叠(重叠)

转载 作者:行者123 更新时间:2023-11-28 18:44:31 24 4
gpt4 key购买 nike

我有跨窗口移动的图像(2 行),当我离开页面选项卡时,然后返回它,所有图像都相互堆叠。
JS代码(记入jfriend00)

function startMoving(img) {

var img$ = $(img);
var imgWidth = img$.width();
var screenWidth = $(window).width();
var amount = screenWidth - parseInt(img$.css("left"), 10);
// if already past right edge, reset to
// just left of left edge
if (amount <=0 ) {
img$.css("left", -imgWidth);
amount = screenWidth + imgWidth;
}
var moveRate = 300; // pixels per second to move
var time = amount * 1000 / moveRate;
img$.stop(true)
.animate({
left: "+=" + amount
}, time, "linear", function() {
// when animation finishes, start over
startMoving(this);
})

}

$(document).ready(function() {
// readjust if window changes size
$(window).resize(function() {
$(".thumbnails").each(function() {

startMoving(this);
});
});
});

html代码:

   <div id="thumbnails_wrapper">
<img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:0px;left:100px" class="thumbnails"/>
<img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:0px;left:200px"
class="thumbnails"/>
<img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:0px;left:300px"
class="thumbnails"/>
<img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:100px;left:100px" class="thumbnails"/>
<img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:100px;left:200px" class="thumbnails"/>
<img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:100px;left:300px" class="thumbnails"/>

</div>

CSS 代码:

#thumbnails_wrapper{
position:absolute;
width:100%;

height:147px;
background-color: rgba(150, 150, 150, 0.4);

}
.thumbnails{
position:absolute;
border:1px solid white;

}

实例:http://jsfiddle.net/ScTMP/

最佳答案

好吧,您已经知道您的应用程序正在失控。问题是您的功能无限运行并且不受您的控制(即,当访问者打开一个新选项卡并离开事件窗口时)。

你必须非常小心调用自己的函数。创建无限循环会耗尽 CPU 资源并使访问者的浏览器崩溃。

但是您可以使用 JavaScript 的窗口对象来控制动画。假设您在浏览器中打开了四个选项卡。浏览器为每个选项卡创建一个窗口对象。您可以使用窗口对象的 onblur 和 onfocus 事件处理程序来查明访问者在浏览器级别做什么:

goMoving();
window.onblur = stopMoving;
window.onfocus = goMoving;

var int;

function goMoving() {
int = setInterval(function() {
moveTheBoxes();
}, 400); //TODO (AzizAG): Rework the timer function
}

function stopMoving() {
window.clearInterval(int);
}

function startMoving(img) {
/* Animation */
}

成功的关键是第 2-3 行。 goMoving 函数是您一次又一次调用 moveTheBoxes 的方法。因此,改变你的动画:

.animate({
left: "+=" + amount
}, time, "linear");

关于javascript - 离开窗口选项卡时图像堆叠(重叠),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10769229/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com