可适应XHTML的浮动层javascript代码

最新推荐文章于 2025-12-05 08:37:05 发布

转载最新推荐文章于 2025-12-05 08:37:05 发布 · 595 阅读

文章标签：

#xhtml #javascript #function #float #div #html

<!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>

     <title> Float Div Test </title>

</head>



<body><script type="text/javascript">

<!--

function Float(id, initX, initY, align){

       this.startX = (initX)? initX : 3;

       this.startY = (initY)? initY: 100;

       this.align = (align)? align: "left";

       this.x = this.startX;

       this.y = this.startY;



       //var isNs = (navigator.appName.indexOf("Netscape") != -1);

       this.div = document.getElementById(id);



       this.init = function() {

           this.div.style.top = this.startY + "px";

           if(this.align == "left")

               this.div.style.left = this.startX + "px" ;

           else

               this.div.style.right = this.startX + "px" ;

       }



       this.refresh = function(){

           this.y += (getRoot().scrollTop + this.startY - this.y)/8;

           this.div.style.top = this.y + "px" ;

       }

       this.floating = function(objName){

           setInterval(objName+'.refresh()', 10);

       }

       this.init();

}





function getRoot(){

      if(document.documentElement && document.body){

           return (document.documentElement.scrollTop > document.body.scrollTop) ? document.documentElement : document.body;

      }else if(document.documentElement){

           return document.documentElement;

      }else{

           return document.body;

      }

}

//-->

</script>

  

       <div id="test" style="position:absolute; width: 100px; height: 200px; background-color:#CCCCCC"></div>

       <div id="test2" style="position:absolute; width: 100px; height: 100px; background-color:#FFFF00"></div>



     <script type="text/javascript">

     <!--

           var o1 = new Float("test2",4, 300, "right");

           o1.floating('o1');

           var o2 = new Float("test");

           o2.floating('o2');





       for(var i = 0; i < 200; i ++){

           document.writeln("<div>-----------------------"+i+"</div>");



       }

     //-->

     </script>

</body>

</html>