Jquery 方塊隨著鼠標所在的區域而放大

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> Jquery 方塊隨著鼠標所在的區域而放大

編輯：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> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.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>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:jQuery 練習[二] jquery 對象選擇器(1)
下一頁:JQuery Easyui Tree的oncheck事件實現代碼

JQuery特效代碼

JQuery插件Style定制化方法的分析與比較: 1前言最近因為項目的需要，使用了一個JQuery插件。把插件下下來後，很快我就發現，很多默認的插件
jQuery 常見學習網站與參考書: jQuery作為一個框架，功能挺強大的，除了官方網站 http://jquery.com/ ，還有一
Ext.get() 和 Ext.query()組合使用實現最靈活的取元素方式: 前面寫的get()和query()我都省略參數了，先看看文檔中的函數原型： Ext.get( Mix

DIV CSS 佈局教程網

相關文章