JS實現網頁飄窗

1.在html中設置一個飄窗的div，div中可以添加圖片，添加文字通過css展現在飄窗中；

<!--飄窗-->
<div id="roll">
      <img src="img/roll.jpg">
</div>

2.在css中對飄窗設置長寬，用postion進行定位；postion：fixed可以實現絕對定位，使圖片始終處於可視窗口內

#roll {
    height: 200px;
    width: 200px;
    position: fixed; /*fixed實現絕對定位*/
    cursor:pointer;
}
#roll img{
    height: 200px;
    width: 200px;
    
}

3.在JS中實現讓飄窗實現漂浮的過程：

（1）獲取飄窗id；

（2）設置飄窗速度，變化幅度，初始位置；

（3）使用documentElement獲取可視化窗口的長寬，用可視化窗口的長寬分別減去飄窗的長寬即可得到飄窗可以移動的范圍；

（4）令變化幅度的初始值為1；用statusX ？-1 ：1（statusY ？-1 ：1）來判斷飄窗是否到達可視化窗口的左右（上下）邊界，用this指針來完成圖片每一次移動所改變的位置；

（5）最后用onmouseover和onmouseout來實現鼠標移動到飄窗上停止移動和移開鼠標飄窗繼續運動；

4.JS具體實現代碼

var ggRoll={                                     //創建對象直接量
  roll:document.getElementById("roll"),          //獲取id屬性為roll的對象
  speed:20,                                      //飄動速度，即為定時器函數多長時間執行一次
  statusX:1,                                     //規定每執行一次函數，left屬性值變化的幅度
  statusY:1,                                     //規定每執行一次函數，top屬性值變化的幅度
  x:100,                                         //規定初始狀態下left屬性的值
  y:300,                                         //規定初始狀態下top屬性的值
  //差值用來測算left屬性值的極限
  winW:document.documentElement.clientWidth-document.getElementById("roll").offsetWidth, 
  //差值用來測算top屬性值的極限
  winH:document.documentElement.clientHeight-document.getElementById("roll").offsetHeight, 
  //聲明函數
  Go: function () {                                                               
       //設置div的left屬性值
       this.roll.style.left = this.x + 'px';                                      
       //設置div的top屬性值
       this.roll.style.top = this.y + 'px';                                       
       //如果statusX=1則每次減少1px,否則減少1px
       this.x = this.x + (this.statusX ? -1 : 1)                                  
       //如果left屬性值小於0，也就是div要超出左邊界了，就將statusX設置為0
       if (this.x < 0) { this.statusX = 0 }                                       
       //如果top屬性值大於winW，也就是div要超出右邊界了，就將statusX設置為1
       if (this.x > this.winW) { this.statusX = 1 }                               
 
       this.y = this.y + (this.statusY ? -1 : 1)
       if (this.y < 0) { this.statusY = 0 }
       if (this.y > this.winH) { this.statusY = 1 }
 
     }
  };
 
var interval=setInterval("ggRoll.Go()",ggRoll.speed);
ggRoll.roll.οnmοuseοver=function(){clearInterval(interval)};                     //onmouseover屬性：鼠標移動到元素上時觸發
ggRoll.roll.οnmοuseοut=function(){interval=setInterval("ggRoll.Go()",ggRoll.speed)};//onmouseout屬性:鼠標離開元素時觸發