abstract:<!DOCTYPE html> <html> <head> <title>JQuery的动画效果--自定义动画</title> <meta charset="utf-8"> &nb
<!DOCTYPE html> <html> <head> <title>JQuery的动画效果--自定义动画</title> <meta charset="utf-8"> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> .box{height: 120px;width: 100px;float: left;margin-right: 20px;} .ele1{height: 100px;width: 100px;background: blue;position: absolute;text-align: center;line-height: 100px;} .ele2{height: 100px;width: 100px;background: red; border-radius: 100px;position: absolute; text-align: center;line-height: 100px;} button{height: 40px;width: 100px;border:1px solid #000;} </style> <script type="text/javascript"> $(document).ready(function(){ $('.bt1').click(function(){ $('.ele1').animate({ right:'50px', opacity:'0.4' },3000) }); $('.stop1').click(function(){ $('.ele1').stop() }) $('.bt2').click(function(){ $('.ele2').animate({ bottom:'50px', height:'300px', width:'300px', borderRadius:'300px', fontSize:'100px' },3000) }); $('.stop2').click(function(){ $('.ele2').stop() }) }) </script> </head> <body> <div class="box"> <button class="bt1">点击抛出方块</button> <button class="stop1">停止</button> <div class="ele1">方块</div> </div> <div class="box"> <button class="bt2">点击球体落下</button> <div class="ele2">球体</div> <button class="stop2">停止</button> </div> </body> </html>
Correcting teacher:韦小宝Correction time:2018-11-12 09:05:30
Teacher's summary:代码方面写的没啥问题!但是缺少总结和归纳!下次记得补上!!!总结和归纳也是很重要的!别小看了这些东西!!