主站
经典论坛
家园
作品集
Think.Pages
维基
桌面
聚合
注册
登录
专长会员
帮助
客服QQ:6650171
经典论坛
»
WEB标准化专栏
» 动画效果的弹出框,弹出时背景变灰
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
[讨论]
动画效果的弹出框,弹出时背景变灰
sohe99
[楼主]
新手上路
帖子
13
体力
28
威望
0
当前
上海 浦东
离线
20 天
个人网站
发短消息
加为好友
1
#
大
中
小
发表于 2008-4-25 17:50
以前曾在网上看到一个动画弹出的效果,做了些改进,加入了弹出时背景变灰的效果。
<font color=red><!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>可移动的弹出框</title> <style type="text/css"> <!-- * { padding:0; margin:0; } #upcontent { list-style-position: outside; list-style-image: none; list-style-type: none; } #upcontent li { font-size:12px; color:#333; line-height:150%; } #bodyL { float:left; width:84px; margin-right:2px; } #tittleup { font-size:14px; font-weight:bold; color:#000066; padding-left:25px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #d0daec; margin-bottom: 10px; padding-bottom: 10px; } a.od { float:right; font-size:14px; color: #CC0000; text-decoration: none; } a.od:hover { color:#FF0000; } #fd { background:#EDF1F8; border: 2px solid #849BCA; margin-top:2px; margin-left:2px; float:left; overflow:hidden; position:absolute; left:0px; top:0px; cursor:move; float:left;/*filter:alpha(opacity=50);*/ z-index: 10; } .contentup { padding:20px; } } --> </style> </head> <body > <div id="bodyL"> <a href="#" onclick = "show('fd',event);return false;"> [打开层] </a> </div> <div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;"> <div class="contentup"> <a href="#" class="od" onclick = "closeed('fd');return false;"> 关 闭 </a> <div id="tittleup">销售话术</div> <ul id="upcontent"> <li><span style='font-weight: bold; color:red;'>销售代表(刘象的同学或者朋友):</span> 飞人,(刘象), 我的邮件收到了么? </li> <li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>刘象:</span></span>收到了啊,是个3G人才视频招聘网站,干嘛啊 </li> <li><span style='font-weight: bold; color:red;'>销售代表(刘象的同学或者朋友):</span>兄弟,帮忙注册一份简历,我在做这个网站的推广工作。 </li> <li><span style='font-weight: bold; color:green;'>刘象:</span>好。晚上回去弄。</li> <li> <span style='font-weight: bold; color:red;'>销售代表(刘象的同学或者朋友):</span>快点哟,我还要去帮你拍摄个求职视频。</li> <li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>刘象:</span></span>好吧。为了将来找份好工作,现在准备秀。 </li> <li><span style='font-weight: bold; color:red;'>销售代表(刘象的同学或者朋友):</span>拍好了要收你20元钱的,因为要给你的视频进行后期制作与格式转换的。</li> <li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>刘象:</span></span>不会吧,我不拍。</li> <li> <span style='font-weight: bold; color:red;'>销售代表(刘象的同学或者朋友):</span>是朋友么,这点小忙都不帮?绝交。 </li> <li><span style='font-weight: bold; color:green;'>刘象:</span>怕你了。明天拍……</li> </ul> </div> </div> <script type="text/javascript"> var prox; var proy; var proxc; var proyc; var isIe=(document.all)?true:false; function setSelectState(state) { var objl=document.getElementsByTagName('select'); for(var i=0;i<objl.length;i++) { objl[i].style.visibility=state; } } function mousePosition(ev) { if(ev.pageX || ev.pageY) { return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } //关闭窗口 function closeWindow() { if(document.getElementById('back')!=null) { document.getElementById('back').parentNode.removeChild(document.getElementById('back')); } if(document.getElementById('mesWindow')!=null) { document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow')); } if(isIe){ setSelectState('');} } function show(id,ev){/*--打开--*/ closeWindow(); var bWidth=parseInt(document.documentElement.scrollWidth); var bHeight=parseInt(document.documentElement.scrollHeight)<592?592:parseInt(document.documentElement.scrollHeight); if(isIe){ setSelectState('hidden');} var back=document.createElement("div"); back.id="back"; var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;"; styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;"; back.style.cssText=styleStr; document.body.appendChild(back); clearInterval(prox); clearInterval(proy); clearInterval(proxc); clearInterval(proyc); var o = document.getElementById(id); o.style.display = "block"; o.style.width = "1px"; o.style.height = "1px"; prox = setInterval(function(){openx(o,500)},10); } function openx(o,x){/*--打开x--*/ var cx = parseInt(o.style.width); if(cx < x) { o.style.width = (cx + Math.ceil((x-cx)/5)) +"px"; } else { clearInterval(prox); proy = setInterval(function(){openy(o,300)},10); } } function openy(o,y){/*--打开y--*/ var cy = parseInt(o.style.height); if(cy < y) { o.style.height = (cy + Math.ceil((y-cy)/5)) +"px"; } else { clearInterval(proy); } } function closeed(id){/*--关闭--*/ closeWindow(); clearInterval(prox); clearInterval(proy); clearInterval(proxc); clearInterval(proyc); var o = document.getElementById(id); if(o.style.display == "block") { proyc = setInterval(function(){closey(o)},10); } } function closey(o){/*--打开y--*/ var cy = parseInt(o.style.height); if(cy > 0) { o.style.height = (cy - Math.ceil(cy/5)) +"px"; } else { clearInterval(proyc); proxc = setInterval(function(){closex(o)},10); } } function closex(o){/*--打开x--*/ var cx = parseInt(o.style.width); if(cx > 0) { o.style.width = (cx - Math.ceil(cx/5)) +"px"; } else { clearInterval(proxc); o.style.display = "none"; } } /*-------------------------鼠标拖动---------------------*/ var od = document.getElementById("fd"); var dx,dy,mx,my,mouseD; var odrag; var isIE = document.all ? true : false; document.onmousedown = function(e){ var e = e ? e : event; if(e.button == (document.all ? 1 : 0)) { mouseD = true; } } document.onmouseup = function(){ mouseD = false; odrag = ""; if(isIE) { od.releaseCapture(); od.filters.alpha.opacity = 100; } else { window.releaseEvents(od.MOUSEMOVE); od.style.opacity = 1; } } //function readyMove(e){ od.onmousedown = function(e){ odrag = this; var e = e ? e : event; if(e.button == (document.all ? 1 : 0)) { mx = e.clientX; my = e.clientY; od.style.left = od.offsetLeft + "px"; od.style.top = od.offsetTop + "px"; if(isIE) { od.setCapture(); od.filters.alpha.opacity = 50; } else { window.captureEvents(Event.MOUSEMOVE); od.style.opacity = 0.5; } //alert(mx); //alert(my); } } document.onmousemove = function(e){ var e = e ? e : event; //alert(mrx); //alert(e.button); if(mouseD==true && odrag) { var mrx = e.clientX - mx; var mry = e.clientY - my; od.style.left = parseInt(od.style.left) +mrx + "px"; od.style.top = parseInt(od.style.top) + mry + "px"; mx = e.clientX; my = e.clientY; } } function showBackground(obj,endInt) { obj.filters.alpha.opacity+=1; if(obj.filters.alpha.opacity<endInt) { setTimeout(function(){showBackground(obj,endInt)},8); } } </script> </body> </html> </font>
提示:您可以先修改部分代码再运行
一点不足,在ie6里灰色背景不能把空白的网页扑满。不过如果网页的内容铺满屏幕,就没问题了。
[
本帖最后由 sohe99 于 2008-4-25 17:52 编辑
]
codelog.cn
积分
28
阅读权限
10
性别
男
在线时间
28 小时
注册时间
2006-2-21
最后登录
2008-9-16
查看个人网站
查看详细资料
TOP
做西部数码代理.Cn1元国际45元
|
将虚拟化进行到底
imyuanb
中级会员
帖子
125
体力
219
威望
0
当前
湖南 娄底
离线
12 天
个人网站
发短消息
作品 2
加为好友
2
#
大
中
小
发表于 2008-4-25 22:39
非常不错
积分
219
阅读权限
30
在线时间
30 小时
注册时间
2007-5-19
最后登录
2008-9-24
查看个人网站
查看详细资料
TOP
美橙vps独立IP月付189元
80882267
初级会员
帖子
111
体力
178
威望
0
当前
广东 深圳
离线
9 天
发短消息
加为好友
专长
网页设计,前端制作,策划
3
#
大
中
小
发表于 2008-4-28 14:48
关都关不掉啊.
PHP群:33918040
积分
178
阅读权限
20
性别
女
在线时间
188 小时
注册时间
2006-12-27
最后登录
2008-9-28
查看详细资料
TOP
请大家尊重和保护奥运知识产权。
zilin
初级会员
帖子
52
体力
99
威望
0
发短消息
加为好友
4
#
大
中
小
发表于 2008-4-28 14:57
这个效果不错哟!very good!
积分
99
阅读权限
20
性别
男
在线时间
88 小时
注册时间
2006-8-10
最后登录
2008-10-7
查看详细资料
TOP
还在为头像烦恼?还在为不能关注好友动态烦忧?快来
蓝色理想家园
吧!
sohe99
[楼主]
新手上路
帖子
13
体力
28
威望
0
当前
上海 浦东
离线
20 天
个人网站
发短消息
加为好友
5
#
大
中
小
发表于 2008-6-20 11:51
3楼的能讲具体点吗,是什么样的情况下关不掉?
我在IE、FF下测试均已通过
codelog.cn
积分
28
阅读权限
10
性别
男
在线时间
28 小时
注册时间
2006-2-21
最后登录
2008-9-16
查看个人网站
查看详细资料
TOP
cikeaiwanzi
初级会员
帖子
54
体力
94
威望
0
当前
河北 石家庄
离线
68 天
发短消息
加为好友
6
#
大
中
小
发表于 2008-6-20 11:56
<font color=red><!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>可移动的弹出框</title> <style type="text/css"> <!-- * { padding:0; margin:0; } #upcontent { list-style-position: outside; list-style-image: none; list-style-type: none; } #upcontent li { font-size:12px; color:#333; line-height:150%; overflow:hidden; } #bodyL { float:left; width:84px; margin-right:2px; } #tittleup { font-size:14px; font-weight:bold; color:#000066; padding-left:25px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #d0daec; margin-bottom: 10px; padding-bottom: 10px; } a.od { float:right; font-size:14px; color: #CC0000; text-decoration: none; } a.od:hover { color:#FF0000; } #fd { background:#EDF1F8; border: 2px solid #849BCA; margin-top:2px; margin-left:2px; float:left; overflow:hidden; position:absolute; left:0px; top:0px; cursor:move; float:left;/*filter:alpha(opacity=50);*/ z-index: 10; } .contentup { padding:20px; } } --> </style> </head> <body > <div id="bodyL"> <a href="#" onclick = "show('fd',event);return false;"> [打开层] </a> </div> <div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;"> <div class="contentup"> <a href="#" class="od" onclick = "closeed('fd');return false;"> 关 闭 </a> <div id="tittleup">销售话术</div> <ul id="upcontent"> <li><span style='font-weight: bold; color:red;'>销售代表(刘象的同学或者朋友):</span> 飞人,(刘象), 我的邮件收到了么? </li> <li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>刘象:</span></span>收到了啊,是个3G人才视频招聘网站,干嘛啊 </li> <li><span style='font-weight: bold; color:red;'>销售代表(刘象的同学或者朋友):</span>兄弟,帮忙注册一份简历,我在做这个网站的推广工作。 </li> <li><span style='font-weight: bold; color:green;'>刘象:</span>好。晚上回去弄。</li> <li> <span style='font-weight: bold; color:red;'>销售代表(刘象的同学或者朋友):</span>快点哟,我还要去帮你拍摄个求职视频。</li> <li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>刘象:</span></span>好吧。为了将来找份好工作,现在准备秀。 </li> <li><span style='font-weight: bold; color:red;'>销售代表(刘象的同学或者朋友):</span>拍好了要收你20元钱的,因为要给你的视频进行后期制作与格式转换的。</li> <li><span style='font-weight: bold; color:green;'><span style='font-weight: bold; color:green;'>刘象:</span></span>不会吧,我不拍。</li> <li> <span style='font-weight: bold; color:red;'>销售代表(刘象的同学或者朋友):</span>是朋友么,这点小忙都不帮?绝交。 </li> <li><span style='font-weight: bold; color:green;'>刘象:</span>怕你了。明天拍……</li> </ul> </div> </div> <script type="text/javascript"> var prox; var proy; var proxc; var proyc; var isIe=(document.all)?true:false; function setSelectState(state) { var objl=document.getElementsByTagName('select'); for(var i=0;i<objl.length;i++) { objl[i].style.visibility=state; } } function mousePosition(ev) { if(ev.pageX || ev.pageY) { return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } //关闭窗口 function closeWindow() { if(document.getElementById('back')!=null) { document.getElementById('back').parentNode.removeChild(document.getElementById('back')); } if(document.getElementById('mesWindow')!=null) { document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow')); } if(isIe){ setSelectState('');} } function show(id,ev){/*--打开--*/ closeWindow(); var bWidth=parseInt(document.documentElement.scrollWidth); var bHeight=parseInt(document.documentElement.scrollHeight)<592?592:parseInt(document.documentElement.scrollHeight); if(isIe){ setSelectState('hidden');} var back=document.createElement("div"); back.id="back"; var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;"; styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;"; back.style.cssText=styleStr; document.body.appendChild(back); clearInterval(prox); clearInterval(proy); clearInterval(proxc); clearInterval(proyc); var o = document.getElementById(id); o.style.display = "block"; o.style.width = "1px"; o.style.height = "1px"; prox = setInterval(function(){openx(o,500)},10); } function openx(o,x){/*--打开x--*/ var cx = parseInt(o.style.width); if(cx < x) { o.style.width = (cx + Math.ceil((x-cx)/5)) +"px"; } else { clearInterval(prox); proy = setInterval(function(){openy(o,300)},10); } } function openy(o,y){/*--打开y--*/ var cy = parseInt(o.style.height); if(cy < y) { o.style.height = (cy + Math.ceil((y-cy)/5)) +"px"; } else { clearInterval(proy); } } function closeed(id){/*--关闭--*/ closeWindow(); clearInterval(prox); clearInterval(proy); clearInterval(proxc); clearInterval(proyc); var o = document.getElementById(id); if(o.style.display == "block") { proyc = setInterval(function(){closey(o)},10); } } function closey(o){/*--打开y--*/ var cy = parseInt(o.style.height); if(cy > 0) { o.style.height = (cy - Math.ceil(cy/5)) +"px"; } else { clearInterval(proyc); proxc = setInterval(function(){closex(o)},10); } } function closex(o){/*--打开x--*/ var cx = parseInt(o.style.width); if(cx > 0) { o.style.width = (cx - Math.ceil(cx/5)) +"px"; } else { clearInterval(proxc); o.style.display = "none"; } } /*-------------------------鼠标拖动---------------------*/ var od = document.getElementById("fd"); var dx,dy,mx,my,mouseD; var odrag; var isIE = document.all ? true : false; document.onmousedown = function(e){ var e = e ? e : event; if(e.button == (document.all ? 1 : 0)) { mouseD = true; } } document.onmouseup = function(){ mouseD = false; odrag = ""; if(isIE) { od.releaseCapture(); od.filters.alpha.opacity = 100; } else { window.releaseEvents(od.MOUSEMOVE); od.style.opacity = 1; } } //function readyMove(e){ od.onmousedown = function(e){ odrag = this; var e = e ? e : event; if(e.button == (document.all ? 1 : 0)) { mx = e.clientX; my = e.clientY; od.style.left = od.offsetLeft + "px"; od.style.top = od.offsetTop + "px"; if(isIE) { od.setCapture(); od.filters.alpha.opacity = 50; } else { window.captureEvents(Event.MOUSEMOVE); od.style.opacity = 0.5; } //alert(mx); //alert(my); } } document.onmousemove = function(e){ var e = e ? e : event; //alert(mrx); //alert(e.button); if(mouseD==true && odrag) { var mrx = e.clientX - mx; var mry = e.clientY - my; od.style.left = parseInt(od.style.left) +mrx + "px"; od.style.top = parseInt(od.style.top) + mry + "px"; mx = e.clientX; my = e.clientY; } } function showBackground(obj,endInt) { obj.filters.alpha.opacity+=1; if(obj.filters.alpha.opacity<endInt) { setTimeout(function(){showBackground(obj,endInt)},8); } } </script> </body> </html> </font>
提示:您可以先修改部分代码再运行
积分
94
阅读权限
20
在线时间
32 小时
注册时间
2008-5-5
最后登录
2008-7-31
查看详细资料
TOP
loversnie
高级会员
帖子
247
体力
502
威望
0
当前
北京 朝阳区
发短消息
加为好友
7
#
大
中
小
发表于 2008-6-21 01:04
效果不错,支持了。
努力学习01年前辈们的帖子。
积分
502
阅读权限
50
在线时间
160 小时
注册时间
2006-10-24
最后登录
2008-10-7
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
版块跳转
内部交流区
网站开发区
前台制作与脚本专栏
后台数据库编程
WEB标准化专栏
WAP 技术专栏
平面设计区
艺术与设计论坛
Adobe Photoshop 专栏
Fireworks 专栏
矢量图形专栏
插画手绘交流
交互设计区
用户体验综合版
UI图形设计
RIA设计与应用
Flash 8 及之前版本
Flash CS3 及 AS3
Silverlight 专版
Director 专栏
其它技术讨论区
计算机技术
英语学习和技术翻译
摄影欣赏与技术交流
无线通讯与数码设备
信息平台
企业招聘
学习工作交流区
创业版