自定义动画js

Original 2019-04-10 08:36:24 337
abstract:<!DOCTYPE html><html><meta charset="UTF-8"> <title>自定义动画</title> <script src="../js/jquery-1.11.0.js" type="text/javascript" ></scr

<!DOCTYPE html>

<html>

<meta charset="UTF-8">

<title>自定义动画</title>

<script src="../js/jquery-1.11.0.js" type="text/javascript" ></script>

<style type="text/css">

/*div{width:100px; height:100px; background:grey; border: 1px solid grey ;margin-top:20px;text ;}*/

/*.box{color:red;}

.cat{font-size:40px;}*/

/*.bb{color:pink;font-size: 40px;}*/

/*p{width:100px; height:100px; background:darkgoldenrod; border: 1px solid yellow ;color:red;margin-top:10px;padding:0 auto;}*/

/*.box1,.box2,.box3,.box4*/

/*.main{height:240px;width:200px;margin-right:10px;float:left;}

.bt,.bt1,.bt2,.bt3{width:200px;height:40px;border:none;}*/

div{width:200px;height:200px;background:#8A2BE2;position:absolute;} 

</style>

<body>

<script type="text/javascript">

                      $(document).ready(function(){

                        $('.right').click(function(){

                        $('.box1').animate({left:'1000px'},1500)

                      })   

                     $('.stop').click(function(){

                      $('.box1').stop()

                 })    

})

</script>

 <button class="right">移动</button>

    

    <button class="stop">停止</button>

    <div class="box1">秦皇殿下</div>

</body>


</html>


Correcting teacher:天蓬老师Correction time:2019-04-10 09:43:38
Teacher's summary:自定义动画, 用jQuery写只需要几行搞定, 用原生可能需要至少五倍的代码量, 所以jQuery的口号是写得更少, 而做得更多是有道理的

Release Notes

Popular Entries