这篇博客通过HTML、CSS和JavaScript实现了一个类似苹果系统桌面任务栏的效果。利用鼠标移动事件，动态调整任务栏图标的大小，当鼠标靠近图标时，图标会根据距离按比例缩放，提供了一种交互体验。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<style type="text/css">
*{margin:0px;padding:0px;}
#box{position:absolute;bottom:0px; width:100%;text-align:center; background-color: yellow}
#box img{width:70px;cursor:pointer;}
</style>
<script type="text/ecmascript">
(function () {
function $(id) {
return document.getElementById(id);
}
window.onload = function () {
var oBox = $('box');
var aImg = oBox.getElementsByTagName('img');
document.onmousemove = function (ev) {
var ev = ev || window.event;
for (var i = 0; i < aImg.length; i++) {
var a = ev.clientX - (aImg[i].offsetLeft + aImg[i].offsetWidth / 2);
var b = ev.clientY - (aImg[i].offsetTop + aImg[i].offsetHeight / 2 + oBox.offsetTop);
//勾股定理求出鼠标到aImg[i]中心距离
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
var spex = 1 - c / 300;
if (spex < 0.5) {
spex = 0.5;
}
aImg[i].style.width = spex * 140 + 'px';
aImg[i].style.height = spex * 140 + 'px';
}
}
}
})();
</script>
<body style=" background-color:Gray">
<div id="box">
<img src="Image/4.png" />
<img src="Image/5.png" />
<img src="Image/6.png" />
<img src="Image/1.png" />
<img src="Image/2.png" />
<img src="Image/3.png" />
</div>
</body>
</html>
扫一扫
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
