jq實現酷炫的鼠標經過圖片翻滾效果
更新時間:2014年03月12日 16:03:47 作者:
一個酷炫的圖片翻滾效果要實現這個效果并不難,只要思路對了,一切都好辦,下面有個不錯的示例,大家可以參考下
短短的十多行代碼就實現了一個酷炫的圖片翻滾代碼,要實現這個效果并不難,只要思路對了,一切都好辦,不多說了,直接上代碼看效果!
html結構:
<ul class="list">
<li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></li>
<li><img src="images/11.jpg" alt="" /><a href="#"><span>2</span></a></li>
<li><img src="images/12.jpg" alt="" /><a href="#"><span>3</span></a></li>
<li><img src="images/13.jpg" alt="" /><a href="#"><span>4</span></a></li>
<li><img src="images/10.jpg" alt="" /><a href="#"><span>5</span></a></li>
<li><img src="images/11.jpg" alt="" /><a href="#"><span>6</span></a></li>
<li><img src="images/12.jpg" alt="" /><a href="#"><span>7</span></a></li>
<li><img src="images/13.jpg" alt="" /><a href="#"><span>8</span></a></li>
</ul>
css代碼:
*{ margin:0; padding:0;}
.list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}
.list li{ float:left; width:150px; height:80px; overflow: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庫):
$(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下來看下效果唄!
html結構:
復制代碼 代碼如下:
<ul class="list">
<li><img src="images/10.jpg" alt="" /><a href="#"><span>1</span></a></li>
<li><img src="images/11.jpg" alt="" /><a href="#"><span>2</span></a></li>
<li><img src="images/12.jpg" alt="" /><a href="#"><span>3</span></a></li>
<li><img src="images/13.jpg" alt="" /><a href="#"><span>4</span></a></li>
<li><img src="images/10.jpg" alt="" /><a href="#"><span>5</span></a></li>
<li><img src="images/11.jpg" alt="" /><a href="#"><span>6</span></a></li>
<li><img src="images/12.jpg" alt="" /><a href="#"><span>7</span></a></li>
<li><img src="images/13.jpg" alt="" /><a href="#"><span>8</span></a></li>
</ul>
css代碼:
復制代碼 代碼如下:
*{ margin:0; padding:0;}
.list{ width:640px; margin:100px auto; border:1px solid #ddd; overflow:hidden;}
.list li{ float:left; width:150px; height:80px; overflow: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庫):
復制代碼 代碼如下:
$(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下來看下效果唄!
您可能感興趣的文章:
- 兼容ie和firefox的鼠標經過(onmouseover和onmouseout)實現--簡短版
- js實現圖片顯示局部,鼠標經過顯示全部的效果
- Javascript實現的鼠標經過時播放聲音
- 鼠標經過導航菜單時顏色改變效果
- javascript學習筆記(二) 鼠標經過時,改變div塊的背景色的代碼
- javascript中onmouse事件在div中失效問題的解決方法
- jquery插件實現鼠標經過圖片右側顯示大圖的效果(類似淘寶)
- 鼠標經過顯示二級菜單js特效
- CSS鼠標響應事件經過、移動、點擊示例介紹
- jquery左右滾動焦點圖banner圖片鼠標經過顯示上下頁按鈕
- jquery給圖片添加鼠標經過時的邊框效果
- jquery簡單實現鼠標經過導航條改變背景圖
- 鼠標經過tr時,改變tr當前背景顏色
- Jquery中國地圖熱點效果-鼠標經過彈出提示層信息的簡單實例
- jQuery 鼠標經過(hover)事件的延時處理示例
- 使用mouse事件實現簡單的鼠標經過特效
相關文章
jQuery在vs2008及js文件中的無智能提示的解決方法
我通過下面方法實現了jQuery在VS2008及js文件中的智能提示的,希望對朋友們有所幫助。2010-12-12