本文做了一個(gè)JavaScript的求愛(ài)小特效，不僅能出現(xiàn)下面的圖的效果，還可以讓這個(gè)圖形跟隨著鼠標(biāo)轉(zhuǎn)動(dòng)哦,需要的朋友可以參考下
這里面做了一個(gè)JavaScript的求愛(ài)小特效，效果如下：
不僅能出現(xiàn)下面的圖的效果，還可以讓這個(gè)圖形跟隨著鼠標(biāo)轉(zhuǎn)動(dòng)哦，這里面只是一個(gè)簡(jiǎn)單的沒(méi)有修飾的小例子，基于這個(gè)例子可以讓求愛(ài)，更加好玩了。悶騷男們，是不是可以給你的小蘿莉發(fā)個(gè)這樣的網(wǎng)頁(yè)啊。給力的。
代碼如下:
<!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;
}
/*
將對(duì)象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對(duì)于
其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象，則
依據(jù) body 對(duì)象。而其層疊通過(guò) z-index 屬性定義
*/
div{
position:absolute;
}
</style>
<script type="text/javascript">
//為什么要用onload，因?yàn)槲以趈avascript代碼中初始化時(shí)鐘的div時(shí)，調(diào)試頁(yè)面發(fā)現(xiàn)沒(méi)有實(shí)現(xiàn)
//后來(lái)發(fā)現(xiàn)原因，html的代碼是從前往后解析的。當(dāng)先解析到JavaScript代碼的時(shí)候，向body中
//添加子節(jié)點(diǎn)的時(shí)候，找不到還未解析的body。所以應(yīng)該先解析body的啦。方法有兩種，一種就是下
//的寫(xiě)法，另一種也可以是在body標(biāo)簽中添加onload方法。
window.onload=function(){
init();
};
//定義一個(gè)div數(shù)組，來(lái)存儲(chǔ)12個(gè)div
//因?yàn)?2個(gè)div位置上的關(guān)系，所以先確定一下圓點(diǎn)和半徑，以便計(jì)算div的位置
var divs=[];
var loveBaby=["我","愛(ài)","你","！","寶","貝","你","愛(ài)","我","嗎","勉","勉"]
var CX=300;
var CY=300;//----------------------網(wǎng)頁(yè)中的位置坐標(biāo)沒(méi)有單位嗎？
var R=150;
var divCenterNode;//中心點(diǎn)的位置要進(jìn)行控制，設(shè)置全局變量
//定義一個(gè)初始化的函數(shù)
function init(){
//創(chuàng)建一個(gè)中心點(diǎn)位置的div(可以寫(xiě)上求愛(ài)對(duì)象哦)
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對(duì)象不需要和其它對(duì)象一樣去獲取，js庫(kù)中已經(jīng)封裝好了。
document.body.appendChild(divNode);
divs.push(divNode);
}
//每次啟動(dòng)startClock()對(duì)div元素進(jìn)行重新定位
/*
實(shí)際上要想達(dá)到旋轉(zhuǎn)的效果，需要不斷的進(jìn)行偏移，或者說(shuō)
進(jìn)行重新定位，但是作循環(huán)，不能控制間隔多久啟動(dòng)函數(shù)，那么
這時(shí)候window對(duì)象提供了方法。
*/
startClock();
}
//div的偏移量
var offset=0;//度數(shù)偏移量
//將位置的定位和轉(zhuǎn)動(dòng)單獨(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)過(guò)指定毫秒值后計(jì)算一個(gè)表達(dá)式。第一個(gè)參數(shù)是表達(dá)式，第二個(gè)參數(shù)是時(shí)間
setTimeout(startClock,80);//window對(duì)象的方法
}
//定義這個(gè)時(shí)鐘隨著鼠標(biāo)移動(dòng)到不同的位置
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ù)字按一圈顯示出來(lái)
1\創(chuàng)建12個(gè)DIV，分別賦值 1--12
2\給12個(gè)DIV定位，圍成一圈。
-->
</body >
</html>
本來(lái)是想做一個(gè)會(huì)轉(zhuǎn)動(dòng)，會(huì)跑的時(shí)鐘顯示。所以代碼中的命名和時(shí)鐘有關(guān)，就不糾結(jié)了，親。初學(xué)javascript，感覺(jué)javascript很強(qiáng)大。
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：