资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
Jquery 方块随着鼠标所在的区域而放大
效果如下图:
实现代码:运行后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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20src%3D%22http%3A%2F%2Fimg.glzy8.com%2Fjslib%2Fjquery%2Fjquery14.js%22%20type%3D%22text%2Fjavascript%22%3E%3C%2Fscript%3E"> <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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F%2F%E9%85%8D%E7%BD%AE%20%0D%0Avar%20m%3D5%3B%2F%2F%E6%9C%80%E5%A4%A7%E5%80%8D%E6%95%B0%20%0D%0Avar%20s%3D400%3B%2F%2F%E8%B7%9D%E4%B8%AD%E5%BF%83%E6%9C%80%E5%A4%A7%E8%B7%9D%E7%A6%BB%20%0D%0Avar%20count%3D20%3B%2F%2F%E4%B8%AA%E6%95%B0%20%0D%0A%0D%0A%2F%2FDock%E7%B1%BB%20%0D%0Afunction%20Dock()%7B%20%0D%0Athis.dockItems%3D%5B%5D%3B%20%0D%0Athis.addItem%3Dfunction(item)%7B%20%0D%0Athis.dockItems.push(%24(item))%3B%20%0D%0A%24(item).appendTo(%22.dock%22)%3B%20%0D%0A%7D%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E7%94%9F%E6%88%90Dock%E5%AF%B9%E8%B1%A1%E5%AE%9E%E4%BE%8B%20%0D%0Avar%20d%3Dnew%20Dock()%3B%20%0D%0A%0D%0A%2F%2F%E5%BE%AA%E7%8E%AF%E6%8F%92%E5%85%A5count%E4%B8%AAdockItem%20dom%E5%AF%B9%E8%B1%A1%20%0D%0Afor(var%20i%3D0%3Bi%3Ccount%3Bi%2B%2B)%7B%20%0D%0Ad.addItem('%3Cdiv%20class%3D%22'%2Bi%2B'%22%3E%3C%2Fdiv%3E')%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E7%BB%91%E5%AE%9AdockItem%E5%87%BD%E6%95%B0%20%0D%0A%24(%22.dock%20div%22).bind(%22mouseover%22%2Cfunction(event)%7B%20%0D%0Avar%20w%3D%24(this).width()%3B%20%0D%0Avar%20h%3D%24(this).height()%3B%20%0D%0Avar%20offset%3D%24(this).offset()%3B%20%0D%0AonmouseItemout(offset.top)%3B%20%0D%0A%7D)%3B%20%0D%0A%0D%0A%2F%2F%E5%A4%84%E7%90%86%E5%AD%90%E5%AF%B9%E8%B1%A1%E6%A0%B7%E5%BC%8F%20%0D%0Afunction%20onmouseItemout(top)%7B%20%0D%0Afor(var%20i%3D0%3Bi%3Cd.dockItems.length%3Bi%2B%2B)%7B%20%0D%0Avar%20c%3Dd.dockItems%5Bi%5D.attr(%22class%22)%3B%20%0D%0Avar%20of%3D%24(%22.%22%2Bc).offset()%3B%20%0D%0Ad1%3DMath.abs(of.top-top)%3B%20%0D%0Avar%20z%3DzoomD(m%2Cs%2Cd1)%3B%20%0D%0A%0D%0A%24(%22.%22%2Bc).css(%7Bwidth%3A8*z%2B%22px%22%2Cheight%3A8*z%2B%22px%22%7D)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%E8%AE%A1%E7%AE%97%E6%94%BE%E5%A4%A7%E5%80%8D%E6%95%B0%20%0D%0Afunction%20zoomD(m%2Cs%2Cd)%7B%20%0D%0Avar%20z%3Dm*(s-d)*(s-d)%2F(s*s%2B1)%3B%20%0D%0Areturn%20(z%3C1)%3F1%3Az%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程
