本文介紹了如何使用滑動效果從左向右滑動文本和圖像的處理方法，對大家解決問題具有一定的參考價值，需要的朋友們下面隨著小編來一起學習吧！
問題描述
我正在創建一個網頁，我需要在其中滑動文本和圖像，使圖像從左側滑動，然后使用 jquery/javascript 單擊按鈕時文本從右側滑動.
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.
請檢查此滑塊 我希望我的文本和圖像像這樣滑動
Please check this slider I want my texts and image to slide like this
請用必要的 js/JQuery 建議我
Please suggest me with necessary js/JQuery
推薦答案
Jquery API 和示例演示
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
你把這個放在 div 里面，這是一個解決方案:
This you put inside the div and this is a solution:
<!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>
這篇關于如何使用滑動效果從左向右滑動文本和圖像的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題，如果有圖片或者內容侵犯了您的權益，請聯系我們刪除處理，感謝您的支持！