gpt4 book ai didi

javascript - jquery中从两侧到中心的滑动效果

转载 作者:太空宇宙 更新时间:2023-11-03 17:55:38 25 4
gpt4 key购买 nike

我有两张图片,我想将它们从两侧(左右)滑动到中间。我正在使用 jquery。但是如果屏幕的分辨率会改变,那么它会影响滑动。那么解决这个问题的方法是什么。到达中心后,我还想显示其他四张图片,但无法显示。下面是我的html代码,

<html lang="en">
<head>
<meta charset="utf-8">
<title>animate demo</title>
<style>
div {
position: absolute;

}
</style>
<script src="jquery-1.10.2.js"></script>
</head>
<body>

<div class="block"><img src="Left-Logo.png" border="0" style="float: left;"/></div>
<div class="block2"><img src="Right-Logo.png" border="0" style="float: right;"/></div>
<div class="block3"><img src="pic1.png" border="0" style="visibility: hidden;"/></div>
<div class="block4"><img src="pic2.png" border="0" style="visibility: hidden;"/></div>
<div class="block5"><img src="pic3.png" border="0" style="visibility: hidden;"/></div>
<div class="block6"><img src="pic4.png" border="0" style="visibility: hidden;"/></div>


<script>
$( document ).ready(function() {
$( ".block" ).animate({ "left": "+=12.1%" }, 5000 );
});

$( document ).ready(function(){
$( ".block2" ).animate({ "right": "+=12.1%" }, 5000 );
});

$( document ).ready(function() {
$( ".block3" ).show();
$( ".block4" ).show();
$( ".block5" ).show();
$( ".block6" ).show();

});


</script>

</body>
</html>

最佳答案

使用一个单独的库对我来说似乎有点过分了......我为你做了一个快速的 jsfiddle:

http://jsfiddle.net/c42rkf07/

JS 几乎相同......有一些额外的 css:

$(document).ready(function() {
$(".block1").animate({"left": "+=50%"}, 5000 );
$(".block2").animate({"right": "+=50%"}, 5000 );
});

值得多读一些关于 js 的内容,因为您不需要像 Tambo 所说的所有那些文档就绪语句...祝您好运,坚持下去! :)

关于javascript - jquery中从两侧到中心的滑动效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26403365/

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