js模拟苹果菜单

模拟苹果菜单的js代码是从网上看到的，用来做导航菜单还是蛮好看的。这里借鉴一下。

效果描述：当鼠标移动离哪个图片最近的时候，这个图片最大，鼠标离的图片越远，则图片越小；

原理：主要用到了三角形的勾股定理，可以根据两点的坐标，求到两点的距离，突然发现数学知识和js效果息息相关啊！

步骤：

1.插入大的图片，防止图片放大后失真，图片初始值为它的一半。

2.获取每个图片的中心点；

3.获取鼠标的位置；

4.使用勾股定理求出鼠标离图片中心的的距离；

代码入下：

document.mousemove=function(e){

        var e=window.event||e;

	for (var i = 0; i < oImg.length; i++) {

	        var x = oImg[i].offsetLeft + oImg[0].offsetWidth/2 ;//我这里每个图片都一样宽；

	        var y = oImg[i].offsetTop + oImg[0].offsetHeight/2 + box.offsetTop;	//box是包含图片外面的div，用来定位的；

		var a=e.clientX - x;

		var b=e.clientY - y;

		var c=Math.sqrt(Math.pow(a,2)+Math.pow(b,2)); //数学公式

		var d=1-c/300; //c除以300是用来降低基数的，因为c越大，代表鼠标离图片越远，则图片越小，所以用1-则得到相对应的基数；

		if(d<0.5){

			d=0.5  //图片本身不能小于它的一半

		}

		oImg[i].style.width=d*128 + 'px';

		oImg[i].style.height=d*128 + 'px';

	}; 

}

看着很难的一个效果，用初中学的知识就解决了，真的很意想不到。

巴特西

js模拟苹果菜单

最新文章

热门文章