jQuery-自定义动画
点击某个按钮,实现某个div的动画
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
var i=0;
$("button").click(function(){
i=i+1;
$("#test1").text(i);
$("div").animate({
left:'+=25px',//每次将位置右移25px
top:'+=25px',//每次将位置下移25px
opacity:'-=0.1',//opacity代表透明度,1-0,数字越小代表颜色越浅,透明度越大
height:'+=20px',//每次将所产生动画的div块高度增加20px
width:'+=20px'//每次将所产生动画的div块宽度增加20px
});
});
});
</script>
</head>
<body>
<button id="btn">开始动画</button>
点击次数:<span id="test1">0 </span>
<p>如果需要对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:20px;width:20px;position:absolute;">
</div>
</body>
</html>设置了一个变量i,用来计算次数点击的显示,以下附件是动画截图。
相关推荐
88284453 2020-05-09
83510998 2020-03-26
89463661 2020-01-17
81463166 2020-01-08
Ladyseven 2020-10-22
mapaler 2020-07-17
云端漂移 2020-07-17
淡风wisdon大大 2020-06-27
lanzhusiyu 2020-06-21
AlisaClass 2020-06-05
jiedinghui 2020-06-04
usepython 2020-05-31
flycony 2020-05-30
hqulyc 2020-05-05
yaodilu 2020-04-30
冰蝶 2020-04-20
vavid 2020-04-20