鼠标经过CSS小方块膨胀效果,基于jQuery编写

发布时间：2018-09-01 22:24:57 所属栏目：访谈来源：站长网

导读：这是一个操作了 jQuery 剧本编写的成果很是差的一个殊效，也许还操作不了jQuery的千分之一成果，可是通过这个殊效实例，可以开导我们做一些其余的对象出来，在往后的WEB开拓进程中，我想jQuery是必不行少的了，那么从每个方面操作和进修jQuery是我们进修的

　　这是一个操作了jQuery剧本编写的成果很是差的一个殊效，也许还操作不了jQuery的千分之一成果，可是通过这个殊效实例，可以开导我们做一些其余的对象出来，在往后的WEB开拓进程中，我想jQuery是必不行少的了，那么从每个方面操作和进修jQuery是我们进修的基本。

　　简朴先容一下这个殊效代码，时刻相关，用Css简朴写了一下样式，鼠标颠末灰色小方块时，方块会膨胀，而间隔该方块最近的方块会依照远近按巨细膨胀，我们来看一下实例结果：

<!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>鼠标颠末CSS小方块膨胀结果,基于jQuery编写 - Liehuo.Net</title> <script src="http://www.veryhuo.com/uploads/common/js/jquery-1.4.2.min.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> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!