Jquery animate

最新推荐文章于 2024-07-22 15:13:59 发布

yayun0516

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量664

点赞数

分类专栏： asp.net 文章标签： javascript jquery animate

本文链接：https://blog.csdn.net/yayun0516/article/details/41345863

版权

asp.net 专栏收录该内容

117 篇文章 7 订阅

订阅专栏

.aspx代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Jquery animate.aspx.cs" Inherits="Jquery_animate" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
    .div_height1{  padding:10px;
                 border:1px solid black;}
     .div_height2{  padding:10px;
                 border:1px solid black;} 
     .div_height3{  padding:10px;
                 border:1px solid black;} 
     .div_height4{  padding:10px; width:40px; height:40px;
                    position:relative;
                 border:1px solid black;}    <%--position:relative;非常重要，没有的话不会移动  --%>                              
    </style>
    <script src="Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="Scripts/jquery.color.js" type="text/javascript"></script>
    <%--不拖不会显示颜色--%>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#Button1").click(function () {
                $(".div_height1").animate({ "height": "100px" }, 2000, "", myalert);
            });
            $("#Button2").click(function () {
                $(".div_height2").animate({ "height": "+=100px" }, 2000);
            });
            $("#Button3").click(function () {
                $(".div_height3").animate({ "backgroundColor":"red" });
            });
            $("#Button4").click(function () {
                $(".div_height4").animate({ "top":"+=30px","left":"+=30px"});
            });
        });
        
        function myalert() {
            alert("OK");
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="Button1" type="button" value="增加高度" />
        <div class="div_height1"></div>      
        <input id="Button2" type="button" value="每次点击增加高度" />
        <div class="div_height2"></div>  
        <input id="Button3" type="button" value="背景颜色" />
        <div class="div_height3"></div>  
         <input id="Button4" type="button" value="位移" />
        <div class="div_height4"></div>  
    </div>
    </form>
</body>
</html>

效果如下：

yayun0516

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery animate

.aspx代码如下： .div_height1{ padding:10px; border:1px solid black;} .div_height2{ padding:10px; border:1px solid black;} .div_height3{
复制链接

扫一扫

专栏目录