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

php中文网

发布时间：2016-05-16 18:26:15

1304人浏览过

来源于php中文网

原创

效果如下图:
Jquery 方块随着鼠标所在的区域而放大_jquery
实现代码:运行后f5刷新下

wordpress主题：格子商铺主题

这是易秀购主题网转载的一款原创来至web主题公园的一款wordpress cms主题，非常适合做图片展示，或婚纱摄影类wordpress主题，采用了大气的网格化无缝设计，使列表以格子铺的方式排列，鼠标悬停的可以出现文章的简介。网站上方可以书写自己的广告语，图片也是可以替换掉的，图片会随着鼠标的移动而轻移，并且在鼠标滚动的时候，下面的模块会直接遮盖这个区域，这款wordpress cms主题视觉效果

下载

<title>Jquery 方块随着鼠标所在的区域而放大 </title>
<script src="http://img.jb51.net/jslib/<a%20style=" color: text-decoration:underline title="jquery" href="https://www.php.cn/zt/15736.html" target="_blank">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>
<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+'">'); 
}

//绑定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><br><input onclick="runEx('runcode41201')" type="button" value="运行代码"><input onclick="doCopy('runcode41201')" type="button" value="复制代码"><input onclick="doSave(runcode41201)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]

jQuery 数据筛选与动态分页的事件绑定最佳实践

如何使用 jQuery 动态生成多行多列数据表格

如何在 iCN3D 中正确引入 jQuery 以支持 AJAX 功能

如何用 JavaScript 实现鼠标移出时自动收起悬浮层（滑动隐藏）

如何在 jQuery DataTables 中准确获取输入框所在行的索引