JS+CSS制作的DIV层最小化和随意拖拽排序功能丨芯晴网页特效丨CsrCode.CN <br> body<br> {<br> margin:10px;<br> }<br> #dragHelper<br> {<br> position:absolute;/*重要*/<br> border:2px dashed #000000;<br> background-color:#FFFFFF;<br> filter: alpha(opacity=30);<br> }<br> .normal<br> {<br> position:absolute;/*重要*/<br> width:300px;<br> #height:10px;<br> border:1px solid #666666;<br> background-color:#FFFFFF;<br> }<br> .over<br> {<br> position:absolute;/*重要*/<br> width:300px;<br> #height:10px;<br> border:1px solid #666666;<br> background-color:#f3f3f3;<br> filter: alpha(opacity=50);<br> }<br> .dragArea {<br> CURSOR: move;<br> }<br> 百度点此拖动- x 地址:http://www.baidu.com 关键字: 说明: 新浪........- x 地址:http://www.sina.com.cn 关键字: 说明: 网页特效........- x 地址:http://www.CsrCode.cn 关键字: 说明: 七彩影视........- x 地址:http://www.33567.cn 关键字: 说明: <br> <!--<br /> varragObjs = [];//ドラッグ可能な要素の配列<br /> varragObjTops = [];<br /> var ragHelper = document.getElementById("dragHelper");//ドラッグ時の位置ボックス <br /> varragObj = null;//オブジェクト要素をドラッグ <br /> varragObjPos = 0;<br /> varragObjOffset = {left:0,top:0};/ / ドラッグ オブジェクトの元の位置 <br /> var MouseInDragObjOffset = {x:0,y:0};// ドラッグ オブジェクト内のマウスの相対位置 <br /> var initHeight = 40;<br /> Number.prototype.NaN0=function() {return isNaN(this)?0:this;}<br /> function getPosition(e){//ドキュメントを基準とした要素の絶対位置を取得します<br /> var left = 0;<br /> var top = 0;<br /> while (e.offsetParent ){<br /> 左 += e.offsetLeft;<br /> トップ += e.offsetTop;<br /> e = e.offsetParent;<br /> }<br /> 左 += e.offsetLeft;<br /> トップ += e.offsetTop;<br /> return {x:left, y:top};<br /> }<br /> function MouseCoords(ev){//ドキュメントに対する相対的なマウスの絶対位置を取得します<br /> if(ev.pageX || ev.pageY){<br /> return {x:ev.pageX, y :ev.pageY};<br /> }<br /> return {<br /> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,<br /> y:ev.clientY + document.body.scrollTop - document.body.clientTop<br /> } ;<br /> }<br /> function getMouseOffset(target, ev){ // 要素に対するマウスの相対位置を取得します<br /> ev = ev || window.event;<br /> var elementPos = getPosition(target);<br /> var MousePos = MouseCoords( ev);<br /> return {x:mousePos.x - elementPos.x, y:mousePos.y - elementPos.y};<br /> }<br /> function MouseDown(ev){<br /> ev = ev window.event;<br /> target = ev .srcElement || ev.target;<br /> if(dragObj){<br /> return ;<br /> }<br /> varragArea = false;<br /> if(target.getAttribute("dragArea")){<br />ragArea = true;<br /> }<br /> while(!target .getAttribute("isDragObj")){<br /> if(target.tagName= ="HTML")<br /> Break;<br /> target = target.parentNode;<br /> }<br /> if(dragArea && target.getAttribute("isDragObj")){<br />ragObj = target;<br /> //書き換えの目的は、現在のオブジェクトを最後の上位層にすることです <br /> document.body.removeChild(dragObj);<br /> document.body.appendChild(dragObj);<br /> //元のオブジェクトの位置を記録しますドラッグオブジェクト<br />ragObjOffset.left =ragObj.style.left;<br />dragObjOffset.top=dragObj.style.top;<br />dragObj.className=dragObj.getAttribute("overClass");<br /> //ドラッグ中のマウスの相対位置object<br />mouseInDragObjOffset = getMouseOffset(dragObj, ev);<br />ragHelper.style.left =ragObj.style.left;<br />dragHelper.style.top=dragObj.style.top;<br />dragHelper.style.width=dragObj.offsetWidth;<br />dragHelper .style.height =ragObj.offsetHeight;<br />ragHelper.style.display = "";<br /> //alert(dragObj.offsetWidth+":"+dragObj.clientWidth);<br /> }<br /> }<br /> function MouseUp(ev){<br /> ev = ev || window.event;<br /> target = ev.srcElement || ev.target;<br /> if(ragObj){<br />ragObj.style.left =ragHelper.style.left;<br />ragObj.style.top =ragHelper.style.top ;<br /> ドラッグヘルパー.スタイル.ディスプレイ = "なし";<br /> ドラッグObj.className = ドラッグObj.getAttribute(" ドラッグクラス");<br /> ドラッグObj = null;<br /> }<br /> }<br /> 関数mouseMove(ev){<br /> ev = ev || ウィンドウ。イベント;<br /> if(dragObj) {<br /> var MousePos = MouseCoords(ev);<br />/*dragHelper.style.left =ragObjOffset.left;<br />dragHelper.style.top =ragObjOffset.top;<br />dragHelper.style.width=dragObj.offsetWidth;<br />dragHelper.style.height =ragObj.offsetHeight;<br />dragHelper.style. display = "";*/<br /> var windowWidth = document.body.offsetWidth;// ウィンドウの幅<br /> var windowHeight = document.body.offsetHeight;// ウィンドウの高さ<br /> // ドラッグ オブジェクトは現在の位置にある必要があります<br /> varragObjLeft = MousePos .x - MouseInDragObjOffset.x;<br /> varragObjTop = MousePos.y - MouseInDragObjOffset.y;<br /> //判定を追加します。そうでない場合、ドラッグ オブジェクトはブラウザ ウィンドウの外にドラッグされます <br /> if(dragObjLeft >= 0 &&ragObjLeft < ;= windowWidth -ragObj .offsetWidth - 20)<br>ragObj.style.left =ragObjLeft;<br> if(dragObjTop >=0)<br>ragObj.style.top =ragObjTop;<br> repaint();<br> }<br> }<br> //クローンオブジェクト <br> 関数 cloneObject( srcObj, destObj){<br> destObj = srcObj.cloneNode(true);<br> }<br> 関数 makeDraggable(element){<br> element.setAttribute("isDragObj", "y");<br> }<br> 関数 repaint() {<br> for(i =0; i<dragObjs.length; i++){<br /> if(dragObjs[i] ==ragObj){<br />ragObjPos = i;<br />ragObjs[i] =ragHelper;<br />break;<br /> }<br /> }<br /> if(dragOb jPos>0 && parseInt(dragObj.style.top)<parseInt(dragObjs[dragObjPos-1].style.top)){<br />ragObjs[dragObjPos] =ragObjs[dragObjPos-1];<br />dragObjs[dragObjPos- 1] = ドラッグヘルパー;<br /> ドラッグObjPos = ドラッグObjPos - 1;<br /> }<br /> if(dragObjPos<dragObjs.length-1 && parseInt(dragObj.style.top)>gt;parseInt(dragObjs[dragObjPos+1].style.top)){ <br /> ドラッグObjs[dragObj Pos] = ドラッグObjs[dragObjPos+1];<br /> ドラッグObjs[dragObjPos+1] = ドラッグヘルパー;<br /> ドラッグObjPos = ドラッグObjPos + 1;<br /> }<br /> ペイントDragObjs();<br /> ドラッグObjs[dragObjPos] =ドラッグオブジェクト <br /> }<br /> 関数PaintDragObjs(){<br /> var h = 40;<br /> for(i=0; i<dragObjs.length; i++){<br />ragObjs[i].style.left = 20;<br />ragObjs[i].style.top = h; <br /> h +=ragObjs[i ].offsetHeight + 10;<br /> }<br /> }<br /> function openClose(obj){<br /> obj.innerHTML = obj.innerHTML=="-"?"+":"-";<br /> while(obj .tagName != "TBODY" ){<br /> obj = obj.parentNode;<br /> }<br /> for(i=0; i<obj.childNodes.length; i++){<br /> if(obj.childNodes[i].nodeName == " #text"<br /> || obj .childNodes[i].getAttribute("bar")){ continue; }<br /> obj.childNodes[i].style.display=obj.childNodes[i].style.display=="" ?"none":"" ;<br /> }<br />paintDragObjs();<br /> }<br /> document.onmousedown = MouseDown;<br /> document.onmouseup = MouseUp;<br /> document.onmousemove = MouseMove;<br /> window.onload = function(){<br /> var objs = document.getElement sByTagName("Div ");<br /> for(i=0; i<objs.length; i++){<br /> var item = objs.item(i);<br /> //if(i==1)item. style.height=150;<br /> if (item.getAttribute("overClass")){<br /> makeDraggable(item);<br />ragObjs.push(item);<br /> item.style.left = 20;<br /> item.style.top = initHeight ;<br />ragObjTops.push(initHeight) ;<br />initHeight += item.offsetHeight + 10;<br /> }<br /> }<br /> //ragHelper = document.createElement('DIV');<br /> //ragHelper.style.cssText = 'position:absolute ;display:none;';<br /> // document.body.appendChild(dragHelper);<br /> }<br />//--><br> 今回のスペシャル効果 インターネット上の新清ウェブページの特殊効果丨CsrCode.Cnから収集。興味と学習の交流のみを目的としており、目的ではありません。商業目的での使用。