核心代碼:
<! doctype html> <html xmlns =“ http://www.w3.org/1999/xhtml”> <head> <head> <meta http-equiv =“ content-equiv =“ content-type” content =“ text/html; charse =“ text/html; charset = utf-8” /> <title>鼠標拖動和拖拽的鼠標指針特效</title> <樣式> #box {width:100px;高度:100px;背景:#966;位置:絕對;左:100px; top:100px; curesor:curesor:pointer;} </style> </style> </style> </head> <body> <body> <body> <body> <body> <body> <div id = {width:Math.max(document.documentElement.ClientWidth,document.documentElement.scrollwidth),身高:Math.max(document.documentElement.Client.ClientHeight,document.documentElement.documentElement.scrollheight)};} x <minnum:x = minnum; break;案例X> maxnum:x = maxnum; break;默認值:x; }返回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()。高度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; };返回false;}函數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,mint,maxt)+'px'} </script> </script> </script> </body> </hody> </html>[ctrl+a全選:如需引入外部js需刷新才能執行]