代码学习:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Nearth</title> <script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> body{ background-image: url(0.jpg); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100%; } div{ width:500px; } img{ width:50px; height:50px; vertical-align: top; } </style> <script type="text/javascript"> //要求:动态遍历插入十张图片,同时实现图片的隐藏与显示 $(function(){ var tem = ""; for(i=1;i<=10;i++){ tem += "<img src="+parseInt(i)+".jpg>"; } $("div").append(tem); });//关键代码,遍历插入图片 $(function(){ $("#btn").click(function (){ $("div>img").show(1000); }); $("#btn1").click(function(){ $("div>img").last("img").hide(1000,function(){ //arguments.callee相当于递归,不断的(一张张的)隐藏图片,而不是点击按钮,图片全部隐藏 $(this).prev().hide(1000,arguments.callee); }); }); //显示 $("#btn2").click(function(){ $("div>img").first("img").show(1000,function(){ $(this).next().show(1000,arguments.callee); }); }); }); </script> </head> <body> <h1>隐藏动画案例</h1> <hr > <input type="button" name="" id="btn1" value="隐藏动画" /> <input type="button" name="" id="btn2" value="显示动画" /> <hr > <div> </div> </body> </html>
运行结果:
Nearth===>WEB前端--第23课/JQuery/动画隐藏案列5(动态遍历实现图片的插入)
最新推荐文章于 2019-11-16 17:30:09 发布