Javascript jquery中从两侧到中心的滑动效果_Javascript_Jquery_Html_Css

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

javascript jquery html css

Javascript jquery中从两侧到中心的滑动效果,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有两张图片，我想把它们从左右两侧滑动到中间。我正在使用jquery。但如果屏幕分辨率改变，则会影响滑动。那么，解决这个问题的办法是什么呢。在到达中心后，我还想展示另外四幅图像，但无法获得。下面是我的html代码 <html lang="en"> <head> <meta charset="utf-8"> <title>animate demo</title> <style> div { positi

我有两张图片，我想把它们从左右两侧滑动到中间。我正在使用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>

试着获得想要的效果。

不需要编码。所有内容都可以在UI中自定义。

使用单独的库对我来说似乎太过分了……我为您制作了一个快速的JSFIDLE：

JS几乎是一样的…有一些css附加功能：

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

值得在js上多读一点，因为你不需要像Tambo说的那么多文档准备语句……祝你好运，继续吧！：

为什么调用文档准备好了3次？如果没有它，如何调用它@Tambo但当我增大尺寸时，它并不是从右边或左边来的。它来自两侧的边距长度。请给出一些解释，在两张图片到达中心后，将显示四张图片@奥利·辛普。工作正常。谢谢@Oli C。在两幅图像到达中心后，请建议如何显示一些图像。您需要传入一个函数以淡入其他元素，然后只有在其他元素完成后才会运行：我认为这是用于滑动面板，喜欢显示图像。但我只想要两张从屏幕两端滑动到中间的图像@内存