js經典案例代碼文檔介紹內容,js文件代碼示例

本文目錄一覽：

• 1、JS中的event 對象包含哪些東西 event，實例 詳解
• 2、有誰幫我解釋一段JavaScript代碼?
• 3、實例代碼詳解jquery.slides.js

JS中的event 對象包含哪些東西 event，實例 詳解

JS的event對象

Event屬性和方法：

1. type：事件的類型，如onlick中的click；

2. srcElement/target：事件源，就是發生事件的元素；

3. button：聲明被按下的滑鼠鍵，整數，1代表左鍵，2代表右鍵，4代表中鍵，如果按下多個鍵，酒把這些值加起來，所以3就代表左右鍵同時按下；（firefox中 0代表左鍵，1代表中間鍵，2代表右鍵）

4. clientX/clientY：事件發生的時候，滑鼠相對於瀏覽器窗口可視文檔區域的左上角的位置；(在DOM標準中，這兩個屬性值都不考慮文檔的滾動情況，也就是說，無論文檔滾動到哪裡，只要事件發生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件發生的坐標相對於文檔開頭的位置，要加上

document.body.scrollLeft和 document.body.scrollTop)

5. offsetX,offsetY/layerX,layerY：事件發生的時候，滑鼠相對於源元素左上角的位置；

6. x,y/pageX,pageY：檢索相對於父要素滑鼠水平坐標的整數；

7. altKey,ctrlKey,shiftKey等：返回一個布爾值；

8. keyCode：返回keydown何keyup事件發生的時候按鍵的代碼，以及keypress 事件的Unicode字元；(firefox2不支持 event.keycode，可以用 event.which替代 )

9. fromElement,toElement：前者是指代mouseover事件中滑鼠移動過的文檔元素，後者指代mouseout事件中滑鼠移動到的文檔元素；

10. cancelBubble：一個布爾屬性，把它設置為true的時候，將停止事件進一步起泡到包容層次的元素；(e.cancelBubble = true; 相當於 e.stopPropagation();)

11. returnValue：一個布爾屬性，設置為false的時候可以組織瀏覽器執行默認的事件動作；(e.returnValue = false; 相當於 e.preventDefault();)

12. attachEvent(),detachEvent()/addEventListener(),removeEventListener：為制定 DOM對象事件類型註冊多個事件處理函數的方法，它們有兩個參數，第一個是事件類型，第二個是事件處理函數。在

attachEvent()事件執行的時候，this關鍵字指向的是window對象，而不是發生事件的那個元素；

13. screenX、screenY：滑鼠指針相對於顯示器左上角的位置，如果你想打開新的窗口，這兩個屬性很重要；

一些說明：

1. event代表事件的狀態，例如觸發event對象的元素、滑鼠的位置及狀態、按下的鍵等等；

2. event對象只在事件發生的過程中才有效。

firefox里的event跟IE里的不同，IE里的是全局變數，隨時可用；firefox里的要用參數引導才能用，是運行時的臨時變數。

在IE/Opera中是window.event，在Firefox中是event；而事件的對象，在IE中是 window.event.srcElement，在Firefox中是event.target，Opera中兩者都可用。

3. 下面兩句效果相同

var evt = (evt) ? evt : ((window.event) ? window.event : null);

var evt = evt || window.event; // firefox下window.event為null, IE下event為null

4. IE中事件的起泡

IE中事件可以沿著包容層次一點點起泡到上層，也就是說，下層的DOM節點定義的事件處理函數，到了上層的節點如果還有和下層相同事件類型的事件處理函數，那麼上層的事件處理函數也會執行。例如， div 標籤包含了 a ，如果這兩個標籤都有onclick事件的處理函數，那麼執行的情況就是先執行標籤 a 的onclick事件處理函數，再執行 div 的事件處理函數。如果希望的事件處理函數執行完畢之後，不希望執行上層的 div 的onclick的事件處理函數了，那麼就把cancelBubble設置為true即可。

有誰幫我解釋一段JavaScript代碼?

Script language=”Javascript”

var x=50,y=60; //浮動圖片的初始位置（x,y）;

var xin=true,yin=true;

//xin表示向右移，yin表示向下移（其實用TurnRight,TurnDown表示這兩個變數更易明）

var step=1;

var delay=10; //延遲時間

function A(){

var L=T=0; //L＝0（left），T（top）＝0且都是常量。用來表示外面大框的左上角坐標（0，0）

var R=document.body.offsetWidth-document.getElementById(“YuId”).offsetWidth;

//「網頁可見域寬度」與 「YuId的可見寬度」差，即用R來表YuId可以左右方向移的區間為R（Right，變數名用Horizontal更好）。

var B=document.body.offsetHeight-document.getElementById(“YuId”).offsetHeight;

//「網頁可見域高度」與 「YuId的可見高度」差，即用B來表示YuId上下方向移動的區間為B（Bottom,變數名用vertical更好）。

document.getElementById(“YuId”).style.left=x;

document.getElementById(“YuId”).style.top=y; //這裡設YuId的坐標為（x,y）。

x=x+step*(xin?1:-1); //如果是向右移，x就加1，不然減1

if(xL){xin=true;x=L;}

//如果x小於0（即YuId移到了最左邊），就開始向右移（即xin＝true），x設為0

if(xR){xin=false;x=R;}

//如果x大於R（即YuId移到了最右邊），就開始向左移（即xin＝false），x設為可以移動區間的最大值（即R）

y=y+step*(yin?1:-1); //如果是向下移，y就加1，不然減1

if(yT){yin=true;y=T;}

//如果y小於0，（即YuId移到了最上邊），就開始向下移（即yin＝true），設為0

if(yB){yin=false;y=B;}

//如果y大於B，（即YuId移到了最下邊），就開始向上移（即yin＝false），設為可以移動區間的最大值（即B）

setTimeout(“A()”,delay); //延遲delay（10）毫秒後執行這個函數，這樣這個函數就可以無限循環下去。

}

/Script

實例代碼詳解jquery.slides.js

Slides

–

是一個簡單的，容易定製和風格化，的jQuery幻燈片插件。

Slides提供褪色或幻燈片過渡效果，圖像淡入淡出，圖像預壓，自動生成分頁，循環，自動播放的自定義等很多選項。

用Slides插件，你可以隨機播放幻燈片，設定那一套您想要開始幻燈片。它附帶充分的說明和示例。

廢話不多說了，直接給大家貼代碼了

$(function(){

$(“#slides”).slidesjs({

play:

{

active:

true,

//

[boolean]

Generate

the

play

and

stop

buttons.

//

You

cannot

use

your

own

buttons.

Sorry.

effect:

“slide”,

//

[string]

Can

be

either

“slide”

or

“fade”.

interval:

,

//

[number]

Time

spent

on

each

slide

in

milliseconds.

auto:

false,

//

[boolean]

Start

playing

the

slideshow

on

load.

swap:

true,

//

[boolean]

show/hide

stop

and

play

buttons

pauseOnHover:

false,

//

[boolean]

pause

a

playing

slideshow

on

hover

restartDelay:

//

[number]

restart

delay

on

inactive

slideshow

}

});

});

前台：

!doctype

html

head

style

/*

Prevents

slides

from

flashing

*/

#slides

{

display:none;

}

/style

script

src=””/script

script

src=”jquery.slides.min.js”/script

script

$(function(){

$(“#slides”).slidesjs({

width:

,

height:

});

});

/script

/head

body

div

id=”slides”

img

src=””

img

src=””

img

src=””

img

src=””

img

src=””

/div

/body

以上內容是關於jquery.slides.js的全部代碼，希望大家喜歡。