jquery.color.js要放在juqery-1.8.3.js这个核心库的下面：
.aspx代码如下：
<%@ Page Title="" Language="C#" MasterPageFile="~/SAMPLE_CODE/AMST_SAMPLE.master" AutoEventWireup="true" CodeFile="S1_JqueryAnimate_simple.aspx.cs" Inherits="SAMPLE_CODE_S1_JqueryAnimate_simple" %>
<asp:Content ID="Content1" ContentPlaceHolderID="CPH_HEAD" Runat="Server">
<link href="../CSS/animate_simple.css" rel="stylesheet" type="text/css" />
<script src="../Jscript/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../Jscript/jquery.color.js" type="text/javascript"></script>
<script type ="text/javascript">
$(document).ready(function () {
//1. div_animatoe_001,点击层本身,改变层的宽度到400px;
$("#div_animate_001").click(function () {
$(this).animate({ "width": "400px" });
});
//2. 点击层本身,每次增加宽度20px;
$("#div_animate_002").click(function () {
$(this).animate({ width: "+=20" });
});
//3. 点击层本身,同时改变高度和宽度及字体大小，一起设置
$("#div_animate_003").click(function () {
$(this).animate({ width: "400px", height: "40px", fontSize: "20px" });
});
//4. 点击层本身,同时改变高度和宽度及字体大小,分开设置
$("#div_animate_004").click(function () {
$(this).animate({ width: "400px" }, 200);
$(this).animate({ height: "40px" }, 200);
$(this).animate({ fontSize: "20px" }, 200);
});
//5. 点击层本身,更改背景色及透明度
$("#div_animate_005").click(function () {
$(this).animate({ backgroundColor: "green", width: "300px" }, 300);
$(this).animate({ opacity: "0.5", color: "yellow" });
});
//6. 可移动的层,每次点击向右移动30px
$("#btn_6").click(function () {
$("#div_animate_006").animate({ left: "0px" });
});
$("#div_animate_006").click(function () {
$(this).animate({ left: "+=30px" });
});
//7.内层的移动控制
$("#div_left").click(function () {
var r = getR();
if (r >= 80) {
$("#div_content").animate({ left: "-=80" });
} else {
$("#div_content").animate({ right: "0" });
}
});
$("#div_right").click(function () {
var l = getL();
if (l >= 80) {
$("#div_content").animate({ left: "+=80" });
} else {
$("#div_content").animate({ left: "0" });
}
});
});
//2个取值函数可以合并,请自行合并
function getR() {
var _w1 = document.getElementById("div_content").offsetWidth;
var _L1 = document.getElementById("div_content").offsetLeft;
var _w2 = document.getElementById("div_middle").offsetWidth;
var _L2 = document.getElementById("div_middle").offsetLeft;
return (_w1 - _w2 - _L2 + _L1);
}
function getL() {
var _w1 = document.getElementById("div_content").offsetWidth;
var _L1 = document.getElementById("div_content").offsetLeft;
var _w2 = document.getElementById("div_middle").offsetWidth;
var _L2 = document.getElementById("div_middle").offsetLeft;
return ( _L2 - _L1);
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPH_MEMO" Runat="Server">
<h3>简单动画展示</h3>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="CPH_MAIN" Runat="Server">
<div id="div_animate_001" class ="divAm">
点击层本身,改变层的宽度到400px;
</div>
<div id="div_animate_002" class ="divAm">
点击层本身,每次增加宽度20px;
</div>
<div id="div_animate_003" class ="divAm">
点击层本身,同时改变高度和宽度及字体大小
</div>
<div id="div_animate_004" class ="divAm">
点击层本身,同时改变高度和宽度及字体大小
</div>
<div id="div_animate_005" class ="divAm">
点击层本身,更改背景色及透明度
</div>
<div id="div_animate_006" class ="divAm">
可移动的层,每次点击向右移动30px
</div>
<input id="btn_6" type="button" value="复位层6" />
<hr />
内层的移动控制
<div id="div_animate_007_outer">
<div id="div_left"><</div>
<div id="div_right">></div>
<%--middle是内容层的外框--%>
<div id="div_middle">
<%--content为实际内容层,实际内容可能大于外框--%>
<div id="div_content">
<img src="../imgs/img1.jpg" alt="" />
</div>
</div>
<div style ="clear:both;"></div>
</div>
</asp:Content>
界面如下：
