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

简介: 1、arguments对象alert(arguments.length);//返回实参的个数只在函数内使用arguments.callee;//返回正在执行的函数,也是在函数体内使用在函数递归调用时,推荐使用arguments.

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>

运行效果:

 

相关文章
|
2天前
Discuz! X3.5插件云诺-阿里云短信手机登录 会员登录后也无法查看附件图片的问题解决方法
Discuz! X3.5插件云诺-阿里云短信手机登录 会员登录后也无法查看附件图片的问题解决方法
13 2
|
9天前
|
前端开发 小程序 Java
java基础:map遍历使用;java使用 Patten 和Matches 进行正则匹配;后端传到前端展示图片三种情况,并保存到手机
这篇文章介绍了Java中Map的遍历方法、使用Pattern和matches进行正则表达式匹配,以及后端向前端传输图片并保存到手机的三种情况。
11 1
|
10天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
111 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
3月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
399 0
|
4月前
|
开发工具
云控微信开发SDK使用教程--手机微信朋友圈图片上传服务端
云控微信开发SDK使用教程--手机微信朋友圈图片上传服务端
|
5月前
|
XML 计算机视觉 数据格式
手机点击按钮进行切换图片
手机点击按钮进行切换图片
30 0
|
移动开发 JavaScript 前端开发
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
数据可视化大屏百度地图手机端标注开发实战案例解析(jsAPI接口、标注分类图片、文本标签、分类筛选、自适应高度信息弹窗、PHP后端API)
201 0
|
Android开发
android手机中图片的拖拉及浏览功能
android手机中图片的拖拉及浏览功能
99 1
|
缓存 JavaScript 前端开发
|
算法 Java Android开发
Android开发:使用Java对手机截图图片进行任意区域的颜色对比度处理操作
开发项目过程中,对于手机屏幕截图,需要对获取到的截图的任意部分进行区域颜色对比度的识别操作,由此判定任意指定区域是否满足某对比度基本标准,但是该功能在网上任何地方都没有找到过Java方面的代码,于是根据RGB转换测试的原理:即获取每个像素点的RGB,通过RGB对比度定义公式进行像素点的集合换取。