怎么实现滑入滑出效果的弹出窗口

解决思路：
   窗口滑入时的速度应该是渐慢，而滑出时的速度应该是渐快，速度渐变的原理可以参考本部分第三章的问题8(《怎么做随滚动条滚动而滚动的层》)
具体步骤：

1.父窗口代码：

<script>
//movwin滑动窗口句柄，posX，窗口在X轴上的初始值
//targetX，窗口的停留位置，step，窗口的移动步长
var movwin,posX,targetX,step           
function newwin(url,w,h){
//打开宽为w，高为h的窗口
 movwin=window.open(url,"demo","width="+w+",height="+h)   
posX=-w                      //窗口在X轴上的初始值，在屏幕左边界之外
 targetX=(screen.width-w)/2 //窗口的停留位置，在屏幕中央
 step=(targetX-posX)/10     //窗口滑动的步长
//将窗口移动到X轴上的屏幕之外，Y轴上的中央
 movwin.moveTo(posX,(screen.height-h)/2)  
moveit()            //调用滑动窗口的函数
}
function moveit(){
//如果弹出窗口未关闭且窗口未滑动至目标位置
 if(!movwin.closed&&posX<targetX){ 
   movwin.moveBy(step,0)        //使窗口在X轴上移动step象素
   posX+=step                      //更新窗口在X轴上的坐标值
   setTimeout("moveit()",10)    //10毫秒后再次执行moveit()函数
//重新计算步长值，以产生速度渐变的效果(越来越慢)
   step=(targetX-posX)/10
}
}
</script>
<button onClick="newwin(’demo.htm’,100,100)">打开滑动窗口</button>

2.子窗口(demo.htm)代码：

<script>
var step=0.1                       //窗口移动的步长值
var posX                           
function closeit(){
//窗口当前在X轴上的坐标值
posX=(screen.width-document.body.offsetWidth)/2 
//如果窗口未滑动至屏幕之外，继续执行下面的代码
if(step+posX<screen.width) { 
  self.moveBy(step,0) //使窗口在X轴上移动step象素
  step*=1.15           //重新计算步长值，以产生速度渐变效果(越来越快)
  setTimeout("closeit()",10)  //10毫秒后再次执行closeit()函数
}
else self.close()          //如果窗口已经滑动至屏幕右边界，关闭窗口
}
</script>
<button onClick="closeit()">关闭滑动窗口</button>

3.滑入滑出窗口演示效果(在一个页中实现)：

<script>
var movwin,targetX,step
function newwin(w,h){
 movwin=window.open("","demo","width="+w+",height="+h)
 movwin.document.write(subwin.innerHTML)
 movwin.document.close()
 targetX=(screen.width-w)/2
 step=(targetX-movwin.screenLeft)/10
 movwin.moveTo(-w,(screen.height-h)/2)
 moveit()
}
function moveit(){
 if(!movwin.closed&&movwin.screenLeft<targetX){
   movwin.moveBy(step,0)
   setTimeout("moveit()",10)
   step=(targetX-movwin.screenLeft)/10
 }
}
</script>
<button onClick="newwin(150,100)">打开滑动窗口</button>
<xmp style="display:none" id="subwin">
<script>
var step=0.1
function closeit(){
if(screenLeft<screen.width) {
  step*=1.15
  self.moveBy(step,0)
  setTimeout("closeit()",10)
}
else self.close()
}
</script>
<button onClick="closeit()">关闭滑动窗口</button>
</xmp>
技巧：利用窗口对象的screenLeft和screenTop属性，还可以判断窗口的关闭、刷新或重定向操作。

<script event="onunload" for="window">
(this.screenLeft>=10000 && this.screenTop>=10000)?alert("Close"):alert("Refresh or Redirect")
</script>

特别提示
运行第3步的代码，单击【打开滑动窗口】按钮，将打开一个150×100大小的窗口，窗口先在屏幕左上角打开，然后立刻移动到屏幕之外，再以逐渐变慢的速度移动至屏幕中央。在单击【关闭滑动窗口】按钮后，滑动窗口将以一个在水平方向上逐渐变快的速度移出屏幕之外，然后自动关闭。

图1.5.18 滑入滑出的弹出窗口

特别说明

本例主要是窗口对象的moveTo、moveBy方法和screenLeft属性的应用。
screenLeft 获取浏览器客户区左上角相对于屏幕左上角的 x 坐标。 
screenTop 获取浏览器客户区左上角相对于屏幕左上角的 y 坐标。