-
lianxi查看全部
-
DOM yu IE查看全部
-
[面板拖曳效果Part5] function fnMove(e,posX,posY){ var oDrag=document.getElementById('loginPanel'), l=e.clientX-posX, //e.clientX 是新的光標的座標 t=e.clientY-posY, winW=document.documentElement.clientWidth || document.body.clientWidth, winH=document.documentElement.clientHeight || document.body.clientHeight, maxW=winW-oDrag.offsetWidth-10, maxH=winH-oDrag.offsetHeight; if(l<0){ l=0; }else if(l>maxW){ l=maxW; } if(t<0){ t=10; }else if(t>maxH){ t=maxH; } oDrag.style.left=l+'px'; oDrag.style.top=t+'px'; }查看全部
-
[面板拖曳效果Part4] function fnDown(event){ // 這邊的event事件是光標點下去時候的事件對象 event = event || window.event; var oDrag=document.getElementById('loginPanel'), // 光標按下時光標和面板之間的距離 disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetTop; // 移動 document.onmousemove=function(event){ // 這邊的event事件是每移動的時候的事件對象 event = event || window.event; fnMove(event,disX,disY); } // 释放鼠标, mouseup, 當用戶釋放鼠標按鈕時觸發 document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } }查看全部
-
[面板拖曳效果Part3] 這裡對於上一節的代碼做Debug, 按照之前的思路, 會有面板跑出窗口的問題. 那是因為“對一個盒子/面板做定位的時候, 是以左上角回參照點”, 所以如果你說鼠標的位置到哪面板就到哪, 這樣基本上是有錯的. 因為面板是以左上角為基準點, 所以準確的來說是鼠標到哪, 面板的左上角基準點就到哪. *element.offsetLeft 返回元素的水平偏移位置. *有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。 對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari： * window.innerHeight - 瀏覽器窗口的內部高度 * window.innerWidth - 瀏覽器窗口的內部寬度 對於 Internet Explorer 8、7、6、5： * document.documentElement.clientHeight * document.documentElement.clientWidth 或者 * document.body.clientHeight * document.body.clientWidth查看全部
-
[面板拖曳效果Part2] *拖動這個動作一共要經歷幾步？三步 (告訴Browser在哪個地方按下可以進行拖動？) 在標題區域按下 —> 在頁面中移動 —> 釋放鼠標停止移動 *鼠標跟隨/拖曳效果, 原理是什麼？ 鼠標到哪, 被拖曳的東西就到哪. 鼠標位置可以從ClientX and ClientY 來得到 鼠標事件都是在瀏覽器窗口中的特定位置上發生的。這個位置信息保存在事件event的clientX和clientY屬性中。 所有瀏覽器都支持這兩個屬性，它們的值表示事件發生時鼠標指針在視口中的水平和垂直坐標。不包括頁面滾動的距離。 PS: 任何能夠跟著鼠標移動的東西 都要有一個前提：絕對定位 (in CSS) ex: left, top 根據座標來變化. *onmousemove事件： 當鼠標指針在元素內部移動時重複地觸發, 我們鼠標每動一下都會觸發onmousemove事件 window.onload=drag; // 頁面加載的時候, 加載drag函數 function drag(){ var oTitle=getByClass('login_logo_webqq','loginPanel')[0]; // 拖曳 oTitle.onmousedown=fnDown; // 鼠標按下是屬於onmousedown這個事件 } function fnDown() { document.onmousemove=function(event){ // 整個頁面的控制, 以document表示. 所以這邊才用document // 移動就是用onmousemove事件來表示 event = event || window.event; // 鼠標到哪, 面板就到哪（？） oDrag.style.left = event.clientX+"px"; oDrag.style.top = event.clientY+"px"; } } 注意: 這個程式碼是有bug的喔！查看全部
-
[面板拖曳效果Part1] document.getElementsByClassName(); IE10以前都不支持, 所以最好還是用一個函數封裝出一個可以抓ClassName的函數 function getByClass(clsName, parent){ // 必要的參數寫在前面, parent是非必要的所以寫在後面 var oParent=parent?document.getElementById(parent):document, eles=[], // 因為class名可以重複, 所以抓出來後就會是一個陣列 // 把父元素下所有的元素取出來, 一個一個判斷和我們要的一不一樣 elements=oParent.getElementsByTagName('*'); for(var i=0,l=elements.length;i<l;i++){ if(elements[i].className==clsName){ eles.push(elements[i]); // push()方法是Add a new item to an array } } return eles; }查看全部
-
[不同的事件類型] *鼠標事件： 1. click 事件 2. mouseover 事件 3. mouseout 事件 等等….. *鍵盤事件：查看全部
-
注意书写规范，注意{}的细节查看全部
-
鼠标事件都是在浏览器窗口中的特定位置上发生的。 这个位置信息保存在事件的clientX和clientY属性中。 所有的浏览器都支持查看全部
-
[IE中的事件對象--Part2] 例： getEvent:function(event){ return event?event:window.event; }, getType:function(event){ return event.type; }, getElement:function(event){ return event.target || event.srcElement; }, preventDefault:function(event){ // 注意在判斷的時候, 因為preventDefault()他們是方法, 不能判斷 // 所以要用屬性的方式來判斷,也就是把括號去掉event.preventDefault if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble=true; } }查看全部
-
[IE中的事件對象--Part1] （IE中事件對象為window.event) event=event || window.event 1. type屬性 用於獲取事件類型 2. srcElement屬性 用於獲取事件目標 event.target || event.srcElement 3. cancelBubble屬性 用於阻止事件冒泡。( cancelBubble = true阻止 false不阻止 ) 4. returnValue屬性 阻止事件的默認行為。( returnValue = false阻止 ) 注意：非IE是event，IE8以下是window.event查看全部
-
事件处理查看全部
-
事件冒泡例子--在div的box上和div中的btn3上各自增加一个事件，点击btn3时，先出发btn3上的事件，随后自动出发div的box上的事件查看全部
-
事件对象event--DOM中的事件对象 //获取调用showMes方法的事件的类型 function showMes(event){ alert(event.type); } target 获取事件的目标-事件发生在哪个节点元素上--event.target.nodename stopPropagation()方法--阻止事件冒泡查看全部
举报
0/150
提交
取消