jq實現酷炫的滑鼠經過圖片翻滾效果_jquery
- WBOY原創
- 2016-05-16 16:55:431157瀏覽
短短的十多行程式碼就實現了一個酷炫的圖片翻滾程式碼，要實現這個效果並不難，只要思路對了，一切都好辦，不多說了，直接上代碼看效果！
html結構：
複製程式碼 程式碼如下：
1 li>
複製程式碼 程式碼如下: *{ margin:0; ;}
.list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;} .list li{ float:left; width:150px; height:80px; hidden; list-style:none; margin:5px; display:inline; position:relative;}
.list li img{ float:left; width:150px; height:80px; border:none;}
. list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px ; overflow:hidden; color:#fff; text-decoration:none;}
jq程式碼（注意要引入jq函式庫）：
.list li img{ float:left; width:150px; height:80px; border:none;}
. list li a{ position:absolute; left:0; top:0; width:150px; height:0; background:#999; margin-top:40px; display:inline; text-align:center; line-height:80px ; overflow:hidden; color:#fff; text-decoration:none;}
jq程式碼（注意要引入jq函式庫）：
複製程式碼 程式碼如下:
$(function () { $('.list li').hover(function () {
$(this).children('a,img').stop();
$(this).children('img').stop().animate({ 'marginTop': 40, 'height' : 0 }, 200, function () {
$(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200);
});
}, function () {
$(this).children('a,img').stop();
$(this).children('a' ).stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {
$(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);
});
});
});
是不是很簡單的幾句jq程式碼？親，不妨copy下來看下效果唄！
$(this).children('a,img').stop();
$(this).children('img').stop().animate({ 'marginTop': 40, 'height' : 0 }, 200, function () {
$(this).siblings('a').stop().animate({ 'height': 80, 'marginTop': 0 }, 200);
});
}, function () {
$(this).children('a,img').stop();
$(this).children('a' ).stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {
$(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200);
});
});
});
是不是很簡單的幾句jq程式碼？親，不妨copy下來看下效果唄！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn