zoukankan      html  css  js  c++  java
  • 导航条效果的代码

    <div class="all">
        <div class="m1">标题1</div>
        <div class="m2">标题2</div>
        <div class="m3">标题3</div>
        <div class="m4">标题4</div>
        <div class="m5">标题5</div>
        <div class="m6">标题6</div>
        </div>
    
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function () {
        myHide();
        });
        function myHide() {
            //alert("hello");
            //注册事件
            $(".m1").bind('mouseover', m1_mouseover);
            $(".m1").bind('mouseout', m1_mouseout);
            $(".m2").bind('mouseover', m2_mouseover);
            $(".m2").bind('mouseout', m2_mouseout);
            $(".m3").bind('mouseover', m3_mouseover);
            $(".m3").bind('mouseout', m3_mouseout);
            $(".m4").bind('mouseover', m4_mouseover);
            $(".m4").bind('mouseout', m4_mouseout);
            $(".m5").bind('mouseover', m5_mouseover);
            $(".m5").bind('mouseout', m5_mouseout);
            $(".m6").bind('mouseover', m6_mouseover);
            $(".m6").bind('mouseout', m6_mouseout);
        };
        function m1_mouseover() {
            $(".m1").animate({  "100px", height: "30px",fontSize:"22px" }, "fast");
        }
        function m1_mouseout() {
            $(".m1").animate({  "70px", height: "20px", fontSize: "14px" }, "fast");
        }
        function m2_mouseover() {
            $(".m2").animate({  "100px", height: "30px", fontSize: "22px" }, "fast");
        }
        function m2_mouseout() {
            $(".m2").animate({  "70px", height: "20px", fontSize: "14px" }, "fast");
        }
        function m3_mouseover() {
            $(".m3").animate({  "100px", height: "30px", fontSize: "22px" }, "fast");
        }
        function m3_mouseout() {
            $(".m3").animate({  "70px", height: "20px", fontSize: "14px" }, "fast");
        }
        function m4_mouseover() {
            $(".m4").animate({  "100px", height: "30px", fontSize: "22px" }, "fast");
        }
        function m4_mouseout() {
            $(".m4").animate({  "70px", height: "20px", fontSize: "14px" }, "fast");
        }
        function m5_mouseover() {
            $(".m5").animate({  "100px", height: "30px", fontSize: "22px" }, "fast");
        }
        function m5_mouseout() {
            $(".m5").animate({  "70px", height: "20px", fontSize: "14px" }, "fast");
        }
        function m6_mouseover() {
            $(".m6").animate({  "100px", height: "30px", fontSize: "22px" }, "fast");
        }
        function m6_mouseout() {
            $(".m6").animate({  "70px", height: "20px", fontSize: "14px" }, "fast");
        }
        </script>
        <style type="text/css">
        .m1,.m2,.m3,.m4,.m5,.m6
        {
            70px;
            height:20px;
            background-color:#CCCCCC;
            border: thin solid #9999FF;
            font-size:14px;
          }
          .all
          {
            80px;
            height:160px;
            text-align:center;
          }
        </style>
    

  • 相关阅读:
    [C++知识点]2015.4.18
    [COCOS2DX]第一个开源项目的部署和运行<win32版本>
    [COCOS2DX]交叉编译实践+速度优化(vs2012修改win32代码+修改makefile+编译安卓项目包+部署安卓项目包到Eclipse+运行apk)
    [COCOS2DX]COCOS命令新建项目+编译安卓项目并成功运行
    [COCOS2DX]官网helloworld在VS2012中的部署
    【转】int const A::func()和int A::func() const
    【转】Singleton单例模式
    【转】java静态代码块和构造方法执行顺序
    小程序加入阿拉丁统计
    关于固定footer的用法
  • 原文地址:https://www.cnblogs.com/longhuang/p/1744300.html
Copyright © 2011-2022 走看看