Jquery 方块随着鼠标所在的区域而放大

更新时间：2010年05月28日 02:28:13 作者：

下面都是默认一样大小的方块，当鼠标放到你想要放的位置，则当前位置的方块则放大。

效果如下图:

实现代码:运行后F5刷新下

<!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> <title>Jquery 方块随着鼠标所在的区域而放大 </title> <script src="http://img.jb51.net/jslib/jquery/jquery14.js" type="text/javascript"></script> <style type="text/css"> *{margin:0;padding:0;} .dock { text-align:center;} .dock div{width:8px;height:8px;border:1px #dfdfdf solid; background:#dfdfdf;margin:2px auto; line-height:0px;overflow: hidden;} </style> </head> <body> <div class="dock"></div> <script language="javascript" type="text/javascript"> //配置 var m=5;//最大倍数 var s=400;//距中心最大距离 var count=20;//个数 //Dock类 function Dock(){ this.dockItems=[]; this.addItem=function(item){ this.dockItems.push($(item)); $(item).appendTo(".dock"); }; } //生成Dock对象实例 var d=new Dock(); //循环插入count个dockItem dom对象 for(var i=0;i<count;i++){ d.addItem('<div class="'+i+'"></div>'); } //绑定dockItem函数 $(".dock div").bind("mouseover",function(event){ var w=$(this).width(); var h=$(this).height(); var offset=$(this).offset(); onmouseItemout(offset.top); }); //处理子对象样式 function onmouseItemout(top){ for(var i=0;i<d.dockItems.length;i++){ var c=d.dockItems[i].attr("class"); var of=$("."+c).offset(); d1=Math.abs(of.top-top); var z=zoomD(m,s,d1); $("."+c).css({width:8*z+"px",height:8*z+"px"}); } } //计算放大倍数 function zoomD(m,s,d){ var z=m*(s-d)*(s-d)/(s*s+1); return (z<1)?1:z; } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

jQuery lazyload 的重复加载错误以及修复方法
jQuery lazyload是一款延迟加载图片的的插件，原意是按需加载，当图片出现在可视区域时进行加载，但是官方的插件经过firebug的检测可知，并不能节省流量开支，反而有重复加载的现象。
2010-11-11
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
下面小编就为大家带来一篇JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
淘宝网上的菜单滑动伸展收缩想必大家不会很陌生吧，接下来本文也使用jquery+css实现一个，代码很简洁功能很使用，感兴趣的各位可以不要错过了哈
2013-03-03
即将发布的jQuery 3 有哪些新特性
本文主要介绍jQuery 3中一些新增的特性和一些变更的特性，以及一些废弃删除的特性，另外介绍了jQuery 3.0 最大的变化就是彻底放弃对 IE8 的支持，大家可以先看一下。
2016-04-04
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
目前只能算个不完整的脚本，不过一般的仅仅需要表头冻结就可以使用了
2010-05-05
jQuery 如何先创建、再修改、后添加DOM元素
这篇文章主要介绍了jQuery 如何创建、修改、添加DOM元素,需要的朋友可以参考下
2014-05-05
精选的10款用于构建良好易用性网站的jQuery插件
这篇随笔收集了10款非常给力的jquery 插件，帮助你构建易用性良好的网站，希望对你有用！
2011-01-01
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
这篇文章主要介绍了使用jQuery mobile NuGet让你的网站在移动设备上同样精彩，使用jQuery mobile NuGet包，改变共享的布局和视图，并使你的网站在传统的浏览器和大部分手机展现的都很好。,需要的朋友可以参考下
2019-06-06
利用JQuery制作符合Web标准的QQ弹出消息
本篇文章主要介绍了利用JQuery制作符合Web标准的QQ弹出消息。这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了jQuery的自定义动画
2014-01-01
jquery实现网页查找功能示例分享
当需要在页面中查找某个关键字时，一是可以通过浏览器的查找功能实现，二是可以通过前端脚本准确查找定位，本文介绍通过jQuery实现的页面内容查找定位的功能，并可扩展显示查找后的相关信息
2014-02-02