JS效果的步驟

2022-09-13 17:06:17 字數 1569 閱讀 4495

一、寫js效果的步驟

1.先實現布局 (xhtml+css2)

2.實現原理

(1)希望把某個元素移除你的視線:

a.  display:none;         顯示為無,不佔據空間

b.  visibility:hidden;     隱藏,佔據空間

c.  width \ height;

d.  透明度;

e.  left \ top;             定位

f.  設定z-index,讓其他的元素把它遮蓋住;

f.  拿乙個div蓋住它;

g.  足夠的margin負值;

h.  背景色和我們頁面整體的背景顏色保持一致,或者設定背景顏色是透明的;

3.了解js語法

(1)js中如何獲取元素:

a.  通過id名稱獲取元素:

document get element by id '#'   

document.getelementbyid('#') 

b.  ...

......  ( 目前先理解第一種 )

(2)變數(考慮到獲取元素的名稱太長,因此可以給它起了『代號』;這就是變數)

var li = document.getelementbyid('#');

var num = 123;

var name = 'leo';

(3)事件: 滑鼠事件、鍵盤事件、系統事件、表單事件、自定義事件......

a:   滑鼠事件有哪些:

onclick                      滑鼠點選

onmouseover     滑鼠移到某個東西

onmouseout      滑鼠移開

onmousedown          滑鼠按下

onmouseup              滑鼠抬起

onmousemove     就像是滑鼠撫摸一樣的事件

b:系統事件有哪些:

onload                     載入完之後執行......

window.onload

img.onload

body.onload

(4)如何新增事件:

新增事件:元素.onmouseover   ( 元素.事件)

(5)函式:可以理解為命令,做一件事..

1> function 名字()

a.  直接呼叫: 名字() ;

b.  事件呼叫: 元素.事件=函式名.  如(某個div.onclick=函式名;)

2>function (){}    匿名函式

呼叫:元素.事件 = function (){}

: 讓函式裡面的東西執行,採用呼叫方法

函式包括有名函式和匿名函式,有名函式可以讓**重用。

(6)測試:( 用alert進行測試,要保持一種隨時寫隨時測的習慣 )

alert(1); 帶乙個確定按鈕的警告框

alert('ok');     'ok' 字串

alert("ok");

注:單引號和雙引號都可以,要看公司標準

js的懸浮效果

js 部分 html html html html getsubstr username,10 html 愛好 userobj.hobby 簽名 userobj.recommend html html html divid html html css backgroundimage none els...

產生半透明效果的步驟

要製作半透明效果,必須先決定圖形所要顯示的透明度,例如透明度100 就是完全透明,透明度50 就是半透明。下面就來說明製作半透明效果的步驟 步驟一 取出點陣圖的各個畫素點,將各畫素點的rgb值乘以透明度百分比,然後將它放入到乙個記憶體陣列中。步驟二 取出背景圖與點陣圖重疊部分的畫素點,將各畫素點的r...

JS效果集合

位置與尺寸的計算 window scrolltop 滑鼠滾動高度 window height 視窗高度 window width 視窗寬度 outerheight 元素高度 outerwidth 元素寬度 offset top 元素相對於文件的位置 offset left 元素相對於文件的位置 po...