<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

         }

         ul{

             list-style: none;

         }

         .wrap {

             width: 1010px;

             margin: 100px auto 0;

         }

         .wrap li{

             width: 200px;

             height: 400px;

             float: left;

         }

     </style>

     <script src="../jquery-1.11.1.min.js"></script>

     <script>

         $(document).ready(function () {

          $('.wrap li').each(function(i,ele){

              $(ele).css("background","url(images/"+ (i + 1) +".jpg)");

          }).mouseenter(function(){

              $(this).stop().animate({width:600},500).siblings('li').stop().animate({width:100},500)

          }).mouseleave(function(){

              $('.wrap li').stop().animate({width:200},500);

          })

         });

     </script>

 </head>

 <body>

 <div class="wrap">

     <ul>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

     </ul>

 </div>

 </body>

 </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. javaweb笔记全套

    Lesson 1 一.eclipse工具的使用 1. java代码的位置 1) 选择工作空间 workspace  选择一个文件夹存放程序(代码) 不要用中文和空格 2) 新建一个java 工程(Pr ...

  2. $stateParams 详解

     如何传递参数(参考 http://www.cnblogs.com/jager/p/5293225.html) 首先,要在目标页面定义接受的参数: 传参, ui-sref: $state.go: 接收 ...

  3. JDK核心JAVA源代码解析（1） - Object

    想写这个系列非常久了,对自己也是个总结与提高.原来在学JAVA时.那些JAVA入门书籍会告诉你一些规律还有法则,可是用的时候我们一般非常难想起来,由于我们用的少而且不知道为什么.知其所以然方能印象深刻 ...

  4. Java基础1-反射篇

    1.页首请关注 思维导航大纲 2.大牛文章学习: 序号 博主 主要内容 1  sinat_38259539 总结的较全面的反射内容 2     3.自己的理解: 3.1.本文大纲 3.2.正文 1.获 ...

  5. Python之zip

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python之zip #http://python.jobbole.com/82590/ #1)zip语法格 ...

  6. MySQL存储过程中的3种循环【转载】

    在MySQL存储过程的语句中有三个标准的循环方式:WHILE循环,LOOP循环以及REPEAT循环.还有一种非标准的循环方式:GOTO,不过这种循环方式最好别用,很容易引起程序的混乱,在这里就不错具体 ...

  7. 使用 Eclipse 远程调试 Java 应用程序

    Eclipse 中的远程调试特性 Eclipse 是一个图形化 Java 调试器前端.JDI 在 org.eclipse.jdt.debug 包中实现.本文不详细讨论 JDI 实现.参见 参考资料 获 ...

  8. 教程 | 一文入门Python数据分析库Pandas

    首先要给那些不熟悉 Pandas 的人简单介绍一下,Pandas 是 Python 生态系统中最流行的数据分析库.它能够完成许多任务,包括: 读/写不同格式的数据 选择数据的子集 跨行/列计算 寻找并 ...

  9. jQuery+ajax中，让window.open不被拦截(转)

    方法1:<input type="button" class="preview" value="预览"/>$('.preview ...

  10. 关于JavaScript中Get/Set访问器

    有时候大家可能会纳闷,在使用JavaScript的时候,只需要给一个系统变量赋值就可以触发一系列操作去相应. 但是我们在写Js的时候,修改了一个自定义变量,却连个P都没有.是不是很郁闷呢? 其实,我们 ...