浮动窗口 代码 思路

<script>
function beginDrag(elementToDrag,event)
{
//计算元素原左上角与鼠标的距离
//moveHandler要这值
var delatX=event.clientX-parseInt(elementToDrag.style.left);
// 只水平移动,关闭垂直.
        // var delatY=event.clientY-parseInt(elementToDrag.style.top);
//注册响应mousemove和mousedown事件后的mouseup事件的处理程序
if(document.addEventListener) {  //2级DOM事件模型
//注册捕捉事件处理程序。
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent) { //IE5+ 的事件模型
//在IE事件模型中，我们不能捕捉事件，所以只有当事件起泡到这些处理程序时,
//它们才被触发. 假设不存在干涉元素, 处理了事件后它们就停止传播
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
}
else { //IE4事件模型
//IE4我们不能使用attachEvent方法,所以存储了以前赋予的处理
//程序后,直接赋予新的事件处理程序,这样可以恢复旧的处理程序.
//注意,这样依赖于事件起泡.
var oldmovehandler=document.onmousemove;
var olduphandler=document.onmouseup;
document.onmousemove=moveHandler;
document.onmouseup=upHandler;
}
//我们处理了该事件,不要再让其他元素看见.
if(event.stopPropagation) event.stopPropagation(); //2 级DOM
else event.cancelBubble=true; //IE
//下面禁止执行默认动作
if(event.preventDefault) event.preventDefault();  //2级DOM
else event.returnValue=false; //IE
/*  这是元素被拖动时捕捉mousemove事件的处理程序.
 *  它负责移动元素
 */function moveHandler(e)
{
if(!e)  e=window.event; //IE事件模型;
//把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
if(e.clientX-delatX<300 && e.clientX-delatX>0)   //e.clientX-startelement.style.left;
elementToDrag.style.left=(e.clientX-delatX)+"px"; 
// 只水平移动 elementToDrag.style.top=(e.clientY-delatY)+"px";
else if(e.clientX-delatX<0)  //滑动条不能小于0px
elementToDrag.style.left=0+"px";
else //滑动条不能大于300px
elementToDrag.style.left=300+"px";
//不要再让其他元素看到该事件.
if(e.stopPropagation) e.stopPropagation();  //2级DOM
else e.cancelBubble=true; //IE
}

/*  这是捕捉拖移结束最后发生的mouseup事件的处理程序.
 */
function upHandler(e)
{
if(!e) e=window.event; //IE事件模型.
//注销捕捉事件程序.
if(document.removeEventListener) { //DOM事件模型
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);
}
else if(document.detachEvent) { //IE5+ 事件模型
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
}
else  { //IE事件模型
document.onmouseup=olduphandler;
document.onousemove=oldmovehandler;
}
//不要再让事件进一步传播.
if(e.stopPropagation) e.stopPropagation();  //2级DOM
else e.cancelBubble=true; //IE
          } }</script>
<input type="image" src="slider.gif" width="29" height="10"
style="position:absolute;left:0px;top:0px;"
onmousedown="beginDrag(this,event);"><div style="position:absolute; left:100px;top:100px;
backgroud-color:white;border:solid back;">
<div style="backgroud-color:gray;border-bottom:dotted black;
padding:3px;font-family:sans-serif;font-weight:bold;"
onmousedown="beginDrag(this.parentNode,event);"
ondblclick="alert('改成你需要的.')">
Drag Me
</div>
<p>This is a test. Testing....</p>

解决方案 »

  1.   

    脚本说明:
    把如下代码加入<body>区域中
    <script>var dragapproved=false
    var minrestore=0
    var initialwidth,initialheight
    var ie5=document.all&&document.getElementById
    var ns6=document.getElementById&&!document.allfunction drag_drop(e){
    if (ie5&&dragapproved&&event.button==1){
    document.getElementById("dwindow").style.left=tempx+event.clientX-offsetx
    document.getElementById("dwindow").style.top=tempy+event.clientY-offsety
    }
    else if (ns6&&dragapproved){
    document.getElementById("dwindow").style.left=tempx+e.clientX-offsetx
    document.getElementById("dwindow").style.top=tempy+e.clientY-offsety
    }
    }function initializedrag(e){
    offsetx=ie5? event.clientX : e.clientX
    offsety=ie5? event.clientY : e.clientY
    if (ie5)
    document.getElementById("saver").style.display=''tempx=parseInt(document.getElementById("dwindow").style.left)
    tempy=parseInt(document.getElementById("dwindow").style.top)dragapproved=true
    document.onmousemove=drag_drop
    }function loadwindow(url,width,height){
    if (!ie5&&!ns6)
    window.open(url,"","width=width,height=height,scrollbars=1")
    else{
    document.getElementById("dwindow").style.display=''
    document.getElementById("dwindow").style.width=initialwidth=width
    document.getElementById("dwindow").style.height=initialheight=height
    document.getElementById("dwindow").style.left=30
    document.getElementById("dwindow").style.top=ns6? window.pageYOffset*1+30 : document.body.scrollTop*1+30
    document.getElementById("cframe").src=url
    }
    }function maximize(){
    if (minrestore==0){
    minrestore=1 //maximize window
    document.getElementById("maxname").setAttribute("src","restore.gif")
    document.getElementById("dwindow").style.width=ns6? window.innerWidth-20 : document.body.clientWidth
    document.getElementById("dwindow").style.height=ns6? window.innerHeight-20 : document.body.clientHeight
    }
    else{
    minrestore=0 //restore window
    document.getElementById("maxname").setAttribute("src","max.gif")
    document.getElementById("dwindow").style.width=initialwidth
    document.getElementById("dwindow").style.height=initialheight
    }
    document.getElementById("dwindow").style.left=ns6? window.pageXOffset : document.body.scrollLeft
    document.getElementById("dwindow").style.top=ns6? window.pageYOffset : document.body.scrollTop
    }function closeit(){
    document.getElementById("dwindow").style.display="none"
    }if (ie5||ns6)
    document.onmouseup=new Function("dragapproved=false;document.onmousemove=null;document.getElementById('saver').style.display='none'")</script>
    <div id="dwindow" style="position:absolute;background-color:navy;cursor:hand;left:0;top:0;display:none" onMousedown="initializedrag(event)" onSelectStart="return false">
    <div align="right"><img src="max.gif" id="maxname" onClick="maximize()"><img src="close.gif" onClick="closeit()"></div>
    <iframe id="cframe" src="" width=100% height=100%></iframe>
    <div id="saver" style="width:100%;height:100%;position:absolute;left:0;top:0;display:none"></div>
    </div><script>
    //Use below code to load DHTML Window as page loads 
    if (ns6) window.onload=new Function('loadwindow("http://www.jzzy.com",600,400)')
    else
    loadwindow("http://www.jzzy.com",600,400)
    </script>
    <a href="javascript:loadwindow('http://www.cctv.com',600,400)">中央电视台</a>
    <a href="javascript:loadwindow('http://www.163.com',600,400)">网易</a>