收藏本站 | Dm.zznj.com

首页 | 网页设计教程 | 酷站收藏 | 网页素材 | 特效代码 | 网站推广 | 辅助软件 | 免费资源 | 论坛 | 站内搜索

您的当前位置：网页特效>>>页面特效>>>无边的信息导航窗

无边的信息导航窗

特效说明：

把下列代码加到网页的<Body></Body>标签之间

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

第一步：把如下代码加入到<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="../wydh/images/close.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>

<html><head><Title>无边的信息导航窗 IK8网页特效演示</title></head>要完成此效果需要两个步骤

第一步：把如下代码加入到<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="../wydh/images/close.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></html>

IK8提供技术支持;本特效来自IK8.com

© CopyRight 2002-2005 ZZNJ.com, Inc. All Rights Reserved

Email: skyzznj@126.com