摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery动画效果实战</title> <script type="text/javascript" src="
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery动画效果实战</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> .contents{width: 1440px;margin:0 auto;} img{width: 430px;height: 264px} .main{width: 430px;height: 360px;float: left;border: 1px solid #ccc;margin: 20px;} button{text-align:center;width: 430px;height: 94px;border: none;font-size: 30px;} </style> </head> <body> <div> <div> <img src="images/01.jpg" alt=""> <button>图片动画</button> </div> <div> <img src="images/02.jpg" alt=""> <button>上滑下滑效果</button> </div> <div> <img src="images/03.jpg" alt=""> <button>淡入淡出效果</button> </div> <div> <img src="images/04.jpg" alt=""> <button>图片透明度</button> </div> <div> <img src="images/01.jpg" alt=""> <button>图片动画二</button> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('.but4').click(function(){ $('.img4').animate({opacity:'toggle',width:'toggle'},1000) }) $('.but2').click(function(){ $('.img2').slideToggle(1000) }) $('.but3').click(function(){ $('.img3').fadeToggle(1000) }) $('.but1').click(function(){ $('.img1').each(function(){ $(this).animate({width:'200px'},1500) $(this).animate({width:'430px'},1500) })//老师帮我看看这段代码,不知道这样写有没有问题,百度出来的结果 }) $('.but5').click(function(){ $('.img5').animate({width:'200px'},1500) $('.img5').animate({width:'430px'},1500) }) }) </script> </body> </html>
批改老师:韦小宝批改时间:2018-11-26 14:50:20
老师总结:嗯!写的很不错哦!以下的脑图整理的也很棒!至于你这段代码有没有问题你在运行的时候有没有看到有啥问题呢?如果是没有问题那不就是可以正常使用的嘛!其实我们在初学阶段的时候就是要这样去尝试!不会的可以各种找别人的代码过来看!看看为什么要这样写!课后记得多多练习哦!