当前位置:flash课件吧→FLASH8.0教程→ flash cs3视频教程 flashcs3教程 flash cs3教程下载 flashcs3视频教程 flash cs3 pro教程 flash cs3教程网 flash cs3 实例教程 flashcs3教程下载 flash cs3教程 pdf flash cs3按钮教程

我站原创视频教程,网上视频教程学校,仅需要一个耳机+远程即可完成所有教学任务。

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

解决思路:
   窗口滑入时的速度应该是渐慢,而滑出时的速度应该是渐快,速度渐变的原理可以参考本部分第三章的问题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){