zoukankan      html  css  js  c++  java
  • hover带有动画效果的导航

    html,body{overflow-x:hidden;}
            ul,li{list-style: none;}
            .nav{width:100%; height: 26px; overflow: hidden;}
            .nav li{width: 100px; text-align: center; height: 26px; line-height: 26px; float: left; position: relative;}
            .nav li a{text-decoration: none; color: #333;}
            .nav li .bg{background: #168EED; position: absolute; top:0; left:0; width: 100%; height: 100%; z-index:-1; filter:alpha(opacity=0); opacity:0;}
    <ul class="nav">
        <li><div class="bg"></div><a href="javaScript:;">li 1</a></li>
        <li><div class="bg"></div><a href="javaScript:;">li 1</a></li>
        <li><div class="bg"></div><a href="javaScript:;">li 1</a></li>
    </ul>
    $(function () {
            var $lis = $(".nav li");
            var $lisBg = $(".nav .bg");
            $lis.hover(function () {
                var $index = $(this).index();
                $lisBg.eq($index).animate({"opacity": 1}, 200);
            }, function () {
                var $index = $(this).index();
                $lisBg.eq($index).animate({"opacity": 0}, 300);
            })
        })
  • 相关阅读:
    Lambda表达式的演变
    反射小例
    进程外Session
    页面缓存的几种方式
    数据缓存的几种方式
    Session
    Cookie
    AJAX学习
    验证码的实现
    ASP.NET动态显示数据的两种方式
  • 原文地址:https://www.cnblogs.com/xuemingyao/p/5382929.html
Copyright © 2011-2022 走看看