jQuery如何實(shí)現(xiàn)圖片推拉門動畫效果
這篇文章主要介紹了jQuery如何實(shí)現(xiàn)圖片推拉門動畫效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)是一家成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)，提供網(wǎng)頁設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，建網(wǎng)站，定制網(wǎng)站，網(wǎng)站開發(fā)公司，成立于2013年是互聯(lián)行業(yè)建設(shè)者，服務(wù)者。以提升客戶品牌價值為核心業(yè)務(wù)，全程參與項(xiàng)目的網(wǎng)站策劃設(shè)計(jì)制作，前端開發(fā)，后臺程序制作以及后期項(xiàng)目運(yùn)營并提出專業(yè)建議和思路。
實(shí)現(xiàn)方法一：改變圖片寬度
html+css代碼
jQuery實(shí)現(xiàn)
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});
});
})實(shí)現(xiàn)方法二：改變圖片的偏移值
html+css代碼
- 
- 
- 
- 
- 
jQuery實(shí)現(xiàn)
$(function(){
//1獲取所有的圖片 設(shè)置初始的收縮狀態(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.設(shè)置hover內(nèi)置函數(shù),實(shí)現(xiàn)鼠標(biāo)滑入展開滑出收縮效果
lis.hover(function(){
var index = $(this).index(); //DOM對象轉(zhuǎn)換jQuery對象
//2.1鼠標(biāo)滑入后,當(dāng)前圖片的前面圖片偏移位置減小到 j*100位置
for(var j = 0; j <= index; j++){
lis.eq(j).stop().animate({left: j*100 + 'px'},300);
}
//2.2鼠標(biāo)滑入后,當(dāng)前圖片的后面圖片偏移位置擴(kuò)大到 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鼠標(biāo)滑出后,所有圖片恢復(fù)到原來的位置 i*200
for(var i = 0; i < lis.length; i++){
lis.eq(i).stop().animate({left: i*200 + 'px'},300);
}
});
})
注意：方法一在實(shí)現(xiàn)的過程中，注意寬度和圖片命名的設(shè)置。
提示：這里使用的是jQuery代碼實(shí)現(xiàn)，javaScript代碼也是一樣的可以實(shí)現(xiàn)，只是修改下遍歷過程和內(nèi)置函數(shù)方法，另外再重寫動畫函數(shù)。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“jQuery如何實(shí)現(xiàn)圖片推拉門動畫效果”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
當(dāng)前標(biāo)題：jQuery如何實(shí)現(xiàn)圖片推拉門動畫效果
標(biāo)題網(wǎng)址：
http://weahome.cn/article/jhejse.html
重慶分公司
重慶分公司
