Jquery animate
来源:互联网 发布:淘宝代销的可以刷吗 编辑:程序博客网 时间:2024/05/11 17:25
.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>
效果如下:
0 0
- jquery animate
- jquery. animate
- Jquery animate
- jQuery animate()
- 【JQuery】animate()
- jQuery Animate
- jQuery animate()
- jquery animate例子实践
- jquery(show,fadeOut,Animate)
- jquery animate实现动画
- jquery自定义动画-animate()
- Jquery animate 效果
- Jquery animate实现效果
- jQuery API .animate()
- jQuery--animate() 方法
- jQuery animate方法
- 【jQuery】 效果 - animate() 方法
- jQuery animate方法
- Linux 系统启动过程【转】
- 第七章 以数据为中心的程序设计
- 两个ArrayList做差集效率问题
- uboot和内核启动
- JVM学习笔记1-jvm的基本结构
- Jquery animate
- 安卓笔记--intent传值不更新问题
- 图片保存裁剪的基础功能
- mysql
- NIPS 2013
- 如何在MFC中添加全局变量和全局函数
- libcurl使用ftp的一个例子
- HDOJ 1004 字符串排序
- 主程的晋升攻略(5):HTTP协议和二进制协议的对比