效果很炫,滑动超流畅!
完整源码:http://yuncode.net/code/c_5055d5cc4879382
保存为html即可
核心代码:
<script type="text/javascript">
19 window.onload = function ()
20 {
21 var oMenu = document.getElementById("menu");
22 var aImg = oMenu.getElementsByTagName("img");
23 var aWidth = [];
24 var i = 0;
25 //保存原宽度, 并设置当前宽度
26 for (i = 0; i < aImg.length; i++)
27 {
28 aWidth.push(aImg[i].offsetWidth);
29 aImg[i].width = parseInt(aImg[i].offsetWidth / 2);
30 }
31 //鼠标移动事件
32 document.onmousemove = function (event)
33 {
34 var event = event || window.event;
35 for (i = 0; i < aImg.length; i++)
36 {
37 var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;
38 var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;
39 var iScale = 1 - Math.sqrt(a * a + b * b) / 300;
40 if (iScale < 0.5) iScale = 0.5;
41 aImg[i].width = aWidth[i] * iScale
42 }
43 };
44 };
45 </script>