项目：模仿苹果桌面，近大远小

主要的实现原理:

1.先找到桌面上每个图形的中心点分别到鼠标的距离

2.根据近大远小的原理，距离鼠标距离近的，图像就会大些，距离鼠标距离远的，图像就会小些

代码实现如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>苹果菜单</title>
<style>
body,input {margin:0;padding:0;}
#div1{width:100%;margin:0 auto;text-align: center;position:absolute;bottom:0;}
img {width:64px;}
</style>
</head>
<body>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<div id="div1">
<img src="img/1.png" />
<img src="img/2.png" />
<img src="img/3.png" />
<img src="img/4.png" />
<img src="img/5.png" />
</div>
<script>
/*
1.aImg[i].offsetTop+aImg[i].offsetHeight/2 只是img到div的距离，还要加上div到document
的距离

2.scale要取反一下
3.图片不能无限小，所以scale要进行条件限制一下.
*
*
* */
aIpt=document.getElementsByTagName("input");
oDiv=document.getElementById("div1");
aImg=oDiv.getElementsByTagName("img");

document.οnmοusemοve=function(ev){

for(var i=0;i<aImg.length;i++){
var ev=ev||event;
var x=aImg[i].offsetLeft+aImg[i].offsetWidth/2+oDiv.offsetLeft;
var y=aImg[i].offsetTop+aImg[i].offsetHeight/2+oDiv.offsetTop;
var a=ev.clientX;
var b=ev.clientY;
var dis=Math.sqrt(Math.pow(a-x,2)+Math.pow(b-y,2));
//aIpt[i].value=dis;
var scale=1-dis/400;
if(scale<0.4){
scale=0.4;
}
aIpt[i].value=scale;
aImg[i].style.width=128*scale+"px";
}
}

</script>
</body>
</html>

项目：模仿苹果桌面，近大远小相关推荐

html5 模仿苹果桌面,JavaScript模仿桌面窗口
这个大概花了YQ一天多时间(虽然含杂大量酱油时间),第一次做,惊现各种debug.网上说的果然没错--debug的时间比写程序的时间多--明显是因为自己没有在敲代码之前做好准备,忽略了很多细节,引以为 ...
基于vue模仿苹果官网的banner图
**基于vue模仿苹果官网的banner图** 最近刚接了个新需求,需要做一个轮播图,于是二话不说,就使用element ui 自带的轮播图,简单又暴力,分分钟实现需求,然后又可以摸鱼了. 五分钟以后 ...
html5 苹果 dock,基于JQuery模仿苹果桌面的Dock效果(初级版)
新的一天新的开始,今天要分享的是用JQuery模仿苹果操作系统桌面的Dock效果,之所以称之为初级版,是因为其中还有一些bug,显示效果并不稳定.由于时间的关系,这些bug还没有修复,希望高手们不吝赐 ...
为什么国产操作系统要基于linux,解说国产Linux操作系统为什么都模仿Windows桌面...
目前大多数国产Linux操作系统的桌面都和微软的Windows桌面非常类似,相信很多人都有这个疑问,为什么多数国产Linux操作系统都在模仿Windows桌面?而不是独有的界面风格呢? 下面来看两张国 ...
把Vue项目打包为桌面应用(nwjs)
目前已知把Vue项目打包成桌面应用有两种方式:(1)使用nwjs生成桌面应用:(2)使用Electron生成桌面应用.本文采用的是nwjs生成桌面应用,也是我认为最简单.最快捷的一种. 一.打包Vue ...
电脑常识某企业桌面虚拟化项目-Citrix虚拟桌面解决方案
电脑常识某企业桌面虚拟化项目-Citrix虚拟桌面解决方案 xxx桌面虚拟化项目Citrix解决方案 xxx桌面虚拟化项目 Citrix解决方案 1项目背景秉承"尊重个性.创造价值.贡献于 ...
android仿iphone苹果桌面源码拖拉排
android仿iphone苹果桌面源码拖拉排序哦仿苹果桌面仿iphone ios桌面 launcher 本人见市场上很少仿排序拖拉这样的算法.所以改android源码.供大家学习使用哦. 这是a ...
最新版MydockFinder-体验极致模拟Mac OS系统苹果桌面还原度高达99%
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.mydockfinder最新版特点二.mydockfinder最新版安装使用 1.下载mydockfinder ...
让电脑桌面耀眼夺目：20套高清苹果桌面壁纸
苹果的 LOGO 设计独一无二,简洁优雅.在这篇文章中,我为大家收集了20套优雅精美的苹果 LOGO 桌面壁纸,他们会让你的电脑桌面看起来更漂亮,更有个性,赶紧为你的电脑换装吧! 您可能还喜欢 35张 ...

项目：模仿苹果桌面，近大远小

项目：模仿苹果桌面，近大远小相关推荐

最新文章

热门文章