-
遮罩防止鼠標(biāo)選中事件：onslectstart="return false"；
查看全部 -
z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
查看全部 -
client/scroll查看全部
-
窗口改變大小處理 window.onresize =function(){ autoCenter(g('dialog')); fillToBody( g('mask') ); }查看全部
-
拖動(dòng)范圍限定： // 鼠標(biāo)事件2 document.onmousemove = function( e ){ var e = e || window.event; var mouseX = e.pageX; //鼠標(biāo)當(dāng)前的位置 var mouseY = e.pageY; var moveX = 0; // 浮層元素的新位置 var moveY = 0; if( isDraging === true ){ moveX = mouseX - mouseOffsetX; moveY = mouseY - mouseOffsetY; //范圍限定moveX > 0 并且 moveX < (頁(yè)面最大寬度 - 浮層的寬度) //moveY > 0 并且 movey < (頁(yè)面最大高度 - 浮層的高度) var pageWidth = document.documentElement.clientWidth ; var pageHeight = document.documentElement.clientHeight ; var dialogWidth = g('dialog').offsetWidth; var dialogHeight = g('dialog').offsetHeight; var maxX = pageWidth - pageHeight; var maxY = pageHeight- dialogHeight; moveX = Math.min( maxX , Math.max(0,moveX) ); moveY = Math.min( maxY , Math.max(0,moveY) ); g('dialog').style.left = moveX + 'px'; g('dialog').style.top = moveY + 'px'; } }查看全部
-
原生js獲取鼠標(biāo)坐標(biāo)方法全面講解： clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y http://www.bbs0101.com/archives/124.html查看全部
-
var mouseOffsetX = 0; // 偏移 var mouseOffsetY = 0; var isDraging = false; // 是否可拖拽的標(biāo)記 （1）在標(biāo)題欄上按下。鼠標(biāo)在標(biāo)題欄上按下時(shí)，要計(jì)算鼠標(biāo)相對(duì)拖拽元素的左上角的坐標(biāo)，并且標(biāo)記元素為可拖動(dòng)。 g('dialogTitle').addEventListener('mousedown',function(e){ var e = e || window.event; mouseOffsetX = e.pageX - g('dialog').offsetLeft; mouseOffsetY = e.pageY - g('dialog').offsetTop; isDraging = true; }) （2）開(kāi)始移動(dòng)。鼠標(biāo)開(kāi)始移動(dòng)，要檢測(cè)登錄浮層是否可標(biāo)記為移動(dòng)，如果是，則更新元素的位置到當(dāng)前鼠標(biāo)的位置(注意：要減去第一步中獲得的偏移) document.onmousemove = function( e ){ var e = e || window.event; var mouseX = e.pageX; // 鼠標(biāo)當(dāng)前的位置 var mouseY = e.pageY; var moveX = 0; // 浮層元素的新位置 var moveY = 0; if( isDraging === true ){ moveX = mouseX - mouseOffsetX moveY = mouseY - mouseOffsetY; g('dialog').style.left = moveX + 'px'; g('dialog').style.top = moveY + 'px'; } } （3）放開(kāi)。鼠標(biāo)松開(kāi)的時(shí)候，標(biāo)記元素為不可拖動(dòng)狀態(tài)即可。 document.onmouseup = function(){ isDraging = false; }查看全部
-
//自動(dòng)居中 - 浮層 function autoCenter(el) { // 獲得瀏覽器可視區(qū)域?qū)捀? var bodyW = document.documentElement.clientWidth; var bodyH = document.documentElement.clientHeight; // 獲得元素實(shí)際寬高 var elW = el.offsetWidth; var elH = el.offsetHeight; el.style.left = (bodyW - elW) / 2 + "px"; el.style.top = (bodyW - elH) / 2 + "px"; } // 自動(dòng)全屏 - 遮罩 function fillToBody(el) { el.style.width = document.documentElement.clientWidth + 'px'; el.style.height = document.documentElement.clientHeight + 'px'; }查看全部
-
禁止鼠標(biāo)右鍵：oncontextmenu="return false"； 禁止選擇：onselectstart="return false"； 禁止拖放：ondragstart="return false"； 禁止拷貝：oncopy=document.selection.empty() 。 禁止復(fù)制：oncopy = "return false"； 禁止保存：<noscript><iframe src="*.htm"></iframe></noscript>，放在head里面。 禁止粘貼：<input type=text onpaste="return false"> 禁止剪貼：oncut = "return false"； 關(guān)閉輸入法：<input > opacity: 0.4; filter: Alpha(opacity=40); 設(shè)置透明度，和兼容IE設(shè)置透明度查看全部
-
onselectstart="return false"防止被鼠標(biāo)選中查看全部
-
鼠標(biāo)拖拽查看全部
-
HTML及CSS結(jié)構(gòu)查看全部
-
原理： 1.鼠標(biāo)在標(biāo)題欄上按下時(shí)，標(biāo)記為可以拖動(dòng)。 2.鼠標(biāo)移動(dòng)時(shí)，判斷檢測(cè)圖層是否可以拖動(dòng)，是的話(huà)讓圖層跟隨鼠標(biāo)進(jìn)行移動(dòng) 3.鼠標(biāo)松開(kāi)時(shí)，標(biāo)記元素不可拖動(dòng)查看全部
-
html結(jié)構(gòu)查看全部
舉報(bào)
0/150
提交
取消