基于jQuery實現(xiàn)圖片推拉門動畫效果的兩種方法
更新時間：2017年08月26日 14:18:35 作者：是阿詳
本文給大家分享兩種方法實現(xiàn)''推拉門''動畫效果也可以稱作是手風琴效果，具體實現(xiàn)方法大家通過本文一起學習吧
''推拉門''動效也可以稱作"手風琴"效果，大多數(shù)效果實現(xiàn)的思路基本是一樣的，下面介紹兩種方法，一種是通過改變圖片的偏移位置實現(xiàn)移動，另一種是通過遍歷背景圖片后改變圖片的寬度實現(xiàn)變換。
實現(xiàn)方法一：改變圖片寬度
html+css代碼
<body>
<div class="box">
<ul>
<!-- <li></li> -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<style>
*{
padding: 0;
margin: 0;
}
.box{
/*收縮狀態(tài):縮放時每個圖片的大小240px 所以總大小1200px*/
/*展開狀態(tài):當前圖片寬度800px 其他圖片寬度100px*/
width: 1200px;
height: 500px;
border:1px solid red;
margin: 50px auto;
}
.box ul{
list-style: none;
width: 1210px;
}
/*設置每一張圖片的大小和float: left*/
.box ul li{
width: 240px;
height: 500px;
/*background: url(images/slidepic2.jpg);*/
float: left;
}
</style>
jQuery實現(xiàn)
<script src = 'jquery-3.2.1.js'></script>
<script>
$(function(){
//1遍歷每一張li 獲取每個元素設置對應的圖片
var lis = $('li');
lis.each(function(index, element){
//通過設置背景圖片名稱改變圖片的顯示
var imgName = "images/slidepic" + (index + 2) +".jpg ";
$(element).css('background', "url('"+ imgName +"')")
});
//2.展開狀態(tài)
//鼠標滑入改變對應圖片寬度800 其他圖片(兄弟)改為100
lis.mouseenter(function(){
// console.log(this); 當前的li DOM元素
//當前的圖片的寬度變?yōu)?00
$(this).stop().animate({width: 800});
//其他圖片的寬度變?yōu)?00
$(this).siblings('li').stop().animate({width: 100});
});
//3鼠標滑出是全部顯示為收縮狀態(tài)
lis.mouseout(function(){
lis.stop().animate({width: 240});
});
})
</script>
jQuery精簡后代碼
//精簡代碼
$(function(){
$('li').each(function(index, element){
$(element).css('backgroud',"url('images/slidepic"+(index + 2)+.jpg')");
}).mouseenter(function(){
$(this).stop().animate({width: 800}).siblings().stop().aniamte(width: 100});
}).mouseout(function(){
$('li').stop().animate({width: 240});
});
})
實現(xiàn)方法二：改變圖片的偏移值
html+css代碼
<body>
<div class="picList">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<style>
*{
background-color: #aaa;
padding: 0;
margin: 0;
}
ul{list-style: none;}
.picList{
width: 1000px;
height: 400px;
/*border:1px solid #eee;*/
margin:100px auto;
position: relative;
overflow: hidden;
}
/*設置定位屬性 所有圖片覆蓋在起始位置*/
.picList ul li{
position: absolute;
width: 1000px;
height: 400px;
top: 0;
}
img{
width: 100%;
height: 400px;
cursor: pointer;
}
</style>
jQuery實現(xiàn)
<script src = 'jquery-3.2.1.js'></script>
<script >
$(function(){
//1獲取所有的圖片 設置初始的收縮狀態(tài)left:i*200
var lis = $('li');
for(var i = 0; i < lis.length; i++){
lis.eq(i).css({left:i*200 + 'px' });
}
//2.設置hover內置函數(shù),實現(xiàn)鼠標滑入展開滑出收縮效果
lis.hover(function(){
var index = $(this).index(); //DOM對象轉換jQuery對象
//2.1鼠標滑入后,當前圖片的前面圖片偏移位置減小到 j*100位置
for(var j = 0; j <= index; j++){
lis.eq(j).stop().animate({left: j*100 + 'px'},300);
}
//2.2鼠標滑入后,當前圖片的后面圖片偏移位置擴大到 500+j*100位置
for(var j = index + 1; j < lis.length; j++){
lis.eq(j).stop().animate({left: 500+j*100 + 'px'},300);
}
},function(){ //2.3鼠標滑出后,所有圖片恢復到原來的位置 i*200
for(var i = 0; i < lis.length; i++){
lis.eq(i).stop().animate({left: i*200 + 'px'},300);
}
});
})
</script>
注意：方法一在實現(xiàn)的過程中，注意寬度和圖片命名的設置。
提示：這里使用的是jQuery代碼實現(xiàn)，javaScript代碼也是一樣的可以實現(xiàn)，只是修改下遍歷過程和內置函數(shù)方法，另外再重寫動畫函數(shù)（前面的筆記有封裝好的animate函數(shù)，可以直接引入使用）。
總結
以上所述是小編給大家介紹的基于jQuery實現(xiàn)圖片推拉門動畫效果的兩種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關文章
基于jQuery.Hz2Py.js插件實現(xiàn)的漢字轉拼音特效
jQuery.Hz2Py.js插件實現(xiàn)的漢字轉拼音是一款很實用的在線轉換功能，此插件已經(jīng)把漢字打包成一個插件庫，調用的時間很簡單，只調用一個方法就可以實現(xiàn)轉換了2015-05-05
jQuery easyui的validatebox校驗規(guī)則擴展及easyui校驗框validatebox用法
這篇文章主要介紹了jQuery easyui的validatebox校驗規(guī)則擴展及easyui校驗框validatebox用法的相關資料,需要的朋友可以參考下2016-01-01
這篇文章主要為大家分享了一份全面詳細的jQuery常見開發(fā)技巧手冊，幫助大家更好的進行jquery開發(fā)，感興趣的小伙伴們可以參考一下2016-02-02
兩種方法解決javascript url post 特殊字符轉義 + & #
本文主要介紹javascript使用url傳值的時候數(shù)據(jù)丟失的問題，希望對大家有所幫助。2016-04-04
這篇文章主要介紹了jquery禁用右鍵單擊功能屏蔽F5刷新的具體實現(xiàn),需要的朋友可以參考下2014-03-03
本篇文章是對JQuery獲取和設置Select選項的一些常用方法進行了匯總介紹，有需要的朋友可以參考一下2013-07-07
jquery slibings選取同級其他元素的實現(xiàn)代碼
jquery選取同級其他元素可以使用slibings方法，end方法可以清除之前的鏈式操作，相當于重新開始2013-11-11
jquery 表單下所有元素的隱藏，不用增加額外的div是個不錯的方法。2009-07-07
今天小編就為大家分享一篇jquery 動態(tài)遍歷select 賦值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
jquery插件ajaxupload實現(xiàn)文件上傳操作
這篇文章主要為大家詳細介紹了jquery插件ajaxupload實現(xiàn)文件上傳操作，感興趣的小伙伴們可以參考一下2015-12-12