第37天:小米手机图片展示
1、arguments对象
alert(arguments.length);//返回实参的个数
只在函数内使用
arguments.callee;//返回正在执行的函数,也是在函数体内使用
在函数递归调用时,推荐使用arguments.callee代替函数名本身
function fn(){console.log(arguments.callee);}
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>小米手机展示</title> 6 <style> 7 .xiaomi{ 8 width: 512px; 9 height: 400px; 10 border: 1px solid #c1c1c1; 11 margin: 100px auto; 12 overflow: hidden; 13 position: relative; 14 } 15 .xiaomi span{ 16 width: 100%; 17 height: 200px; 18 position: absolute; 19 left:0; 20 cursor: pointer; 21 } 22 .up{ 23 top:0; 24 } 25 .down{ 26 bottom:0; 27 } 28 #pic{ 29 position: absolute; 30 top:0; 31 left:0; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="xiaomi"> 37 <img src="mi.png" alt="" id="pic"> 38 <span class="up" id="picUp"></span> 39 <span class="down" id="picDown"></span> 40 </div> 41 42 </body> 43 <script> 44 function $(id){return document.getElementById(id);} 45 var num=0;//控制top值 46 var timer=null;
//上移 47 $("picUp").onmouseover=function(){ 48 clearInterval(timer); 49 timer=setInterval(function(){ 50 num-=3; 51 num>=-1070?$("pic").style.top = num + "px":clearInterval(timer); 52 },30); 53 }
//下移 54 $("picDown").onmouseover=function(){ 55 clearInterval(timer); 56 timer=setInterval(function(){ 57 num++; 58 num<0?$("pic").style.top = num + "px":clearInterval(timer); 59 60 },10) 61 } 62 63 $("pic").parentNode.onmouseout=function(){ 64 clearInterval(timer); 65 } 66 </script> 67 </html>
运行效果: