zoukankan      html  css  js  c++  java
  • jquery 王者荣耀手风琴

    1)基础原理

    //1 鼠标经过某个li有两步操作
    //2 当前小li宽度变为224px 同时里面 小图片谈出 大图片淡入
    //3 其余兄弟小li宽度变69px 小图片淡出 大图片淡入

    2)代码实现

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>手风琴案例</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            img {
                display: block;
            }
            ul {
                list-style: none;
            }
            .king {
                 852px;
                margin: 100px auto;
                background: url(images/bg.png) no-repeat;
                overflow: hidden;
                padding: 10px;
            }
            .king ul {
                overflow: hidden;
            }
            .king li {
                position: relative;
                float: left;
                 69px;
                height: 69px;
                margin-right: 10px;
            }
            .king li.current {
                 224px;
            }
            .king li.current .big {
                display: block;
            }
    
            .king li.current .small {
                display: none;
            }
            .big {
                 224px;
                display: none;
            }
            .small {
                position: absolute;
                top: 0;
                left: 0;
                 69px;
                height: 69px;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
    <script src="jquery.min.js"></script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>
    </div>
    <script>
       $(".king li").mouseover(function () {
           //1 当前小li宽度变为224px 同时里面 小图片谈出 大图片淡入
           // $(this).stop().animate({244},200);
           // $(this).find('.small').stop().fadeOut();
           // $(this).find('.big').stop().fadeIn();
    
           //链式调用
           $(this).stop().animate({ 224},200).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
    
           //2 其余兄弟小li宽度变69px 小图片淡入 大图片淡出
           // $(this).siblings().stop().animate({69},200);
           // $(this).siblings().find('.small').stop().fadeIn();
           // $(this).siblings().find('.big').stop().fadeOut();
    
           //链式调用
           $(this).siblings("li").stop().animate({ 69},200).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
       });
    </script>
    </body>
    </html>
  • 相关阅读:
    Android中TextView中内容不换行的解决方法
    对ORA-01795: 列表中的最大表达式数为 1000的处理(算法:计算数量及切割)
    poj 1094 Sorting It All Out (拓扑排序)
    Automatically generate serial number in abap
    Getting started with new I/O (NIO)--reference
    JDK源码重新编译——支持eclipse调试JDK源码--转载
    Reactor构架模式--转载
    分布式服务框架 Zookeeper -- 管理分布式环境中的数据--转载
    深入分析 iBATIS 框架之系统架构与映射原理--转载
    Servlet 工作原理解析--转载
  • 原文地址:https://www.cnblogs.com/fuyunlin/p/14494303.html
Copyright © 2011-2022 走看看