zoukankan      html  css  js  c++  java
  • 2017-6-2 jQuery 动画

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
         <script src="js/jquery-1.7.1.min.js"></script>
        <title></title>
        <style type="text/css">
            .div1 
            {
                200px;
                height:200px;
                background-color:red;
                float:left;
                margin:20px 20px;
            }
    
    
        </style>
       
    </head>
    <body>
    
        <input type="button" value="btn1" id="btn1" />
        <div class="div1"></div>
        <div class="div1"></div>
    
    </body>
    </html>
    <script type="text/javascript">
        //隐藏显示:
        $("#btn1").click(function () {
            if ($(".div1").css('display') == 'block') {
                $(".div1").hide();
            }
            else
            {
                $(".div1").show();
            }
        });
        //卷帘门效果:
        $("#btn1").click(function () {
            if ($(".div1").css('display') == 'block') {
                $(".div1").slideUp();
            }
            else {
                $(".div1").slideDown();
            }
        });
       // 淡入淡出效果:
        $("#btn1").click(function () {
            if ($(".div1").css('display') == 'block') {
                $(".div1").fadeOut();
            }
            else {
                $(".div1").fadeIn();
            }
        });
        //自定义动画:
    
        $("#btn1").click(function () {
            $(".div1").animate({"500px",height:"800"},1000);
        });
    
    </script>

    下拉菜单:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="js/jquery-1.7.1.min.js"></script>
        <title></title>
        <style type="text/css">
            .div1 
            {
                position:relative;
                100px;
                height:50px;
                background-color:red;
                float:left;
              margin-left:20px;
            }
            .div2 
            {
                position:absolute;
                100%;
                height:0px;
                top:50px;
                background-color:green;
            }
    
        </style>
       
    
    </head>
    <body>
    
        
        <div class="div1">
            <div class="div2"></div>
        </div>
        <div class="div1">
            <div class="div2"></div>
        </div>
         <div class="div1">
            <div class="div2"></div>
        </div>
         <div class="div1">
            <div class="div2"></div>
        </div>
         <div class="div1">
            <div class="div2"></div>
        </div>
    </body>
    </html>
    <script type="text/javascript">
        $(".div1").mousemove(function ()
        {
            var aa = $(this).children(".div2:eq(0)");
            aa.stop().animate({ height: "300px" }, 100, function ()
            {
                aa.css("background-color","blue");
            });
        });
    
        $(".div1").mouseout(function () {
            var aaa = $(this).children(".div2:eq(0)");
            aaa.stop().animate({ height: "0px" }, 100, function () {
                aaa.css("background-color", "yellow");
            });
        });
    </script>

    淡入淡出按钮效果:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/jquery.color.js"></script>
        <title></title>
        <style type="text/css">
            #div1 {
                200px;
                height:200px;
                background-color:red;
                font-size:30px;
            }
    
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="div1">按钮
        
        </div>
        </form>
    </body>
    </html>
    <script type="text/javascript">
        $("#div1").mousemove(function ()
        {
            $(this).animate({backgroundColor:"green", color:"white"},500);
    
        });
    
        $("#div1").mouseout(function ()
        {
            
            $(this).animate({ backgroundColor: "red", color: "black" }, 500);
        });
    
    </script>
  • 相关阅读:
    Linux常用命令
    Linux静态函数库与动态函数库
    解决MySQL5.7的表无法插入中文的问题
    MySQL与postgreSQL在left join查询时的区别
    《刻意练习》读书笔记
    在Golang中实现与Python装饰器类似功能的方法
    项目中使用进程内缓存的一些经验及注意事项
    Golang中使用recover捕获panic的操作及遇到的一个坑
    Python与Golang中给列表中字典按照某个key排序的实现
    浅谈Python与Golang中的“延迟绑定机制”
  • 原文地址:https://www.cnblogs.com/zhengqian/p/6941119.html
Copyright © 2011-2022 走看看