jQuery 效果 - 动画的代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$("#button1").click(
function()
{
$(".button1").animate({left:'500px'});
}
);
}
);
$(document).ready(
function(){
$("#button2").click(
function()
{
$(".button2").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
}
);
}
);
$(document).ready(
function(){
$("#button3").click(
function()
{
$(".button3").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
}
);
}
);
$(document).ready(
function(){
$("#button4").click(
function()
{
$(".button4").animate({
height:'toggle'
});
}
);
}
);
$(document).ready(
function(){
$("#button5").click(
function()
{
var div= $(".button5");
div.animate({height:'300px',opcity:'0.4'},"slow");
div.animate({width:'300px',opcity:'0.8'},"slow");
div.animate({height:'100px',opcity:'0.4'},"slow");
div.animate({width:'100px',opcity:'0.8'},"slow");
}
);
}
);
$(document).ready(
function(){
$("#button6").click(
function()
{
var div= $(".button6");
div.animate({ left:'250px'},"slow");
div.animate({ fontSize:'3em'},"slow");
}
);
}
);
</script>
</head>
<body>
<button id="button1" >开始动画=移动</button> <button id="button2" >开始动画=多个属性变大</button> <button id="button3" >开始动画=多个属性变大</button>
<button id="button4" >开始动画=伸缩</button> <button id="button5" >开始动画=扩散</button> <button id="button6" >开始动画=移动且字体变大</button>
<p>默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div class="button1" style="background: #98bf21;height:100px;width: 100px;position: absolute;" >
</div>
<p><p><p><p><p><hr>
<div class="button2" style="background:red;height:100px;width:100px;position:absolute;">
</div>
<p><p><p><p><p><hr>
<div class="button3" style="background:blue;height:100px;width:100px;position:absolute;">
</div>
<p><p><p><p><p><hr>
<div class="button4" style="background:gray;height:100px;width:100px;position:absolute;">
</div>
<p><p><p><p><p><hr>
<div class="button5" style="background:green;height:100px;width:100px;position:absolute;">
</div>
<p><p><p><p><p><hr>
<div class="button6" style="background:navy;height:100px;width:100px;position:absolute;">hello
</div>
</body>
</html>