码迷,mamicode.com
首页 > 移动开发 > 详细

第37天:小米手机图片展示

时间:2017-09-20 00:48:50      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:col   flow   pointer   .com   element   logs   tom   str   console   

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>

运行效果:
技术分享

 

第37天:小米手机图片展示

标签:col   flow   pointer   .com   element   logs   tom   str   console   

原文地址:http://www.cnblogs.com/le220/p/7554791.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!