支持IE,firefxo,chrome瀏覽器下鼠標(biāo)拖動(dòng)和拖拽的鼠標(biāo)指針特效
更新時(shí)間：2015年02月01日 16:47:24 投稿：mdxy-dxy
這篇文章主要分享一個(gè)鼠標(biāo)拖動(dòng)的層的實(shí)例，支持谷歌瀏覽器，firefox，ie等瀏覽器，需要的朋友可以測(cè)試下
核心代碼：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標(biāo)拖動(dòng)和拖拽的鼠標(biāo)指針特效</title>
<style>
#box{width:100px;height:100px;background:#966;position:absolute;left:100px;top:100px;cursor:pointer;}
</style>
</head>
<body>
<div id="box"></div>
<script>
var doc=document;
function getViewport(){
return {width:Math.max(document.documentElement.clientWidth,document.documentElement.scrollWidth),
height:Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight)
};
}
function compareNum(x,minNum,maxNum){
switch(true){
case x<minNum:x=minNum;break;
case x>maxNum:x=maxNum;break;
default:x;
}
return x;
}
box.style.left='100px'
box.style.top='100px'
box.onmousedown=function(e){
var e=e||window.event;
var maxL=getViewport().width-100,
maxT=getViewport().height-100;
this.startL=parseInt(this.style.left);
this.startT=parseInt(this.style.top);
//alert(e.clientX)
this.startX=e.clientX;
this.startY=e.clientY;
//alert(maxL+':'+maxT+':'+L+':'+T)
doc.onmousemove=function(e){
posXY(e,0,0,maxL,maxT);
};
doc.onmouseup=function(){
doc.onmousemove=null;
doc.onmouseup=null;
};
return false;
}
function posXY(e,minL,minT,maxL,maxT){
var e=e||window.event;
var x=box.startL-(box.startX-e.clientX);
var y=box.startT-(box.startY-e.clientY);
box.style.left=compareNum(x,minL,maxL)+'px'
box.style.top=compareNum(y,minT,maxT)+'px'
}
</script>
</body>
</html>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- jquery實(shí)現(xiàn)鼠標(biāo)拖拽滑動(dòng)效果來(lái)選擇數(shù)字的方法
- js實(shí)現(xiàn)使用鼠標(biāo)拖拽切換圖片的方法
- jsMind通過(guò)鼠標(biāo)拖拽的方式調(diào)整節(jié)點(diǎn)位置
- Java實(shí)現(xiàn)鼠標(biāo)拖拽移動(dòng)界面組件
- 鼠標(biāo)拖拽移動(dòng)子窗體的JS實(shí)現(xiàn)
- javascript簡(jiǎn)單拖拽實(shí)現(xiàn)代碼(鼠標(biāo)事件 mousedown mousemove mouseup)
- 基于jquery實(shí)現(xiàn)的鼠標(biāo)拖拽元素復(fù)制并寫(xiě)入效果
- 超酷的鼠標(biāo)拖拽翻頁(yè)(分頁(yè))效果實(shí)現(xiàn)javascript代碼
- AjaxUI：鼠標(biāo)拖拽
- js實(shí)現(xiàn)百度登錄框鼠標(biāo)拖拽效果
相關(guān)文章
js實(shí)現(xiàn)完美拖拽效果可拖動(dòng)層與回放拖動(dòng)規(guī)跡并顯示拖動(dòng)距離參數(shù)
一個(gè)完美的JS拖拽功能，實(shí)現(xiàn)層在網(wǎng)頁(yè)上任意拖動(dòng)，還可回放拖動(dòng)規(guī)跡，而且在拖動(dòng)時(shí)顯示拖動(dòng)距離參數(shù)等相關(guān)屬性。經(jīng)本人測(cè)試兼容性也是相當(dāng)不錯(cuò)的代碼，學(xué)習(xí)JavaScript的朋友，可以拿來(lái)研究研究，您可不要錯(cuò)過(guò)哦2012-12-12
一段js實(shí)現(xiàn)的QQ客服懸浮特效代碼，經(jīng)常用在網(wǎng)頁(yè)上顯示QQ客服在線(xiàn)信息，很實(shí)用的一段代碼2014-12-12
這篇文章主要介紹了js 左右懸浮對(duì)聯(lián)廣告代碼示例,需要的朋友可以參考下2014-12-12
js漂浮廣告實(shí)現(xiàn)代碼（合集經(jīng)典） 符合W3C
js漂浮廣告實(shí)現(xiàn)代碼，實(shí)際上就是一個(gè)來(lái)回滾動(dòng)的小圖片，碰到邊緣就返回，也是一種廣告形式，需要的朋友可以收藏下2012-04-04
始終在頁(yè)面底部的層js實(shí)現(xiàn)代碼
其實(shí)就是通過(guò)js將層始終定位在底部，多用于提示效果2012-11-11
基于jQuery實(shí)現(xiàn)下拉收縮(展開(kāi)與折疊)特效
jQuery下拉收縮特效，點(diǎn)擊下邊那個(gè)按鈕，就可實(shí)現(xiàn)下拉的效果，也叫展開(kāi)與折疊的效果，使用了jQuery插件，如何不習(xí)慣使用jquery插件的朋友當(dāng)然使用純Js也能實(shí)現(xiàn)哦，但是jquery現(xiàn)在這么流行，值得學(xué)習(xí)一下哦2012-12-12
支持IE,firefxo,chrome瀏覽器下鼠標(biāo)拖動(dòng)和拖拽的鼠標(biāo)指針特效
這篇文章主要分享一個(gè)鼠標(biāo)拖動(dòng)的層的實(shí)例，支持谷歌瀏覽器，firefox，ie等瀏覽器，需要的朋友可以測(cè)試下2015-02-02
xScrollStick 跟隨滾動(dòng)條漂浮的JS特效
這是一個(gè)跟隨滾動(dòng)條漂浮的JS特效，就是說(shuō)滾動(dòng)條滾動(dòng)而元素相對(duì)屏幕位置不變，需要的朋友可以測(cè)試下2012-04-04
JS實(shí)現(xiàn)用鍵盤(pán)控制DIV上下左右+放大縮小與變色
用鍵盤(pán)控制DIV，紅色方塊為鍵盤(pán)操作區(qū)域，您可以進(jìn)行如下操作:左右控制;背景變?yōu)榫G色;背景變?yōu)辄S色;背景變?yōu)樗{(lán)色放大或縮小2012-12-12
js 頁(yè)面左右兩側(cè)居中廣告代碼,里面的代碼還不錯(cuò)2012-03-03