一個JavaScript的求愛小特效

字號：小 中 大

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

代碼如下:
    <!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 等屬性相對于
    其最接近的一個最有定位設(shè)置的父對象進行絕對定位。如果不存在這樣的父對象，則
    依據(jù) body 對象。而其層疊通過 z-index 屬性定義
    */
    div{
    position:absolute;
    }
    </style>
    <script type="text/javascript">
    //為什么要用onload，因為我在javascript代碼中初始化時鐘的div時，調(diào)試頁面發(fā)現(xiàn)沒有實現(xiàn)
    //后來發(fā)現(xiàn)原因，html的代碼是從前往后解析的。當(dāng)先解析到JavaScript代碼的時候，向body中
    //添加子節(jié)點的時候，找不到還未解析的body。所以應(yīng)該先解析body的啦。方法有兩種，一種就是下
    //的寫法，另一種也可以是在body標簽中添加onload方法。
    window.onload=function(){
    init();
    };
    //定義一個div數(shù)組，來存儲12個div
    //因為12個div位置上的關(guān)系，所以先確定一下圓點和半徑，以便計算div的位置
    var divs=[];
    var loveBaby=["我","愛","你","！","寶","貝","你","愛","我","嗎","勉","勉"]
    var CX=300;
    var CY=300;//----------------------網(wǎng)頁中的位置坐標沒有單位嗎？
    var R=150;
    var divCenterNode;//中心點的位置要進行控制，設(shè)置全局變量
    //定義一個初始化的函數(shù)
    function init(){
    //創(chuàng)建一個中心點位置的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個div組成一個禁止的時鐘，放在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元素進行重新定位
    /*
    實際上要想達到旋轉(zhuǎn)的效果，需要不斷的進行偏移，或者說
    進行重新定位，但是作循環(huán)，不能控制間隔多久啟動函數(shù)，那么
    這時候window對象提供了方法。
    */
    startClock();
    }
    //div的偏移量
    var offset=0;//度數(shù)偏移量
    //將位置的定位和轉(zhuǎn)動單獨定義一個函數(shù)
    function startClock(){
    for(var x=1;x<=12;x++){
    var div = divs[x-1];
    //每一個數(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;
    //間隔一定的時間，回調(diào)這個函數(shù)
    //經(jīng)過指定毫秒值后計算一個表達式。第一個參數(shù)是表達式，第二個參數(shù)是時間
    setTimeout(startClock,80);//window對象的方法
    }
    //定義這個時鐘隨著鼠標移動到不同的位置
    function clockMove(event){
    CX=event.clientX;//鼠標所在位置的x坐標
    CY=event.clientY;//鼠標所在位置的y坐標
    divCenterNode.style.left=(CX-50)+"px";
    divCenterNode.style.top=(CY-30)+"px";
    }
    </script>
    </head>
    <body onmousemove="clockMove(event)">
    
    </body >
    </html>
    本來是想做一個會轉(zhuǎn)動，會跑的時鐘顯示。所以代碼中的命名和時鐘有關(guān)，就不糾結(jié)了，親。初學(xué)javascript，感覺javascript很強大。

一個JavaScript的求愛小特效

字號： 小 中 大

字號：小中大