如何实现这样一个漂浮窗口呢？

http://www.go2tv.net/read.php?tid-353.html  这个页面左下角那个浮动窗口是通过调用一个js文件实现的，但是奇怪的是，那个js文件我下下来看了，明明没有调用CallPage.aspx这个页面啊，那怎么来的呢？

解决方案 »

  1.   

    对，就是用层（DIV）
    把下面这个程序改改就行了。
    <HTML>
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE>任意移动放置菜单</TITLE>
    <script src=movemenu.js></script>
    </HEAD><BODY><div id="object1" style="position:absolute; visibility:show; left:350px; top:90px; z-index:2">
    <table border=1 cellpadding=5 bordercolor="#FF0000">
      <tr><td  bgcolor=#CCCCCC>
    <a href="#" onmousedown="setObject(1)" style="text-decoration: none">黑客任务实战系列</a>
    </td></tr>
    <tr><td bgcolor="#FFFF00"><CENTER>
    <a href="test1/EB311.htm" style="text-decoration: none">木马防护全攻略</a><br>
    <a href="test1/EB216.htm" style="text-decoration: none">Windows 全攻略</a><br>
    <a href="test1/F8440.htm" style="text-decoration: none">防毒防黑全攻略</a>
    </CENTER></td></tr></table></div>
    <div id="outlayer" style="position:absolute; visibility:show; left:-70px; top:-70px; z-index:2"></div></BODY></HTML>
    //以下是movemenu.js文件var checkf=0;  // 判断是否在窗口边框旗标function Init()   // 初始化各变量
    {h=".pixelLeft="; v=".pixelTop="; dS="";sD=".style";
     objectX="outlayer"; XX=-70; YY=-70; OB=11
    }function setObject(num) {objectX="object"+num; OB=num; XX=eval("xpos"+num); YY=eval("ypos"+num);}
    function releaseObject() {checkf=0; objectX="outlayer"; document.close();}
    function moveOB() {eval(dS+objectX+sD+h+Xpos); eval(dS+objectX+sD+v+Ypos);}function MoveHandler(e)   // 选单移动处理程序
    {
     Xpos = 1 ? event.clientX : e.pageX
     Ypos = 0 ? e.pageY : event.clientY if (checkf == 0)
        {diffX=XX-Xpos; diffY=YY-Ypos; checkf=1;
         if (objectX=="outlayer") checkf=0;
        }
     Xpos+=diffX; Ypos+=diffY;
     if (OB=="1") {xpos1=Xpos; ypos1=Ypos;}
     moveOB();   // 移动到目前鼠标位置
    }xpos1=355; ypos1=85; xpos11=-50; ypos11=-50; Xpos=5; Ypos=5;
    document.onmousemove = MoveHandler;
    document.ondblclick = releaseObject;
    onload=Init;
      

  2.   

    脚本说明:
    第一步:把如下代码加入<head>区域中
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    var isNS = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4));
    var _all = '';
    var _style = '';
    var wwidth, wheight;
    var ydir = '++';
    var xdir = '++';
    var id1, id2, id3;
    var x = 1;
    var y = 1;
    var x1, y1;
    if(!isNS) {
    _all='all.';
    _style='.style';
    }
    function getwindowsize() {
    clearTimeout(id1);
    clearTimeout(id2);
    clearTimeout(id3);
    if (isNS) {
    wwidth = window.innerWidth - 55;
    wheight = window.innerHeight - 50;
    } else {
    wwidth = document.body.clientWidth - 55;
    wheight = document.body.clientHeight - 50;
    }
    id3 = setTimeout('randomdir()', 20000);
    animate();
    }
    function randomdir() {
    if (Math.floor(Math.random()*2)) {
    (Math.floor(Math.random()*2)) ? xdir='--': xdir='++';
    } else {
    (Math.floor(Math.random()*2)) ? ydir='--': ydir='++';
    }
    id2 = setTimeout('randomdir()', 20000);
    }
    function animate() {
    eval('x'+xdir);
    eval('y'+ydir);
    if (isNS) {
    pic1.moveTo((x+pageXOffset),(y+pageYOffset))
    } else {
    pic1.pixelLeft = x+document.body.scrollLeft;
    pic1.pixelTop = y+document.body.scrollTop;
    }
    if (isNS) {
    if (pic1.top <= 5+pageYOffset) ydir = '++';
    if (pic1.top >= wheight+pageYOffset) ydir = '--';
    if (pic1.left >= wwidth+pageXOffset) xdir = '--';
    if (pic1.left <= 5+pageXOffset) xdir = '++';
    } else {
    if (pic1.pixelTop <= 5+document.body.scrollTop) ydir = '++';
    if (pic1.pixelTop >= wheight+document.body.scrollTop) ydir = '--';
    if (pic1.pixelLeft >= wwidth+document.body.scrollLeft) xdir = '--';
    if (pic1.pixelLeft <= 5+document.body.scrollLeft) xdir = '++';
    }
    id1 = setTimeout('animate()', 30);
    }
    //  End -->
    </script>第二步:在<body>区中加入如下代码
    <div id="pic1" style="position:absolute; visibility:visible; left:0px; top:0px; z-index:-1">
    <img src="image/114.gif" border="0">
    </div><script language="javascript">
    var pic1=eval('document.'+_all+'pic1'+_style);
    </script>
    第三步:把<body>区中内容改为:
    <body bgcolor="#fef4d9" OnLoad="getwindowsize()" OnResize="getwindowsize()">
    前台脚本
      

  3.   

    一个你说的漂浮窗口的代码piaofu.js:<!--
        var delta=0.15
        var collection;
        function floaters() {
            this.items    = [];
            this.addItem    = function(id,x,y,content)
                      {
                        document.write('<DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute;  width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'">'+content+'</DIV>');
                        
                        var newItem                = {};
                        newItem.object            = document.getElementById(id);
                        newItem.x                = x;
                        newItem.y                = y;                    this.items[this.items.length]        = newItem;
                      }
            this.play    = function()
                      {
                        collection                = this.items
                        setInterval('play()',10);
                      }
            }
            function play()
            {
                if(screen.width<=800)
                {
                    for(var i=0;i<collection.length;i++)
                    {
                        collection[i].object.style.display    = 'none';
                    }
                    return;
                }
                for(var i=0;i<collection.length;i++)
                {
                    var followObj        = collection[i].object;
                    var followObj_x        = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
                    var followObj_y        = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);                if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
                        var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
                        dx=(dx>0?1:-1)*Math.ceil(Math.abs(dx));
                        followObj.style.left=followObj.offsetLeft+dx;
                        }                if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
                        var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
                        dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy));
                        followObj.style.top=followObj.offsetTop+dy;
                        }
                    followObj.style.display    = '';
                }
            }    
        var theFloaters = new floaters();
        // 右2漂浮
        theFloaters.addItem('followDiv4','document.body.clientWidth-90',290,'<a  href="#"><img src=# border=0></a>');
        // 左2漂浮
        theFloaters.addItem('followDiv3',10,290,'<a href=# target=_blank><img src=# border=0></a>');
        // 左漂浮
        theFloaters.addItem('followDiv2',10,80,'<a href=# target=_blank><img src=# border=0></a><br><br>');
        // 右漂浮
        theFloaters.addItem('followDiv1','document.body.clientWidth-90',80,'<a href=# target=_blank><img src=# border=0></a><br><br>');
        theFloaters.play();-->
    在页面中引用此JS：
    <table>
      <tr>
        <td>
          <script language="javascript" src="js/piaofu.js"></script>
    ...
    ...
      

  4.   

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html  xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">
        <title>无标题页</title>
        <script type="text/javascript" >  
            var checkf=0;  // 判断是否在窗口边框旗标        function Init()   // 初始化各变量
            {h=".pixelLeft="; v=".pixelTop="; dS="";sD=".style";
             objectX="outlayer"; XX=-70; YY=-70; OB=11
            }        function setObject(num) {objectX="object"+num; OB=num; XX=eval("xpos"+num); YY=eval("ypos"+num);}
            function releaseObject() {checkf=0; objectX="outlayer"; document.close();}
            function moveOB() {eval(dS+objectX+sD+h+Xpos); eval(dS+objectX+sD+v+Ypos);}        function MoveHandler(e)   // 选单移动处理程序
            {
             Xpos = 1 ? event.clientX : e.pageX
             Ypos = 0 ? e.pageY : event.clientY         if (checkf == 0)
                {diffX=XX-Xpos; diffY=YY-Ypos; checkf=1;
                 if (objectX=="outlayer") checkf=0;
                }
             Xpos+=diffX; Ypos+=diffY;
             if (OB=="1") {xpos1=Xpos; ypos1=Ypos;}
             moveOB();   // 移动到目前鼠标位置
            }        xpos1=355; ypos1=85; xpos11=-50; ypos11=-50; Xpos=5; Ypos=5;
            document.onmousemove = MoveHandler;
            document.ondblclick = releaseObject;
            onload=Init;
        </script></head>
    <body id="form_Main">
        <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" runat="server" Style="z-index: 100; left: 24px; position: absolute;
                top: 16px" Text="Button" OnClick="Button1_Click" />
            <asp:TextBox ID="TextBox1" runat="server" Style="z-index: 101; left: 24px; position: absolute;
                top: 72px"></asp:TextBox>
            <asp:TextBox ID="TextBox2" runat="server" Style="z-index: 102; left: 24px; position: absolute;
                top: 128px"></asp:TextBox>
            <asp:TextBox ID="TextBox3" runat="server" Style="z-index: 104; left: 24px; position: absolute;
                top: 177px"></asp:TextBox>
        
        </div>
        
        <div id="object1" style="position:absolute; visibility:visible; left:350px; top:90px; z-index:2">
    <table border="1" cellpadding="5">
      <tr><td >
    <a href="#" onmousedown="setObject(1)" style="text-decoration: none">黑客任务实战系列</a>
    </td></tr>
    <tr><td ><center>
    <a href="#" style="text-decoration: none">木马防护全攻略</a><br />
    <a href="#" style="text-decoration: none">Windows 全攻略</a><br />
    <a href="#" style="text-decoration: none">防毒防黑全攻略</a>
    </center></td></tr></table></div>
    <div id="outlayer" style="position:absolute; visibility:visible; left:-70px; top:-70px; z-index:2"></div>    </form>
    </body>
    </html>
      

  5.   

    楼主把下面的代码复制到记事本中，然后保存为后缀名是html的文件，就可以看到效果了：<html>
    <head>
    <style type="text/css">#dhtmltooltip{
    position: absolute;
    left: -300px;
    width: 150px;
    border: 1px solid black;
    padding: 2px;
    background-color: lightyellow;
    visibility: hidden;
    z-index: 100;
    /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    }#dhtmlpointer{
    position:absolute;
    left: -300px;
    z-index: 101;
    visibility: hidden;
    }</style>
    </head><body>
    <script type="text/javascript">/***********************************************
    * Cool DHTML tooltip script II- &copy; Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/var offsetfromcursorX=12 //Customize x offset of tooltip
    var offsetfromcursorY=10 //Customize y offset of tooltipvar offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
    var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
    document.write('<img id="dhtmlpointer" src="/oa/images/arrow2.gif">') //write out pointer imagevar ie=document.all
    var ns6=document.getElementById && !document.all
    var enabletip=false
    if (ie||ns6)
    var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }function ddrivetip(thetext, thewidth, thecolor){
    if (ns6||ie){
    if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
    if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
    tipobj.innerHTML=thetext
    enabletip=true
    return false
    }
    }function positiontip(e){
    if (enabletip){
    var nondefaultpos=false
    var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
    //Find out how close the mouse is to the corner of the window
    var winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
    var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
    var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorYvar leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000//if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<tipobj.offsetWidth){
    //move the horizontal position of the menu to the left by it's width
    tipobj.style.left=curX-tipobj.offsetWidth+"px"
    nondefaultpos=true
    }
    else if (curX<leftedge)
    tipobj.style.left="5px"
    else{
    //position the horizontal position of the menu where the mouse is positioned
    tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px"
    pointerobj.style.left=curX+offsetfromcursorX+"px"
    }//same concept with the vertical position
    if (bottomedge<tipobj.offsetHeight){
    tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
    nondefaultpos=true
    }
    else{
    tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
    pointerobj.style.top=curY+offsetfromcursorY+"px"
    }
    tipobj.style.visibility="visible"
    if (!nondefaultpos)
    pointerobj.style.visibility="visible"
    else
    pointerobj.style.visibility="hidden"
    }
    }function hideddrivetip(){
    if (ns6||ie){
    enabletip=false
    tipobj.style.visibility="hidden"
    pointerobj.style.visibility="hidden"
    tipobj.style.left="-1000px"
    tipobj.style.backgroundColor=''
    tipobj.style.width=''
    }
    }document.onmousemove=positiontip</script><a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
     onMouseout="hideddrivetip()">Search Engine</a>
    </body>
    </html>原理也就是显示/隐藏一个div窗体并控制他的位置。
    另外如果要在不是onmouseover的事件中调用如"onclick"，就要在调用"ddrivetip"后再调用一次positiontip方法，如：onclick="ddrivetip('ok!');positiontip();"