首页 / JQUERY / Jquery 方块随着鼠标所在的区域而放大

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Jquery 方块随着鼠标所在的区域而放大，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含603字，纯文字阅读大概需要1分钟。

内容图文

效果如下图:

实现代码:运行后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> 
 
<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(''); 
}

//绑定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 方块随着鼠标所在的区域而放大所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/371118.html

来源：【匿名】

【上一篇】JQuery 动态扩展对象之另类视角【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

首页 / JQUERY / Jquery 方块随着鼠标所在的区域而放大

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

内容导读

内容图文

内容总结

内容备注

内容手机端

JQUERY - 相关标签

鼠标 - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程