zoukankan      html  css  js  c++  java
  • Jquery实现滑动导航

    Jquery实现树桩导航

    展示一下效果

    当我鼠标在导航移动的时候下面的图片随着鼠标的移动而变化

    实现思路

    1. 找到要知道要操作的对象并加上相对应的事件

    2. 为当前对象添加样式:

    方法的讲解

    $()  jqerry()的简写   addClass()添加样式  siblings() 兄弟们 removeClass()移除样式  index()索引 function()函数  eq()选择

    笔者在这里写了一个关于鼠标滑动变换图片效果

     

    Jquery滑动导航

    <title>Document</title>

      <style>

    *{margin:0;

      padding:0;

    }

    .warp{ 560px; height:215px;border:1px solid gray; }

    .nav li{

    list-style:none; float:left;

    padding-left:5px; 93.3px;height:30px;

    line-height:30px;

    text-align:center; border:1px solid gray;

    box-sizing:border-box;

    }

    .con .show{

    display:block;

    }

    .con div{

    display:none;

    }

    .selected{

    }

      </style>

     </head>

     <body>

      <div class="warp">

    <div class="nav">

    <ul>

    <li>健康</li>

    <li>秒杀</li>

    <li>彩电</li>

    <li>手机</li>

    <li>空调</li>

    <li>电器</li>

    </ul>

    </div>

      

      <div class="con">

    <div class="show"><img src="img/poster1.jpg"/> </div>

    <div><img src="img/poster2.jpg"/></div>

    <div><img src="img/poster3.jpg"/></div>

    <div><img src="img/poster4.jpg"/></div>

    <div><img src="img/poster5.jpg"/></div>

    <div><img src="img/poster6.jpg"/></div>

      

      </div>

      

      </div>

    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>

    <script>

    $(".nav li").mousemove(function(){

    $(this).addClass("selected").siblings().removeClass("selected");

    var i=$(this).index();

    $(".con div").eq(i).addClass("show").siblings().removeClass("show");

    });

    </script>

     </body>

    </html>

  • 相关阅读:
    在新浪爱问上看到的有趣名字都记下来
    FastReports_4.14.1 _Cliff手动安装
    计算机算法对做事效率的启发(既要高强度猛攻,也要细水长流)
    有趣的数组
    listView 分页加载数据
    如何隐藏Cognos Viewer
    使用DBUnit实现对数据库的测试
    通过Jasmine和Guard自动测试JavaScript
    for惠普2013实习生
    栈的顺序存储,所谓的顺序栈
  • 原文地址:https://www.cnblogs.com/qufeiba/p/8365520.html
Copyright © 2011-2022 走看看