支持IE,firefxo,chrome瀏覽器下鼠標拖動和拖拽的鼠標指針特效

更新時間：2015年02月01日 16:47:24 投稿：mdxy-dxy

這篇文章主要分享一個鼠標拖動的層的實例，支持谷歌瀏覽器，firefox，ie等瀏覽器，需要的朋友可以測試下

核心代碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標拖動和拖拽的鼠標指針特效</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>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠標拖動和拖拽的鼠標指針特效</title>
<style>
#box{width:100px;height:100px;background:#966;position:absolute;left:100px;top:100px;cursor:pointer;}
</style>
</head>
<body>
<div   class="mmipqwx"   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需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

js實現(xiàn)完美拖拽效果可拖動層與回放拖動規(guī)跡并顯示拖動距離參數(shù)
一個完美的JS拖拽功能，實現(xiàn)層在網(wǎng)頁上任意拖動，還可回放拖動規(guī)跡，而且在拖動時顯示拖動距離參數(shù)等相關屬性。經(jīng)本人測試兼容性也是相當不錯的代碼，學習JavaScript的朋友，可以拿來研究研究，您可不要錯過哦
2012-12-12
js QQ客服懸浮效果實現(xiàn)代碼
一段js實現(xiàn)的QQ客服懸浮特效代碼，經(jīng)常用在網(wǎng)頁上顯示QQ客服在線信息，很實用的一段代碼
2014-12-12
js 左右懸浮對聯(lián)廣告代碼示例
這篇文章主要介紹了js 左右懸浮對聯(lián)廣告代碼示例,需要的朋友可以參考下
2014-12-12
js漂浮廣告實現(xiàn)代碼（合集經(jīng)典）符合W3C
js漂浮廣告實現(xiàn)代碼，實際上就是一個來回滾動的小圖片，碰到邊緣就返回，也是一種廣告形式，需要的朋友可以收藏下
2012-04-04
始終在頁面底部的層js實現(xiàn)代碼
其實就是通過js將層始終定位在底部，多用于提示效果
2012-11-11
基于jQuery實現(xiàn)下拉收縮(展開與折疊)特效
jQuery下拉收縮特效，點擊下邊那個按鈕，就可實現(xiàn)下拉的效果，也叫展開與折疊的效果，使用了jQuery插件，如何不習慣使用jquery插件的朋友當然使用純Js也能實現(xiàn)哦，但是jquery現(xiàn)在這么流行，值得學習一下哦
2012-12-12
支持IE,firefxo,chrome瀏覽器下鼠標拖動和拖拽的鼠標指針特效
這篇文章主要分享一個鼠標拖動的層的實例，支持谷歌瀏覽器，firefox，ie等瀏覽器，需要的朋友可以測試下
2015-02-02
xScrollStick 跟隨滾動條漂浮的JS特效
這是一個跟隨滾動條漂浮的JS特效，就是說滾動條滾動而元素相對屏幕位置不變，需要的朋友可以測試下
2012-04-04
JS實現(xiàn)用鍵盤控制DIV上下左右+放大縮小與變色
用鍵盤控制DIV，紅色方塊為鍵盤操作區(qū)域，您可以進行如下操作:左右控制;背景變?yōu)榫G色;背景變?yōu)辄S色;背景變?yōu)樗{色放大或縮小
2012-12-12
js 頁面左右兩側(cè)居中廣告代碼
js 頁面左右兩側(cè)居中廣告代碼,里面的代碼還不錯
2012-03-03