Android写了、iOS写了、Java后端写了,接下来因为工作需要,得踩坑web前端了,所以趁这两天先学习学习,入个门。
正好看到腾讯课堂《Web前端零基础原生Js+H5/Css3移动开发+框架全栈高级应用【猿说】》的一节课,用JavaScript实现macOS Dock的效果,挺有意思。
展示效果以及项目结构跟老师讲的略微有些不一样,先上效果图
真正的macOS上的效果
我们自己写的web上的效果
老师说过的原理我就不重复了(大概就是一个勾股定理判断鼠标位置),但是她没有给Dock加上背景,所以我这边加一个背景,这样会显得更加专业是不是?嘿嘿嘿。。。毕竟处女座的蓝孩纸,比较在意细节以及有点强迫症。。。
鼠标在移到应用上的时候,Dock的背景是只会变宽不会变高的,所以如果把放icon的div设置背景的话,图标变大时可以看到div也变高了。所以我采用两层div,一层在下面作为背景,一层div背景为透明,高度设置auto并随着icon的变化而变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>macOS Dock</title>
<link rel="stylesheet" type="text/html" href="/css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="Desktop1.css"/>
<script src="../js/vendor/jquery-3.3.1.js"></script>
<script src="../js/Desktop/Desktop.js"></script>
</head>
<body>
<div id="Dock">
<div id="Icons">
<img class="icon" src="../img/Finder.png"/>
<img class="icon" src="../img/Launchpad.png"/>
<img class="icon" src="../img/AppStore.png"/>
<img class="icon" src="../img/Siri.png"/>
<img class="icon" src="../img/Safari.png"/>
<img class="icon" src="../img/Xcode.png"/>
<img class="icon" src="../img/idea.png"/>
<img class="icon" src="../img/Trashempty.png"/>
</div>
<div id="bg"></div>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body {
overflow-x: hidden;
overflow-y: hidden;
background: url("../img/Yosemite.png") no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
.icon {
width: 70px;
height: 70px;
margin-left: 5px;
}
#Dock {
position: absolute;
/*position: fixed;*/
width: 100%;
height: auto;
bottom: 0;
}
#Dock div{
}
#bg{
width: 600px;
height: 80px;
bottom: 0;
position: relative;
margin: 0 auto;
z-index: 10;
background-color:rgba(255,255,255,0.15);
}
#Icons{
font-size:0;
width: 100%;
height: auto;
bottom: 5px;
position: absolute;
z-index: 15;
text-align: center;
}
CSS设置icon的初始大小,和两个层叠div的位置,刚开始学,对于position和margin: 0 auto有点糊涂,自己写两个div填充上背景色,多试试就知道了。
JavaScript代码就是做一个勾股定理的运算,以及对icon的一个缩小放大比例,具体原理可以去腾讯课堂看视频。
$(function () {
var icons = document.getElementsByTagName("img");
var dock = document.getElementById("Dock");
document.onmousemove = function (ev) {
// || event 兼容IE event 名称
var e = ev || event;
for (var i = 0; i < icons.length; i++) {
var x = icons[i].offsetLeft + icons[i].offsetWidth / 2;
var y = icons[i].offsetTop + icons[i].offsetHeight / 2 + dock.offsetTop;
var a = ev.clientX - x;
var b = ev.clientY - y;
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
var scale = 1 - c / 300;
if (scale < 0.5) {
scale = 0.5;
}
icons[i].style.width = scale * 140 + "px";
icons[i].style.height = scale * 140 + "px";
}
};
});
WARNING:我这个是写着玩的,所以Yosemite背景图片有20多M,你们出去千万不要这样干啊。。。