32、无边的信息导航窗

32、无边的信息导航窗

要完成此效果需要两个步骤

 

第一步:把如下代码加入到<head>区域中

 

<script>

var dragswitch=0

var nsx

var nsy

var nstemp

 

function drag_dropns(name){

temp=eval(name)

temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)

temp.onmousedown=gons

temp.onmousemove=dragns

temp.onmouseup=stopns

}

 

function gons(e){

temp.captureEvents(Event.MOUSEMOVE)

nsx=e.x

nsy=e.y

}

function dragns(e){

if (dragswitch==1){

temp.moveBy(e.x-nsx,e.y-nsy)

return false

}

}

 

function stopns(){

temp.releaseEvents(Event.MOUSEMOVE)

}

 

 

var dragapproved=false

 

function drag_dropie(){

if (dragapproved==true){

document.all.showimage.style.pixelLeft=tempx+event.clientX-iex

document.all.showimage.style.pixelTop=tempy+event.clientY-iey

return false

}

}

 

function initializedragie(){

iex=event.clientX

iey=event.clientY

tempx=showimage.style.pixelLeft

tempy=showimage.style.pixelTop

dragapproved=true

document.onmousemove=drag_dropie

}

 

 

if (document.all){

document.onmouseup=new Function("dragapproved=false")

}

 

 

function hidebox(){

if (document.all)

showimage.style.visibility="hidden"

else if (document.layers)

document.showimage.visibility="hide"

}

 

 

</script>

 

 

第二步:把如下代码加入到<body>区域中

 

<div id="showimage" style="position:absolute;width:250px;left:250;top:250">

 

<table border="0" width="250" bgcolor="#33ff33 cellspacing="0" cellpadding="2">

  <tr>

    <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0"

    height="36">

      <tr>

        <td onMousedown="initializedragie()" style="cursor:hand" width="100%"><ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;drag_dropns(showimage)" onMouseout="dragswitch=0"><center><font face="Verdana"

        color="#FFFFFF"><strong><small>Typhoon Start</small></strong></font></center></layer></ilayer></td>

        <td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="dot.gif" width="16"

        height="14" border=0></a></td>

      </tr>

      <tr>

        <td width="100%" bgcolor="#FFFFFF" style="padding:4px" colspan="2">

 

<small><strong><center><font face="Verdana">点“X”关闭小窗口</font></center></strong></small><small><font face="Verdana"></font></small>

 

</td>

      </tr>

    </table>

    </td>

  </tr>

</table>

</div>

 

 

Write a comment

Comments: 0