第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>
运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读