快捷導(dǎo)航

jquery應(yīng)用實例分享_實現(xiàn)手風(fēng)琴特效

更新時間：2018年02月01日 08:35:33 作者：蘭亭序亂

下面小編就為大家分享一篇jquery應(yīng)用實例_實現(xiàn)手風(fēng)琴特效的示例代碼。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

效果：

實例如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  *{padding: 0px;margin: 0px;}
  li{
   width: 80px;height:300px;
   float: left;overflow: hidden;
   list-style: none;
  }

 </style>
 <script type="text/javascript "src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<script >
 $(function () {
  $("ul li").mouseover(function (){
   $(this).stop().animate({width:350},500)//stop函數(shù)：停止當(dāng)前正在運行的動畫
   //siblings:遍歷
   $(this).siblings().stop().animate({width:80},500)//anmate：500ms后將其width變?yōu)?0px；
  })
 })
</script>
<div>
 <ul>
 <li style="width: 350px"><img src="1.jpg"></li>
 <li><img src="2.jpg"></li>
 <li><img src="3.jpg"></li>
 <li><img src="4.jpg"></li>
 <li><img src="5.jpg"></li>
 </ul>
</div>
</body>
</html>

以上這篇jquery應(yīng)用實例分享_實現(xiàn)手風(fēng)琴特效就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery插件jPaginate實現(xiàn)無刷新分頁
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個ie啊。
2015-05-05
基于jquery實現(xiàn)多選下拉列表
這篇文章主要為大家詳細(xì)介紹了基于jquery實現(xiàn)多選下拉列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-08-08
flag和jq on 的綁定多個對象和方法(必看)
下面小編就為大家?guī)硪黄猣lag和jq on 的綁定多個對象和方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
jQuery無刷新上傳之uploadify3.1簡單使用
本文主要介紹jQuery插件uploadify3.1的簡單使用，希望能幫到大家，有需要的朋友可以參考一下。
2016-06-06
jquery 1.4.2發(fā)布！主要是性能與API
沒想到j(luò)query這次居然更新這么快，jquery1.4的教程我還沒有發(fā)二周，jquery1.4.2就發(fā)布了。這次jquery1.4.2更新的內(nèi)容主要是性能和新增了一些新的API。
2010-02-02
3分鐘寫出來的Jquery版checkbox全選反選功能
checkbox全選反選的文章在以前也有介紹很多，實在是不想在提起了，然而身邊還是有些朋友不會，于是3分鐘寫出來一個估計有很多bug
2013-10-10
jQueryUI如何自定義組件實現(xiàn)代碼
第一次自定義jQueryUI Widget 又是第一次，現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。
2010-11-11
jQuery+CSS實現(xiàn)一個側(cè)滑導(dǎo)航菜單代碼
側(cè)滑菜單在網(wǎng)站設(shè)計中應(yīng)用比較廣泛，在許多網(wǎng)站上都可以看到此種類型的菜單。本文給大家介紹jQuery+CSS實現(xiàn)一個側(cè)滑導(dǎo)航菜單代碼，需要的朋友參考下吧
2016-05-05
jQuery頁面彈出框?qū)崿F(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了jQuery頁面彈出框?qū)崿F(xiàn)文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
JQuery遍歷DOM節(jié)點的方法
這篇文章主要介紹了JQuery遍歷DOM節(jié)點的方法,實例分析了jQuery遍歷DOM節(jié)點的相關(guān)技巧,需要的朋友可以參考下
2015-06-06