Jquery 动画下拉菜单

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动画菜单</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        font-size: 14px;
    }
    
    a {
        color: #333;
        text-decoration: none
    }
    
    ul {
        list-style: none;
    }
    
    .nav {
        height: 30px;
        border-bottom: 5px solid #F60;
        margin-left: 50px;
        width: 600px;
    }
    
    .nav li {
        float: left;
        position: relative;
        height: 30px;
        width: 120px
    }
    
    .nav li a {
        display: block;
        height: 30px;
        text-align: center;
        line-height: 30px;
        width: 120px;
        background: #efefef;
        margin-left: 1px;
    }
    
    .subNav {
        position: absolute;
        top: 30px;
        left: 0;
        width: 120px;
        height: 0;
        overflow: hidden
    }
    
    .subNav li a {
        background: #ddd
    }
    
    .subNav li a:hover {
        background: #efefef
    }
    </style>
    <script>
    $(function(){
      $("li").hover(
          function(){
            $(this).find("ul").stop().animate({"height":"150px"}, 500);//找到当前节点下的ul并动画改变其值
          },
          function(){
            $(this).find("ul").stop().animate({"height":"0px"}, 500);
          }
        )
    })
    </script>
</head>

<body>
    <ul class="nav">
        <li><a href="#">一级菜单</a>
            <ul class="subNav">
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a>
            <ul class="subNav">
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
                <li><a href="#">二级菜单</a></li>
            </ul>
        </li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
        <li><a href="#">一级菜单</a></li>
    </ul>
</body>

</html>

[/cce_js]

jdfw

Jquery 菜单伸展动画

[cce_js]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航菜单</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
a{color:#333;text-decoration:none}
ul{list-style:none; height:50px; border-bottom:5px solid #F60; padding-left:30px;}
ul li{float:left; margin-top:20px;}
a{display:block;height:30px;text-align:center; line-height:30px; width:120px; background-color:#ccc;}
a.on, a:hover{ color:#fff;background-color:#F60;height:30px; line-height:30px; }
</style>
<script>
  $(function(){
    $('a').hover(
      function(){
        $(this).stop().animate({"width":"160px"},200);
      },
      function(){
        $(this).stop().animate({"width":"120px"},200);
      }
      );
  });
</script>
</head>
<body>
<ul>
    <li><a class="on" href="#">首  页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</body>
</html>
[/cce_js]

显示效果:

jdfw

jquery 停车动画效果 animate

1.代码:

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <title>停车动画</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <style>
    * {
        padding: 0px;
        margin: 0px;
    }
    
    body {
        background: #D5DEE7;
    }
    
    .boxgrid {
        width: 720px;
        height: 701px;
        border: solid 2px #8399af;
    }
    
    .boxgrid img.car {
        position: absolute;
        top: 0;
        left: 720px;
    }
    </style>
</head>

<body>
    <div class="boxgrid">
        <img src="1.jpg" alt="" class="car" width="350" height="341" />
        <img src="2.jpg" alt="" calss="" width="350" height="341" /></div>
</body>
<script>
$(document).ready(function() {
    $('.boxgrid').hover(function() {
        $(".car").animate({
            left: '0px'
        }, {
            duration: 300
        });
    }, function() {
        $(".car").animate({
            left: '720px'
        }, {
            duration: 300
        });
    });
});
</script>

</html>

[/cce_js]

jdfw

 

2.

[cce_js]
<!DOCTYPE html>
<html>

<head>
    <title>停车动画</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <style>
    * {
        padding: 0px;
        margin: 0px;
    }
    
    body {
        background: #D5DEE7;
    }
    
    .car {
        position: absolute;
        top: 0;
    }
    </style>
</head>

<body>
    <img class="car" src="1.jpg" width="350" height="341" />
</body>
<script>
$(document).ready(function() {
	$("img").hover(function(){
		$(".car").animate({top:"500px"},{duration:600})
	},function(){
		$(".car").animate({top:"0px"},{duration:600})
	})
            });
</script>

</html>

[/cce_js]

jdfw

jquery 自定义改变li背景函数

案例:

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>

<body>
    <ul>
        <li>改别我的背景</li>
    </ul>
</body>
<script>
(function($){
    $.extend({
        "changColor": function(color){
            $("li").bind("mouseover",function(){
                $("li").css("backgroundColor",color);
            });
        }
    });
})(jQuery);
$(function(){
    $.changColor("red");
})
</script>

</html>

[/cce_js]

jquery定义两个按钮,分别控制一个DIV的左移或右移

定义两个按钮,分别控制一个DIV的左移或右移

[cce_js]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <style>
    div {
        position: relative;
        left: 500px;
    }
    
    span {
        position: relative;
        left: 500px;
    }
    </style>
</head>

<body>
    <div>我爱祖国</div>
    <span>我爱祖国</span>
    <button id="left1">左移</button>
    <button id="right1">右移</button>
    <script>
    $("#left1").bind("click", function() {
        $("div").animate({
            left: "-=50px"
        }, 3000, function() {
            $(this).stop();
            $("span").html("执行完成");

        })
    })

    $("#right1").bind("click", function() {
        $("div").animate({
            left: "+=50px"
        }, 3000, function() {
             $(this).stop();
            $("span").html("执行完成")

        })
    })

    </script>
</body>

</html>

[/cce_js]

jquery 改变元素内容实例

jquery 改变元素内容实例:

[cce_js]
[cce]
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>

<body>
    <ul>
        jquery
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <a href="javascript:;">更多</a>
    <script>
    $(function() {
        $("li:eq(5),li:eq(6)").css("display", "none");
        $("a").click(function() {
            if ($("a").text() === "更多") {
                $("a").text("简化");
                $("li:eq(5),li:eq(6)").css("display", "list-item");
            } else {
                $("a").text("更多");
                $("li:eq(5),li:eq(6)").css("display", "none");
            }
        })
    })
    </script>
</body>

</html>

[/cce]
[/cce_js]