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学习总结之jQuery事件
今天总结一下jQuery事件，这是比较重要的一块，希望本次总结能帮助到很多同我一样的新手
2014-06-06
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
这篇文章主要介绍了jQuery创建自定义的选择器用以选择高度大于100的超链接,实例分析了jQuery自定义选择器的使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
JQuery+EasyUI轻松实现步骤条效果
jQuery EasyUI 提供易于使用的组件，它使 Web 开发人员能快速地在流行的 jQuery 核心和 HTML5 上建立程序页面。通过本文给大家介绍JQuery+EasyUI轻松实现步骤条效果，需要的朋友参考下
2016-02-02
jQuery实现折线图的方法
这篇文章主要介绍了jQuery实现折线图的方法,涉及jQuery及相关插件的使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-02-02
jquery div 居中技巧应用介绍
在项目实战中碰到了一些问题，例如，jquery如何使div居中，此问题一直困扰着我，因此寻找了一些方法，晒出来和大家分享一下
2012-11-11
MVC Ajax Helper或Jquery异步加载部分视图
这篇文章主要介绍了MVC Ajax Helper或Jquery异步加载部分视图的相关资料,需要的朋友可以参考下
2015-11-11
bootstrap与Jquery UI 按钮样式冲突的解决办法
这篇文章主要介绍了bootstrap与Jquery UI 按钮样式冲突的解决办法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09
jQuery实现的自定义弹出层效果实例详解
这篇文章主要介绍了jQuery实现的自定义弹出层效果,结合实例形式较为详细的分析了jQuery自定义弹出层的布局、事件响应与页面元素动态操作的相关技巧,需要的朋友可以参考下
2016-09-09
jQuery源码分析之sizzle选择器详解
jquery从1.3开始，使用了新的选择器–sizzle。效率超过了以前的jquery版本的其他选择器。下面这篇文章主要介绍了jQuery源中sizzle选择器的相关资料，文中介绍的很详细，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
这篇文章主要为大家详细介绍了jQuery Json数据格式排版高亮插件json-viewer.js的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具