Question

我有两个图像，我想从两侧（右侧和左侧）滑动它们以在中心相遇。我正在使用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>

Answer 1

尝试WOW slider以获得理想的效果。无需编码。一切都可以在UI中自定义。

Answer 2

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

http://jsfiddle.net/c42rkf07/

JS几乎一样......有几个css附加功能：

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

值得在js上阅读更多，因为你不需要所有那些文件准备好的陈述，因为Tambo说...祝你好运，坚持下去！：）

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

2 个答案: