javascript 如何使用滑动效果从左到右滑动文本和图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16855397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to slide text and images from left to right with sliding effect
提问by Thejdeep
I am creating a web page where I need to slide the text and image in such a way that image slides from left and then the text slides from right on clicking a button by using jquery/javascript.
我正在创建一个网页，我需要在其中滑动文本和图像，使图像从左侧滑动，然后使用 jquery/javascript 在单击按钮时从右侧滑动文本。
Please check this sliderI want my texts and image to slide like this
请检查此滑块我希望我的文本和图像像这样滑动
Please suggest me with necessary js/JQuery
请建议我使用必要的 js/JQuery
回答by Mirko Cianfarani
Example on Jquery APIand demo
Jquery API示例和演示
Tutorial on daneden.me
he text and image in such a way that image slides from left and then the text slides from right on clicking a button by using jquery/javascript
This you put inside the div and this is a solution:
你把它放在 div 里面，这是一个解决方案：
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: relative;
background-color: #abc;
width: 40px;
height: 40px;
float: left;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p><button id="go">Run ?</button></p>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<div class="block"></div> <div class="block"></div>
<script>
$( "#go" ).click(function(){
$( ".block:first" ).animate({
left: 100
}, {
duration: 1000,
step: function( now, fx ){
$( ".block:gt(0)" ).css( "left", now );
}
});
});
</script>
</body>
</html>
回答by geovani075
This is possible with css3 & jquery.
这可以通过 css3 和 jquery 实现。
There are some nice Plugins & tutorials. Download them and tweak it as u wish.
有一些不错的插件和教程。下载它们并根据需要进行调整。
http://www.sequencejs.com/themes/category/free/
http://www.sequencejs.com/themes/category/free/
http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
