JQuery模拟MAC任务栏放大效果
本文主要讨论使用JQuery模拟苹果的MAC系统任务栏的放大效果，知识粗略的实现了这个功能，并未做太多的优化，效果比较一般。
基本思想是：整个页面用一个DIV套起来，然后用JQ获取鼠标在这个DIV上移动的事件，得到鼠标当前的坐标。对比这个坐标和每一个图片的中心点的距离，距离越近则图片越大。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { margin:0; width:200%; height:1500px; background-image: url("bz/bz1.jpg"); background-repeat:repeat } #divBody { width:100%; height:100%; } #divTop { position:fixed; /* 位置固定 */ bottom:0; /* 位置固定在底部 */ width:100%; text-align:center; /* 居中 */ } </style> <title>仿MAC任务栏（固定在底部中央）</title> <script src="jquery191.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { // 初始化滚动条位置 document.body.scrollTop = 200; document.body.scrollLeft = 200; var imgwidth = 64; // 图标大小 var bigxs = 2.5; // 放大倍数 var yxxs = 70; // 对周边图标的影响半径 var wqy = Math.sqrt(imgwidth*imgwidth + imgwidth*imgwidth) + yxxs; // 当前图标的外切圆的半径+影响系数 // 初始化大小 $("#divTop img").each(function(){ $(this).attr("width", imgwidth+"px"); }); // 鼠标在divBody上移动 $("#divBody").mousemove(function(e) { var mousex = e.clientX; var mousey = e.clientY; // 滚动条距离顶部位置 var scrolltop = document.body.scrollTop; var scrollleft = document.body.scrollLeft; document.getElementById("show").innerHTML = "鼠标位置("+mousex+", "+mousey+"), 滚动条位置("+scrolltop+", "+scrollleft+")"; // 需要改变的图标 var i = 0; $("#divTop > img").each(function(){ // 当前图标的左上点 var imgx = $(this).offset().left - scrollleft; var imgy = $(this).offset().top - scrolltop; // 减去滚动条的原因：top获取到的是距离body顶部的距离，而鼠标获取到的是距离页面的距离 // 鼠标当前位置距离中心点的距离 var jl = Math.sqrt(Math.pow(mousex - imgx - (imgwidth/2), 2) + Math.pow(mousey - imgy - (imgwidth/2), 2)); var xs = 1 - (jl/wqy); // 到外切圆距离的倍数 if(xs<0) xs = 0; var end = ((bigxs-1)*xs+1)*imgwidth; // 放大的倍数的放大部分*放大系数+原始大小 $(this).attr("width", end+"px"); // 设置图标大小 document.getElementById("show").innerHTML += "<br/>第"+(++i)+"个图标位置("+imgx+", "+imgy+"), 放大系数="+((bigxs-1)*xs+1); }); }); }); </script> </head> <body> <div id="divBody" style="width:1366px; height:768px;"> <span id="show" style="position:fixed; top:0; left:0; color:#CF0;"></span> <div id="divTop" > <img src="ico/3d/001.png" /> <img src="ico/3d/002.png" /> <img src="ico/3d/003.png" /> <img src="ico/3d/004.png" /> <img src="ico/3d/006.png" /> <img src="ico/3d/007.png" /> <img src="ico/3d/008.png" /> <img src="ico/3d/009.png" /> <img src="ico/3d/005.png" /> <img src="ico/3d/010.png" /> </div> </div> </body> </html>
注意：图片自己去找，还有记得导入JQuery，我用的是1.9.1，应该是1.6.0以上的没问题
这里有意思的是：如果滚动条不是在最顶部和最左部，则效果会越来越不明显，最后效果会消失。各位可以吧scrolltop和scrollleft变量设置为0试试看就知道了。
如果有什么不足，欢迎指正。
