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