1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style type="text/css">
  7.          * {
  8.              margin: 0;
  9.              padding: 0;
  10.          }
  11.          ul{
  12.              list-style: none;
  13.          }
  14.  
  15.          .wrap {
  16.              width: 1010px;
  17.              margin: 100px auto 0;
  18.          }
  19.          .wrap li{
  20.              width: 200px;
  21.              height: 400px;
  22.              float: left;
  23.          }
  24.      </style>
  25.      <script src="../jquery-1.11.1.min.js"></script>
  26.      <script>
  27.          $(document).ready(function () {
  28.           $('.wrap li').each(function(i,ele){
  29.               $(ele).css("background","url(images/"+ (i + 1) +".jpg)");
  30.           }).mouseenter(function(){
  31.               $(this).stop().animate({width:600},500).siblings('li').stop().animate({width:100},500)
  32.           }).mouseleave(function(){
  33.               $('.wrap li').stop().animate({width:200},500);
  34.  
  35.           })
  36.          });
  37.      </script>
  38.  </head>
  39.  <body>
  40.  <div class="wrap">
  41.      <ul>
  42.          <li></li>
  43.          <li></li>
  44.          <li></li>
  45.          <li></li>
  46.          <li></li>
  47.      </ul>
  48.  </div>
  49.  </body>
  50.  </html>

jQuery实现的手风琴效果的更多相关文章

  1. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

  2. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  3. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  4. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  5. jQuery插件实例四：手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

  6. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  7. jquery横向手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jQuery UI -- Repeater & 手风琴(Accordion)效果

    jQuery UI -- Repeater & 手风琴(Accordion)效果 很简单的范例,完全不用写程序 直接套用就能做! 但是,基础不稳的人,连「复制贴上」直接套用, 对您而言,都困难 ...

  9. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

随机推荐

  1. 文本框只支持数字、小数点、退格符、负号、Del键

    Public Function OnlyNumberAndDot(inKeyAscii As Integer) As Integer '函数说明:文本框只支持数字.小数点.退格符.负号.Del键 '入 ...

  2. java正则表达式简介

    Java的正则表达式讲解:(为了能看清,本文正则表达式用中文的句号代替英文句点) 1 英文句点符号:匹配单个任意字符. eg: 表达式”t.o  可以匹配:tno,t#o,teo等等.不可以匹配:tn ...

  3. 解决win10 获取不到ip

    1.检查Dhcp服务是否启动 2.关闭防火墙

  4. html字符转义

    常用表: No. 文字表記 10進表記 16進表記 文字   Comment 001 " " " """   quotation mark ...

  5. MVC第一次访问比较慢的解决方案

    一.NGen优化 %WINDIR%\Microsoft.NET\Framework64\v4.0.30319\ngen install EntityFramework.Core.dll %WINDIR ...

  6. ZooKeeper做独立server执行(上)

    ZooKeeper做独立server执行(上) 作者:chszs.转载需注明.博客主页:http://blog.csdn.net/chszs 一.ZooKeeper安装及配置 版本号:ZooKeepe ...

  7. 【转载】MyEclipse使用指南(精简版)

    1.安装 2.注册 3.配置 window ----> preferences (1)配置 JDK java--->Installed JREs --> Add ---> JR ...

  8. HDUOJ---1241Oil Deposits(dfs)

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  9. tensorflow的警告

    W c:\tf_jenkins\home\workspace\release-win\device\cpu\os\windows\tensorflow\core\platform\cpu_featur ...

  10. 32个Chrome 针对网页设计师和开发人员扩展

    http://zmingcx.com/32-chrome-web-designers-and-developers-to-expand.html