如何从左到右滑动文字和图像滑动效果
问题描述:
我正在创建一个网页,我需要以这样的方式滑动文本和图像:图像从左侧滑动,然后文本从右侧滑动按钮通过使用jQuery/JavaScript。如何从左到右滑动文字和图像滑动效果
请检查该slider我希望我的文字和图像,以这样的
滑动请建议我用必要的JS/JQuery的
答
例如在Jquery API和demo
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
这你把里面的div,这是olution:
<!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>
答
这是可能用CSS3 & jQuery的。
还有一些不错的插件&教程。下载并按照你的意愿调整它。
http://www.sequencejs.com/themes/category/free/
http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
+0
我不会推荐CSS3,它不适用于某些较旧版本的IE,如8。 – Alvaro
请查看我所提供 – Thejdeep
你寻找它的链接?发现了什么?试过什么? –
在该页面上使用http://jquery.malsup.com/cycle/ – maximkou