快捷導(dǎo)航

一個(gè)JavaScript的求愛小特效

更新時(shí)間：2014年05月09日 10:26:25 作者：

本文做了一個(gè)JavaScript的求愛小特效，不僅能出現(xiàn)下面的圖的效果，還可以讓這個(gè)圖形跟隨著鼠標(biāo)轉(zhuǎn)動哦,需要的朋友可以參考下

這里面做了一個(gè)JavaScript的求愛小特效，效果如下：

不僅能出現(xiàn)下面的圖的效果，還可以讓這個(gè)圖形跟隨著鼠標(biāo)轉(zhuǎn)動哦，這里面只是一個(gè)簡單的沒有修飾的小例子，基于這個(gè)例子可以讓求愛，更加好玩了。悶騷男們，是不是可以給你的小蘿莉發(fā)個(gè)這樣的網(wǎng)頁啊。給力的。

貼上code吧：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Insert title here</title> 
<style type="text/css"> 
body{ 
border:1px red solid; 
width:1000px; 
height:1000px; 
margin：0px auto; 
padding:0px; 
color:green; 
} 
/* 
將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對于 
其最接近的一個(gè)最有定位設(shè)置的父對象進(jìn)行絕對定位。如果不存在這樣的父對象，則 
依據(jù) body 對象。而其層疊通過 z-index 屬性定義 
*/ 
div{ 
position:absolute; 
} 
</style> 
<script type="text/javascript"> 
//為什么要用onload，因?yàn)槲以趈avascript代碼中初始化時(shí)鐘的div時(shí)，調(diào)試頁面發(fā)現(xiàn)沒有實(shí)現(xiàn) 
//后來發(fā)現(xiàn)原因，html的代碼是從前往后解析的。當(dāng)先解析到JavaScript代碼的時(shí)候，向body中 
//添加子節(jié)點(diǎn)的時(shí)候，找不到還未解析的body。所以應(yīng)該先解析body的啦。方法有兩種，一種就是下 
//的寫法，另一種也可以是在body標(biāo)簽中添加onload方法。 
window.onload=function(){ 
init(); 
}; 
//定義一個(gè)div數(shù)組，來存儲12個(gè)div 
//因?yàn)?2個(gè)div位置上的關(guān)系，所以先確定一下圓點(diǎn)和半徑，以便計(jì)算div的位置 
var divs=[]; 
var loveBaby=["我","愛","你","！","寶","貝","你","愛","我","嗎","勉","勉"] 
var CX=300; 
var CY=300;//----------------------網(wǎng)頁中的位置坐標(biāo)沒有單位嗎？ 
var R=150; 
var divCenterNode;//中心點(diǎn)的位置要進(jìn)行控制，設(shè)置全局變量 
//定義一個(gè)初始化的函數(shù) 
function init(){ 
//創(chuàng)建一個(gè)中心點(diǎn)位置的div(可以寫上求愛對象哦) 
divCenterNode=document.createElement("div"); 
divCenterNode.innerHTML="婷婷，嫁給我吧！"; 
document.body.appendChild(divCenterNode); 
divCenterNode.style.left=(CX-50)+"px"; 
divCenterNode.style.top=(CY-30)+"px"; 
//創(chuàng)建12個(gè)div組成一個(gè)禁止的時(shí)鐘，放在body中 
for(var x=1;x<=12;x++){ 
//創(chuàng)建div 
var divNode=document.createElement("div"); 
divNode.innerHTML=loveBaby[x-1]; 
//body對象不需要和其它對象一樣去獲取，js庫中已經(jīng)封裝好了。 
document.body.appendChild(divNode); 
divs.push(divNode); 
} 
//每次啟動startClock()對div元素進(jìn)行重新定位 
/* 
實(shí)際上要想達(dá)到旋轉(zhuǎn)的效果，需要不斷的進(jìn)行偏移，或者說 
進(jìn)行重新定位，但是作循環(huán)，不能控制間隔多久啟動函數(shù)，那么 
這時(shí)候window對象提供了方法。 
*/ 
startClock(); 

} 
//div的偏移量 
var offset=0;//度數(shù)偏移量 
//將位置的定位和轉(zhuǎn)動單獨(dú)定義一個(gè)函數(shù) 
function startClock(){ 
for(var x=1;x<=12;x++){ 
var div = divs[x-1]; 
//每一個(gè)數(shù)字的度數(shù) 
var dushu=30*x+offset; 
// 角度值 * Math.PI /180 = 弧度值 
var divLeft = CX+R*Math.sin(dushu*Math.PI/180); 
div.style.left=divLeft+"px"; 
var divTop = CY-R*Math.cos(dushu*Math.PI/180); 
div.style.top=divTop+"px"; 
} 
offset+=50; 
//間隔一定的時(shí)間，回調(diào)這個(gè)函數(shù) 
//經(jīng)過指定毫秒值后計(jì)算一個(gè)表達(dá)式。第一個(gè)參數(shù)是表達(dá)式，第二個(gè)參數(shù)是時(shí)間 
setTimeout(startClock,80);//window對象的方法 
} 
//定義這個(gè)時(shí)鐘隨著鼠標(biāo)移動到不同的位置 
function clockMove(event){ 
CX=event.clientX;//鼠標(biāo)所在位置的x坐標(biāo) 
CY=event.clientY;//鼠標(biāo)所在位置的y坐標(biāo) 
divCenterNode.style.left=(CX-50)+"px"; 
divCenterNode.style.top=(CY-30)+"px"; 

} 
</script> 
</head> 
<body onmousemove="clockMove(event)"> 
<!-- 
一、把12個(gè)數(shù)字按一圈顯示出來 
1\創(chuàng)建12個(gè)DIV，分別賦值 1--12 
2\給12個(gè)DIV定位，圍成一圈。 
--> 
</body > 
</html> 