比如我想加一個(gè)：<div id="google1"><div id="main1"><style type="text/css">body{background:#ccc;}.block{position:absolute;left:0;top:100px;border:1px solid #000;background:red;width:30px;height:30px;}#google{width:300px;height:300px;border:2px inset #fff;background:#fff;position:relative;overflow:hidden;}</style><div id="google"><div id="main" class="block"></div></div><script type="text/javascript">//<![CDATA[function Drag(title,body,range){var w=window,win=body||title,x,y,_left,_top,range=range||function(x){return x};title.style.cursor='move';title.onmousedown=function (e){e=e||event;x=e.clientX,y=e.clientY,_left=win.offsetLeft,_top=win.offsetTop;this.ondragstart=function(){return false};document.onmousemove=e_move;document.onmouseup=undrag};function e_move(e){e=e||event;var cl=range(_left+e.clientX-x,'x'),ct=range(_top+e.clientY-y,'y');win.style.left=cl+'px';win.style.top=ct+'px';w.getSelection?w.getSelection().removeAllRanges():document.selection.empty();};function undrag(){this.onmousemove=null};};function $(x){return typeof x=='string'?document.getElementById(x):x};var google=$("google"),main=$('main');var max={x:google.offsetWidth-main.offsetWidth-4,y:google.offsetHeight-main.offsetHeight-4}Drag(main,false,function(x,type){return Math.max(0,Math.min(max[type],x))})//]]></script>大家可以復(fù)制代碼測(cè)試下，以上是一個(gè)拖動(dòng)的效果，我想子啊一個(gè)頁(yè)面弄2個(gè)3個(gè)。更多的這樣的效果，大神幫下~~謝謝
1 回答
HUWWW
TA貢獻(xiàn)1874條經(jīng)驗(yàn) 獲得超12個(gè)贊
<!DOCTYPE HTML><html><head><meta charset=UTF-8><title>recursion</title><style type="text/css">* { margin: 0; padding: 0; border: 0;} body { background: #ccc;} .block { position: absolute; left: 0; top: 100px; border: 1px solid #000; background: red; width: 30px; height: 30px;} #google { width: 300px; height: 300px; border: 2px inset #fff; background: #fff; position: relative; overflow: hidden;}</style><script type="text/javascript"> function Drag (title, body, range) { var w = window, win = body || title, x, y, _left, _top, range = range || function (x) { return x; }; title.style.cursor = 'move'; title.onmousedown = function (e) { e = e || w.event; x = e.clientX, y = e.clientY, _left = win.offsetLeft, _top = win.offsetTop; this.ondragstart = function () { return false; }; document.onmousemove = e_move; document.onmouseup = undrag }; function e_move (e) { e = e || event; var cl = range (_left + e.clientX - x, 'x'), ct = range (_top + e.clientY - y, 'y'); win.style.left = cl + 'px'; win.style.top = ct + 'px'; w.getSelection ? w.getSelection ().removeAllRanges () : document.selection.empty (); } function undrag () { this.onmousemove = null } }; function $ (x) { return typeof x === 'string' ? document.getElementById (x) : x }; onload = function () { var max = { x : google.offsetWidth - main.offsetWidth - 4, y : google.offsetHeight - main.offsetHeight - 4 }; Drag (main, false, function (x, type) { return Math.max (0, Math.min (max[type], x)) }); Drag (main1, false, function (x, type) { return Math.max (0, Math.min (max[type], x)) }); };</script></head><body> <div id="google"> <div id="main" class="block"></div> </div> <div id="google1"> <div id="main1" class="block"></div> </div></body></html> |
添加回答
舉報(bào)
0/150
提交
取消