让两个div从浏览器端向左/右移动

现在我已经摆弄了很长一段时间了，我希望你能帮上忙。我想实现的是：让两个div从浏览器端向左/右移动

我有两个div，一个红色和一个蓝色的。红色默认可见，蓝色隐藏。它们的高度不同，但宽度相同。如果你点击红色的div，它应该滑动到左侧并且“离开浏览器窗口”。同时，蓝色div应该来自浏览器的右侧，并且滑入前面放置红色的空间。如果你点击蓝色的div，动画应该“反转”。

似乎很简单，但我无法弄清楚。我试着用jQuery幻灯片和宽度，以及jQuery UI的幻灯片。问题通常是CSS定位。无论是div跳转到位，动画都很庞大。如果我使用绝对/相对CSS定位，则不可能设置宽度，以便它们一直滑到浏览器的右/左端。相反，它们会以各自的宽度被切断。

这张图片说明了我想达到的目标。

真的希望你能帮助:)

来源

2013-11-28 Farsen

请出示你有这么远的jQuery代码和标记 – Alex

像这样的东西很简单：

(function($){ 
    $(function() { 
     var red = $('#red'), 
      blue = $('#blue'); 

     red.click(function() { 
      red.stop().animate({ 
       left: '-' + 0 - red.width() + 'px' 
      }, 400); 
      blue.stop().animate({ 
       left: '50%' 
      }, 400); 
     }); 

     blue.click(function() { 
      blue.stop().animate({ 
       left: '150%' 
      }, 400); 
      red.stop().animate({ 
       left: '50%' 
      }, 400); 
     }); 
    }); 
})(jQuery);

Working fiddle

另一个想法是创建具有溢出隐藏一个div，你可以在scrollLeft animte

来源

2013-11-28 15:00:09 Alex

非常感谢您的回答。虽然我仍然有一些定位问题。请检查这个小提琴：http://jsfiddle.net/uJ2W8/1/ 我想使“红色和蓝色酒吧”对齐徽标和文本的顶部布局。关于屏幕尺寸和分辨率。当使用绝对和相对的时候，这是很难的:( – Farsen

我觉得我现在工作了，我只需要找到页面宽度的一半，然后减去长度就可以了，然后我有它们的位置但是它的类型凌乱，所以猜我必须清理它一点点... 反正，感谢您的大力帮助！:) – Farsen

Here是实现jQuery的滑块简单。希望能帮助到你。作为一个提示，你可以隐藏你的下一个/上一页按钮和寻呼机，并为'下一个'功能使用一个jQuery选择器转到你的图像。

来源

2013-11-28 14:58:42

让两个div从浏览器端向左/右移动

回答

相关问题