A-A+

JavaScript 仿苹果桌面dock效果

2015年11月26日 JavaScript 暂无评论 阅读 145 次

Apple 的 Mac,有一种桌面快捷方式,是放到一排dock栏里的,很多window机器美化的时候,也使用了这样的方式。我们可以用 JavaScript 模拟一个桌面效果的dock。

原理:

鼠标滑入滑出的时候,dock图标会变大。鼠标距离某个图标越近,图标变得越大。因此,可以计算出鼠标距离每一个图标的距离。根据这个距离比例,相应的改变图标的大小。

1.求距离公式

求两个元素之间的距离。用到了三角勾股定理。c2 = a2 + b2

换算成 js 代码为  c = Math.sqrt(a*a + b*b) ,鼠标的位置,可以通过 事件对象获取,dock的位置,通过其位置属性获取。求出距离之后,将这个距离除以某一个定时,作为比例系数。

2.求dock中心的位置

因为dock是 div 下面的一排 img。因此,img的offsetTop其实是相对于其外面父级Div的距离,想要获得其相对鼠标的offsetTop,则需要加上外面那个 div的offsetTop。其中心位置为:

var x = aImg[i].offsetLeft + aImg[i].offsetWidth / 2;
var y = aImg[i].offsetTop + oDiv.offsetTop + aImg[i].offsetHeight / 2;

3.求鼠标到dock的距离

通过公式,就能知道鼠标距离中心的距离。然后将这个距离除以某一个定值,活动一个比例。再用 1 减去这个得出另外一个比例。这个比例则表示,鼠标距离每一个dock中心的距离比。距离那一个dock越近,其值就越大,转换成变化的宽度或高度也越大。

window.onload = function(){
        document.onmousemove = function(ev){
            var oEvent = ev || event;
            var oDiv = document.getElementById('div1');
            var aImg = document.getElementsByTagName('img');
            for(var i = 0;i < aImg.length;i++){
                //计算中心位置 x,y
                var x = aImg[i].offsetLeft + aImg[i].offsetWidth / 2;
                var y = aImg[i].offsetTop + oDiv.offsetTop + aImg[i].offsetHeight / 2;
                //计算三角的两边
                var a = x - oEvent.clientX;
                var b = y - oEvent.clientY;
                //计算距离
                var dis = Math.sqrt(a * a + b * b);
                //计算比例
                var scale = 1 - dis / 300;
                //改变img宽度
                aImg[i].style.width = scale * 128 + 'px';
            }
                
        }
    }

上述代码还有一个小问题,当鼠标距离dock越来越近的时候,dock是变得越来越大,可是当鼠标离开的时候。dock会越来越小,甚至变成0.由 于图片最小是 64 px;最大是 128px;因此可以限定变化的比例。即当比例 scale小于 0.5.也就是图片小于 64的时候,就把比例恒定为 0.5.这样鼠标离开再远,也使用 0.5 的比例。

附上完整代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    #warp {width:100%; position:absolute; bottom:0; text-align:center;}
    img{width:64px;};
</style>
<script>
    window.onload = function(){
        document.onmousemove = function(ev){
            var oEvent = ev || event;
            var oDiv = document.getElementById('warp');
            var aImg = document.getElementsByTagName('img');
            for(var i = 0;i < aImg.length;i++){
                //计算中心位置 x,y
                var x = aImg[i].offsetLeft + aImg[i].offsetWidth / 2;
                var y = aImg[i].offsetTop + oDiv.offsetTop + aImg[i].offsetHeight / 2;
                //计算三角的两边
                var a = x - oEvent.clientX;
                var b = y - oEvent.clientY;
                //计算距离
                var dis = Math.sqrt(a * a + b * b);
                //计算比例,300这个值可以自己根据效果修改
                var scale = 1 - dis / 300;
                //判断scale,防止鼠标距离太远图片太小
                if(scale < 0.5) scale = 0.5;
                //改变img宽度
                aImg[i].style.width = scale * 128 + 'px';
            }
    
        }
    }
</script>
</head>
<body>
<div id="warp">
    <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>
</body>
</html>

我大概看了一下  300应该是id=menu那个div的对角线长度  但是这个值 他没用计算的方式获得
而是直接给定了一个差不多的值  来保证渐变的视觉效果
最开始的每个图表就是原图表的二分之一的宽度
然后在动的过程中  算每个图表的中心点距离鼠标点的距离
然后再除以对角线长度 获得百分比  通过百分比来控制图标大小
如果你的鼠标focus在图表的中心店
那么这个公式算出的就是1
然后就把这个图表放大到原来的宽度
之所以最开始先把所有的图标设置成原宽度的二分之一 我想是因为怕放大之后 图片失真
大概酱样子
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录