收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

简单实现jQuery手风琴效果

本文实例为大家分享了jQuery实现手风琴效果的具体代码,供大家参考,具体内容如下

js代码:

<script type="text/javascript" src="jquery-3.0.0.js"></script>
<script type="text/javascript">
      $(function() {
        //获取所有li遍历
        $(".li_list").each(function() {
          //当鼠标进去当前li
          $(this).mouseenter(function() {
            //设置当前元素宽度
            $(this).stop()
                .animate({ "width": "600px" }, 500, "linear");
                //设置同胞元素宽度
                .siblings().stop()
                      .animate({ "width": "100px" }, 500, "linear");
          });
        });
      });
    </script>

css代码:

 .li_list {
        width: 100px;
        height: 300px;
        list-style: none;
        float: left;
        overflow: hidden;
      }

      .li_list img {
        width: 100%;
        height: 100%;
      }

      .divbg {
        width: 600px;
        height: 300px;
        background: rgba(230, 0, 0, 0.5);
        text-align: center;
        line-height: 300px;
        float: left;
      }

      .divbg span {
        display: block;
        width: 100px;
        height: 300px;
        float: left;
      }

      .div1 {
        width: 500px;
        height: 300px;
        float: left;
      }
      .mo{
        width: 600px;
      }

html代码:

<ul class="ul_list">
      <li class="li_list">
        <div class="divbg">
          <span>萌宠</span>
          <div class="div1">
            <img src="img/0.jpg" />
          </div>
        </div>
      </li>
      <li class="li_list">
        <div class="divbg">
          <span>萌宠</span>
          <div class="div1">
            <img src="img/1.jpg" />
          </div>
        </div>
      </li>
      <li class="li_list">
        <div class="divbg">
          <span>萌宠</span>
          <div class="div1">
            <img src="img/2.jpg" />
          </div>
        </div>
      </li>
      <li class="li_list mo">
        <div class="divbg">
          <span>萌宠</span>
          <div class="div1">
            <img src="img/3.jpg" />
          </div>
        </div>
      </li>
    </ul>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持积木网。

jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
本文实例讲述了jQuery+HTML5实现WebGL高性能烟花绽放动画效果。分享给大家供大家参考,具体如下:运行效果:完整代码如下:!DOCTYPEhtmlhtmlclass="-webkit-jsfle

Mui使用jquery并且使用点击跳转新窗口的实例
网上好多朋友是这样做的:全局插入了js代码mui('body').on('tap','a',function(){document.location.href=this.href;});这样做是行的,但是有很多问题,比如点击侧栏的时

jQuery实现表格冻结顶栏效果
昨天晚上公司遇到个小需求,就是实现类似表格冻结顶栏的效果,具体描述就是下面动态图的效果这样的效果不算是很难,但是实现起来确实挺麻烦的

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号