當前位置:蘿卜系統下載站 > 技術開發教程 > 詳細頁面

跟隨鼠標的旋轉背景JS代碼如何寫

跟隨鼠標的旋轉背景JS代碼如何寫

更新時間:2023-06-21 文章作者:未知 信息來源:網絡 閱讀次數:

編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。

【實例名稱】

跟隨鼠標的旋轉背景

【實例描述】

鼠標在頁面中移動的時候,會一直有一個旋轉的橢圓點跟隨它。本例學習如何實現這種效果。

【實例代碼】

<SCRIPT LANGUAGE="JavaScript">     var Clrs = new Array(6);                         //隨機的背景顏色,保存在一個數組中     Clrs[0] = 'ff0000';     Clrs[1] = '00ff00';     Clrs[2] = '000aff';     Clrs[3] = 'ff00ff';     Clrs[4] = 'fff000';     Clrs[5] = 'fffff0';     var yBase = 200;     var xBase = 200;     var step;     var currStep = 0;     var Xpos = 1;                                      //橫坐標變量     var Ypos = 1;                                      //縱坐標變量     if (document.all) {         function MoveHandler()         {             Xpos = document.body.scrollLeft+event.x;   //設置橫坐標             Ypos = document.body.scrollTop+event.y;    //設置縱坐標         }         document.onmousemove = MoveHandler;            //綁定鼠標的移動事件     }     function Comet()     {         if (document.all) {         yBase = window.document.body.offsetHeight / 4;         xBase = window.document.body.offsetWidth / 4;         }         if (document.all) {         for ( i = 0 ; i < starsDiv.all.length ; i++ ) {    //循環設置每個div的顯示位置         step = 3;         starsDiv.all[i].style.top = Ypos + yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);         starsDiv.all[i].style.left = Xpos + xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);         for (ai = 0; ai < Clrs.length; ai++) {         var c=Math.round(Math.random()*[ai]);              //獲取隨機的一個顏色值         }         starsDiv.all[i].style.background = Clrs[c];        //動態設置div的背景色            }         }         currStep += step;         setTimeout("Comet()", 5);                          //設置定時器-實現旋轉效果     }     Comet(); </script>  

【運行效果】

運行效果

【難點剖析】

本例的重點是旋轉背景所在的層。跟隨鼠標的旋轉背景由多個不同顏色的點組成,其中每個點是一個層(div),每個層的顏色不同。這些層的位置通過鼠標的坐標獲取,此處要注意層的位置使用“position:relative”,表示相對坐標,其坐標的原始點是這些層的父級節點“starsDiv”。

【源碼下載】

本實例JS代碼下載

 


使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。

溫馨提示:喜歡本站的話,請收藏一下本站!

本類教程下載

系統下載排行

網站地圖xml | 網站地圖html
亚洲嫩草影院久久精品