gpt4 book ai didi

jquery - 从下到上动画背景图片,连续重复jQuery

转载 作者:太空宇宙 更新时间:2023-11-04 16:14:39 25 4
gpt4 key购买 nike

当你登陆一个页面时,我希望背景图像聚焦在图像的底部,然后向上平移到图像的顶部,然后返回并不断重复。我有以下代码:

<body>
<div id="container"></div>
</body>

body {
height: 100%;
background-image: url(http://smmcnyc.com/work/apf/wp2/wp-content/uploads/2015/09/front-img2.jpg);
background-repeat: no-repeat;
background-position: 50% 100%;
background-attachment: fixed;
}
#container {
height: 100vh;
}

$(document).ready(function () {
$('body').animate({
'background-position-x': '50%',
'background-position-y': '0'
}, {
duration: 500,
});
});

为什么这不起作用?如何让流程不断上下循环?我什至可以使用这段代码吗,因为 Firefox 不支持“background-position-x”,但 jQuery 不支持 .animate() 的“background-position”?

JSFiddle 在这里:https://jsfiddle.net/bqc8o2hn/2/

最佳答案

这是你想要的吗?我是用 css transition 做的。

<body>
<div id="container"></div>
</body>


$(document).ready(function () {
$("body").toggleClass("to_top");
window.setInterval(function(){
$("body").toggleClass("to_top");
},4000);
});

body {
height: 100%;
background-image: url(http://smmcnyc.com/work/apf/wp2/wp-content/uploads/2015/09/front-img2.jpg);
background-repeat: no-repeat;
background-position: 50% 100%;
background-attachment: fixed;
transition:all 2s;
}
#container {
height: 100vh;
}
.to_top{
background-position: 50% 0%;
}

关于jquery - 从下到上动画背景图片,连续重复jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32876113/

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