zoukankan      html  css  js  c++  java
  • jquery版滑块导航栏

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>滑动导航栏</title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <style type="text/css">
    *{margin: 0;padding: 0;}
    nav{1000px;height: 60px;margin:200px auto;position: relative;}
    ul li{z-index:200;list-style: none;float: left; cursor: pointer;height: 60px;200px;}
    ul li a{cursor:pointer;display: block;font-size:24px;text-align: center;line-height:60px;}
    ul{overflow: hidden;}
    .redline{position: absolute;display:block;left:0;top:0;198px; height: 58px; border: 1px solid #f00; z-index:-10;}
    </style>
    <body>
    <nav>
    <ul class="ulbox">
    <li><a hrel="#">集团要闻</a></li>
    <li><a hrel="#">集团要闻</a></li>
    <li><a hrel="#">集团要闻</a></li>
    <li><a hrel="#">集团要闻</a></li>
    </ul>
    <span class="redline">

    </span>
    </nav>
    </body>
    <script type="text/javascript">
    $(function(){
    var inifit=0;
    $('.ulbox li').hover(function over(){
    var listleft=$(this).offset().left;
    var navleft=$("nav").offset().left;
    $('.redline').stop().animate({'left':listleft-navleft},1000);
    },function out(){
    $('.redline').stop().animate({'left':inifit},1000);
    });
    $('.ulbox li').click(function start(){
    var navleft=$("nav").offset().left;
    inifit=$(this).offset().left-navleft;
    });
    });
    </script>
    </html>

  • 相关阅读:
    复杂对象创建终结者(Builder Pattern)
    创建型模式特立独行的两位大侠
    工厂模式(Factory)
    MAC 相关
    iOS 地图相关
    iOS字体相关
    App跳转系统设置界面
    Mac 模拟慢速网络
    Thread1:EXC_BAD_ACCESS 错误
    iOS 统计App 的代码总行数
  • 原文地址:https://www.cnblogs.com/luoguixin/p/6249505.html
Copyright © 2011-2022 走看看