zoukankan      html  css  js  c++  java
  • 第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>

    运行效果:

  • 相关阅读:
    vue 中简单路由的实现
    Vue中对生命周期的理解
    内存泄漏
    前端工程化
    exports 和 module.exports 的区别
    Nodejs的url模块方法
    MongoDB 的获取和安装
    Anjular JS 的一些运用
    移动端vconsole调试
    安装fiddler时,电脑浏览器没网
  • 原文地址:https://www.cnblogs.com/le220/p/7554791.html
Copyright © 2011-2022 走看看