jQuery是一個排序和過濾HTML元素,增加動畫和用戶交互性等的JavaScript庫。它被廣泛應用于Web開發(fā)中,其中圖片動態(tài)效果也是它的強項之一。
圖片抖動是一種非常流行的動畫效果,可以使圖片變得更有趣,吸引人的眼球。在jQuery中,實現(xiàn)圖片抖動相對容易,以下是一些實現(xiàn)方法:
// 簡單的圖片抖動效果
$(document).ready(function(){
$("img").hover(function(){
$(this).css("position","relative");
$(this).animate({left: "-10px"}, 'fast');
$(this).animate({left: "10px"}, 'fast');
$(this).animate({left: "-10px"}, 'fast');
$(this).animate({left: "10px"}, 'fast');
$(this).animate({left: "0px"}, 'fast');
}, function(){
$(this).css("position","");
});
});
代碼中,我們首先使用hover()函數(shù)實現(xiàn)鼠標放上去和拿開時的效果。然后通過設置圖片的position屬性來讓其具有相對定位的效果。最后通過animate()函數(shù)從左到右多個方向移動圖片來實現(xiàn)抖動效果。
如果你想要更加復雜的圖片抖動效果,可以通過控制圖片的CSS樣式來實現(xiàn)。例如:
// 更復雜的圖片抖動效果
$(document).ready(function(){
$("img").hover(function(){
$(this).css({"position":"relative", "right":"-5px"});
for (var i = 1; i< 8; i++) {
$(this).animate({right:((i%2 == 0 ? -1 : 1) * 25)}, 50);
}
$(this).animate({right:0}, 50);
}, function(){
$(this).css("position","");
});
});
該代碼中,我們通過CSS設置圖片的初始位置。使用循環(huán)動態(tài)設置其right屬性值,實現(xiàn)抖動效果。最后將樣式恢復為原來的狀態(tài)。
綜上所述,通過jQuery實現(xiàn)圖片抖動效果非常簡單,并且能夠給網(wǎng)站帶來更加豐富的動態(tài)效果。
上一篇jquery 圖片處理
下一篇mysql中odbc