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>

    运行效果:

  • 相关阅读:
    MyISAM和InnoDB的区别
    MySQL——索引与优化
    jquery选择器及效率问题
    Mac 可设置环境变量的位置、查看和添加PATH环境变量
    javascript默认中文(汉字/标点)长度均为1的解决
    苹果下抓屏截屏方法 包括全屏、选择区域、窗口抓屏等
    java实现window phone推送通知
    设计模式总结
    NHibernate 帮助类(单例实际运用)
    访问者模式
  • 原文地址:https://www.cnblogs.com/le220/p/7554791.html
Copyright © 2011-2022 走看看