<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<HEAD>
<TITLE>窗体的改变</TITLE>
</HEAD>
<BODY>
<div id="Layer" style="position:absolute; z-index:500; overflow:hidden; left: 0px; top: 0px;">
<img src="yidong.jpg" id="img1" style="position:absolute; z-index:4; left: 1px; top: 3px; cursor:move" title="移动窗体"/>
<div id="Layer2" style="position:absolute; display:none; z-index:5; left: 180px; top: 3px; cursor:hand">
<img src="da.jpg" id="img2" onClick="openDIV()" title="打开窗体"/>
</div>
<img src="guanbi.jpg" id="img3" style="position:absolute; z-index:4; left: 345px; top: 2px; cursor:hand" onClick="closeDIV()" title="关闭窗体"/>
<img src="ceng.jpg" id="img4" /></div>
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
页面最初的加载时，让对话框显示在最中间
*/
function load_ct(){
z.style.pixelLeft=document.documentElement.scrollLeft+(document.documentElement.clientWidth-z.offsetWidth)/2;
z.style.pixelTop=document.documentElement.scrollTop+(document.documentElement.clientHeight-z.offsetHeight)/2;
}
/*
可以鼠标拖动对话框
*/
var move_out=false; //定义变量，值为false
var z=document.getElementById("Layer");
var s=document.getElementById("Layer2");
var x,y; //定义变量
var w=z.offsetWidth;//层的原来宽度
var h=z.offsetHeight;//层的原来高度
var new_w=200;//关闭窗体后新的宽度
var new_h=25;//关闭窗体后新的高度
var c_w=w;
var c_h=h;
var speed=2;//变化的速度
var step=5;//步长
var top_new=0;
var left_new=0;
var top_old=0;
var left_old=0;
var top_c=0;
var left_c=0;
function move(){//创建函数
if(move_out){
if(event.button==move_out){ //判断当前鼠标是否是左键按下状态
z.style.pixelLeft=temporarily1+event.clientX-x; //获取当前鼠标的位置
z.style.pixelTop=temporarily2+event.clientY-y; //获取当前鼠标的位置
return false;
}
}
}
function down(){// 创建自定义函数，实现文字的移动
if(event.srcElement.id=="img1"){//应用event对象中的srcElement属性获取当前事件的对象
move_out=true;
temporarily1=z.style.pixelLeft;
temporarily2=z.style.pixelTop;
x=event.clientX; //获取鼠标在窗口中的X位置
y=event.clientY;//获取鼠标在窗口中的Y位置
document.onmousemove=move; //当鼠标移动时执行move()函数
}else{
move_out=false;
}
}
function up(){
move_out=false;
}
/*
关闭窗体
*/
function closeDIV(){
setTimeout("change_ck()",step);
}
function change_ck(){
//改变窗体的宽
c_w-=speed;
if(c_w>=new_w){
z.style.width=c_w;
}
else{
z.style.width=new_w;
c_w=new_w;
}
//改变窗体的高
c_h-=speed;
if(c_h>=new_h){
z.style.height=c_h;
}
else{
z.style.height=new_h;
c_h=new_h;
}
if(c_w!=new_w||c_h!=new_h){
setTimeout("change_ck()",step);
}
else{
//表示窗体已经停止缩小，现在要移动窗体到右下脚
top_new=document.documentElement.scrollTop+document.documentElement.clientHeight-new_h;//要移动后的top
left_new=document.documentElement.scrollLeft+document.documentElement.clientWidth-new_w;//要移动后的left
left_old=z.style.pixelLeft;//保存原来的left
top_old=z.style.pixelTop;//保存原来的top
top_c=top_old;//top变量
left_c=left_old;//left变量
s.style.display="block";
setTimeout("motion_left()",step);
}
}
function motion_left(){
left_c+=speed;
if(left_c<=left_new){
z.style.pixelLeft=left_c;
setTimeout("motion_left()",step);
}
else{
z.style.pixelLeft=left_new;
left_c=left_new;
setTimeout("motion_top()",step);
}
}
function motion_top(){
top_c+=speed;
if(top_c<=top_new){
z.style.pixelTop=top_c;
setTimeout("motion_top()",step);
}
else{
z.style.pixelTop=top_new;
top_c=top_new;
}
}
/*
打开窗体
*/
function openDIV(){
left_c=z.style.pixelLeft;//当前的left
top_c=z.style.pixelTop;//当前的top
setTimeout("motion_revert_top()",step);
}
function motion_revert_top(){
if(top_c>top_old){
top_c-=speed;
if(top_c>top_old){
z.style.pixelTop=top_c;
setTimeout("motion_revert_top()",step);
}
else{
z.style.pixelTop=top_old;
top_c=top_old;
setTimeout("motion_revert_left()",step);
}
}
else if(top_c<top_old){
top_c+=speed;
if(top_c<top_old){
z.style.pixelTop=top_c;
setTimeout("motion_revert_top()",step);
}
else{
z.style.pixelTop=top_old;
top_c=top_old;
setTimeout("motion_revert_left()",step);
}
}
else if(top_c==top_old){
setTimeout("motion_revert_left()",step);
}
}
function motion_revert_left(){
if(left_c>left_old){
left_c-=speed;
if(left_c>left_old){
z.style.pixelLeft=left_c;
setTimeout("motion_revert_left()",step);
}
else{
z.style.pixelLeft=left_old;
left_c=left_old;
s.style.display="none";
setTimeout("afresh_open()",step);
}
}
else if(left_c<left_old){
left_c+=speed;
if(left_c<left_old){
z.style.pixelLeft=left_c;
setTimeout("motion_revert_left()",step);
}
else{
z.style.pixelLeft=left_old;
left_c=left_old;
s.style.display="none";
setTimeout("afresh_open()",step);
}
}
else if(left_c==left_old){
s.style.display="none";
setTimeout("afresh_open()",step);
}
}
/*
从新打开窗口
*/
function afresh_open(){
//改变窗体的宽
c_w+=speed;
if(c_w<=w){
z.style.width=c_w;
}
else{
z.style.width=w;
c_w=w;
}
//改变窗体的高
c_h+=speed;
if(c_h<=h){
z.style.height=c_h;
}
else{
z.style.height=h;
c_h=h;
}
if(c_w!=w||c_h!=h){
setTimeout("afresh_open()",step);
}
}
window.onload=load_ct;//页面加载时，窗体显示在最中间
document.onmousedown=down;//当鼠标按下时执行down()函数
document.onmouseup=up;
//-->
</SCRIPT>
</BODY>
</HTML>
用js实现的窗体的缓慢关闭与缓慢打开
4星 · 超过85%的资源 需积分: 10 183 浏览量
2009-09-21
11:35:08
上传
评论
收藏 20KB RAR 举报 
js实现的窗体的缓慢关闭与缓慢打开.rar （8个子文件） 
用js实现的窗体的缓慢关闭与缓慢打开 
test.html 6KB
guanbi.jpg 748B test2.html 6KB ceng.jpg 12KB xiao.jpg 2KB da.jpg 740B
Thumbs.db 9KB yidong.jpg 1KB
wszlh1981
- 粉丝: 13
- 资源: 15
最新资源
- 机器学习和数据挖掘课程设计-米其林餐厅数据挖掘管理系统源码+使用文档说明.zip
- html html html展示我与ai的对化
- 数据结构课程设计-全国交通出行咨询模拟系统C语言实现源码.zip
- cef-binary-109.0.1+gcd5e37a+chromium-109.0.5414.8-windows32
- 基于C语言的全国交通咨询系统模拟源码.zip
- 正点原子HAL库 STM32F4 DMA（学习自用附源码）
- 炫酷代码雨，超级炫酷哦！！！
- 基于物联网MQTT协议的智能停车场管理系统
- POETIZE个人博客系统源码 - 最美博客
- 基于深度学习的行人检测系统源码+项目说明（YoloV3+Tensorflow）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
- 1
- 2
前往页