网站导航
：
网学
原创论文
原创专题
网站设计
最新系统
原创论文
论文降重
发表论文
论文发表
UI设计定制
论文答辩PPT格式排版
期刊发表
论文专题
最新论文
推荐专题
热门论文
论文专题
网站首页
论文模板
设计资源
程序设计
设计下载
编程文档
营销学习
游戏频道
参考使用
网学资源
网络学习
网页素材
网页模板
网学软件
学习知识
交易代码
关于网学
安全工程
自动化
保险
表演
财务管理
参考选题
论文选题-查重参考论文
参考论文大全
电气工程及其自动化
电子论文
电子信息工程
电子商务
法律
法学
工程管理
公共关系学
公共事业管理
公路工程
公路交通运输
工商管理
广告学
国际经济与贸易
汉语国际教育
汉语言文学
环境科学与工程
化学
会计学
护理学
交通运输
教育管理
教育研究生
经济学
金融
计算机科学与技术
计算机应用
酒店管理
机械电子工程
机械论文
机械设计制造及其自动化
论文查重
旅游管理
python开发
生物工程
环境工程
数字媒体技术
ios开发
工程造价
家庭教育
农学
家政学
原创检测通过
期刊发表方法
当前位置：
网学
>
设计资源
>
实用代码片段
> 正文
动画效果打开层/关闭层
来源：
http://myeducs.cn
联系QQ：
作者：
用户投稿
发布时间：
09/03/03
<!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>DOM_text01</title> <style type="text/css"> body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:block; color:#547BC9; float:left; text-decoration:none; margin-top:2px; } a.od:link{ background:#EEF1F8; } a.od:visited{ background:#EEF1F8; } a.od:hover{ background:#EEE; } a.od:active{ background:#EEE; } #fd{ width:500px; height:200px; 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);*/ } .content{ padding:10px; } </style> </head> <body> <div id="bodyL"> <a href="#" class="od" onclick = "show('fd');return false;"> [打开层] </a> <a href="#" class="od" onclick = "closeed('fd');return false;"> [关闭层] </a> </div> <div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;"> <div class="content">移动层</div> </div> <script type="text/javascript"> var prox; var proy; var proxc; var proyc; function show(id){/*--打开--*/ 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,200)},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){/*--关闭--*/ 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 { win </div> <div class="page"> <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/donghuaxiaoguo-dakaicengguanbiceng/" class="current">1</a><a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/donghuaxiaoguo-dakaicengguanbiceng_1/">2</a><a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/donghuaxiaoguo-dakaicengguanbiceng_1/">下一页</a> </div> <div style="text-align:center"> <script type="text/javascript">BAIDU_CLB_fillSlot("755686");</script> </div> <div id="wz_46860" style="margin:2px 0px 0px 0px"><script type="text/javascript">BAIDU_CLB_fillSlot("755698");</script></div> <div class="shuqian"><script type="text/javascript">BAIDU_CLB_fillSlot("755740");</script></div> </div> <div class="clear"> </div> <div class="wle41"> <li>上一篇资讯： <a href='http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/fuzhidaojiantiebandedaima/'>复制到剪贴板的代码</a></li> </div> <div class="wle41"> <li>下一篇资讯： <a href='http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/youjiantouzhishideshengxuhejiangxutishixiaoguo/'>有箭头指示的升序和降序提示效果</a></li> </div> <div class="wle5"> <script> (function() { var s = "_" + Math.random().toString(36).slice(2); document.write('<div id="' + s + '"></div>'); (window.slotbydup=window.slotbydup || []).push({ id: '755749', container: s, size: '890,60', display: 'inlay-fix' }); })(); </script> </div> <div class="jiange"> </div> <div class="indexmbleft1"> <div class="indexmbleft1t"> <h2>相关资讯</h2> <span></span> <div class="clear"> </div> </div> <div class="indexmbleft1li"> <div id="RelatedContainer"> <div class="related"> <div class="title"> <h3>相关文章</h3> </div> <ul class="list"> <li> <a title="有箭头指示的升序和降序提示效果" href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/youjiantouzhishideshengxuhejiangxutishixiaoguo/" target="_blank"> <span>有箭头指示的升序和降序提示效果</span></a></li> <li> <a title="多行文本框如何限制输入字数方法一" href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/duohangwenbenkuangruhexianzhishuruzishufangfayi/" target="_blank"> <span>多行文本框如何限制输入字数方法一</span></a></li> <li> <a title="多行输入框如何限制输入的字数方法二" href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/duohangshurukuangruhexianzhishurudezishufangfaer/" target="_blank"> <span>多行输入框如何限制输入的字数方法二</span></a></li> <li> <a title="提取自百度有啊的css圆角效果" href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/tiquzi-baidu-you-de-css-yuanjiaoxiaoguo/" target="_blank"> <span>提取自百度有啊的css圆角效果</span></a></li> <li> <a title="可左右平滑滚动的产品展示效果" href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/kezuoyoupinghuagundongde-product-zhanshixiaoguo/" target="_blank"> <span>可左右平滑滚动的产品展示效果</span></a></li> </ul> <div class="clear"> </div> </div> <div class="related" style=" margin-left:7px;"> <div class="title"> <h3>相关专题</h3> </div> <ul class="list"> <li><a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6374/" target="_blank" title="多行滚动jQuery循环新闻列表代码"><span>多行滚动jQuery循环新闻列表代码</span></a></li> <li><a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6380/" target="_blank" title="仿51job.com城市选择框特效"><span>仿51job.com城市选择框特效</span></a></li> <li><a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6477/" target="_blank" title="带1234的表格换色"><span>带1234的表格换色</span></a></li> <li><a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6433/" target="_blank" title="JS控制图片滚动的效果"><span>JS控制图片滚动的效果</span></a></li> <li><a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6577/" target="_blank" title="Flash饼状图工具"><span>Flash饼状图工具</span></a></li> </ul> <div class="clear"> </div> </div> <div class="clear"> </div> </div> </div> </div> </div> <div class="indexmr"> <div class="indexrightgg"> <script> (function() { var s = "_" + Math.random().toString(36).slice(2); document.write('<div id="' + s + '"></div>'); (window.slotbydup=window.slotbydup || []).push({ id: '755762', container: s, size: '250,250', display: 'inlay-fix' }); })(); </script> </div> <div class="jiange"> </div> <div class="indexmr1"> <div class="indexmr1t"> <h2>网学推荐</h2> </div> <div class="indexmr1li"> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/tigong-system-kaifahe-running-fuwu/" target="_blank">提供系统开发和运行服务</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/tigongyuanchuangcankaoziliao/" target="_blank">提供原创参考资料</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/dangantuoguan/" target="_blank">档案托管服务</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/yuanchuangcankaolunwendaohang/" target="_blank">原创参考论文导航</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/chachongfuwuweipujiancediyu-30-a/" target="_blank">查重服务维普检测低于30%</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/womentigongyuanchuangcankaolunwenheyuanchuangdecankaoziliao/" target="_blank">我们提供原创参考论文和原创的参</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/yuanchuangdelunwenziliaocankaojieshengshijian/" target="_blank">原创的论文资料参考节省时间！</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/lunwengeshipaiban-geshihedui/" target="_blank">论文格式排版 格式核对！</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/UI-shejidingzhi/" target="_blank">UI设计定制、界面设计</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/chengxuhe-website-deng-UI-shejidingzhi/" target="_blank">程序和网站等UI设计定制！</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/yuanchuangcankaolunwencankaodingzhi/" target="_blank">原创参考论文参考定制！</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/zhichenghelunwenfabiao-kelianxiyewuwomen/" target="_blank">职称和论文发表,可联系业务我们</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/benkebiyesheji-lunwen-dabianzhinan_fcfb16db/" target="_blank">本科毕业设计(论文)答辩指南</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/chengxuzhizuozhuanjia/" target="_blank">程序制作专家</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/xinyongshuoming/" target="_blank">信用说明</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/dingzuolunwen-dingzuolunwen-QQ3710167_811877e2/" target="_blank">定做论文，定作论文,QQ:3710167</a></li> <li>·<a href="http://myeducs.cn/guanyuwangxue/intro-yewu/chengxusheji-chengxudingzuo-chengxukaifa-chengxuzhizuo-soft-kaifa/" target="_blank">程序设计,程序定做,程序开发,程序</a></li> </div> </div> <div class="jiange"> </div> <div class="indexmr1"> <div class="indexmr1t"> <h2>原创论文</h2> </div> <div class="indexmr1li"> <li>·<a title="财务管理" href="http://wenku.myeducs.cn/p-CaiWuZhuanYe.html">财务管理</a></li> <li>·<a title="参考选题" href="http://wenku.myeducs.cn/p-CanKaoLunWenCanKao.html">参考选题</a></li> <li>·<a title="论文选题-查重参考论文" href="http://wenku.myeducs.cn/p-chazhonglunwen.html">论文选题-查重参考论文</a></li> <li>·<a title="参考论文大全" href="http://wenku.myeducs.cn/p-cklw2021.html">参考论文大全</a></li> <li>·<a title="电气工程及其自动化" href="http://wenku.myeducs.cn/p-dianqigongchengjijizidonghua.html">电气工程及其自动化</a></li> <li>·<a title="电子论文" href="http://wenku.myeducs.cn/p-DianZiLunWen.html">电子论文</a></li> <li>·<a title="电子信息工程" href="http://wenku.myeducs.cn/p-ElectronicInformationEngineering.html">电子信息工程</a></li> <li>·<a title="电子商务" href="http://wenku.myeducs.cn/p-DianZiShangWu.html">电子商务</a></li> <li>·<a title="工程管理" href="http://wenku.myeducs.cn/p-gongchengguanli.html">工程管理</a></li> <li>·<a title="公共关系学" href="http://wenku.myeducs.cn/p-GongGongGuanXiXue.html">公共关系学</a></li> <li>·<a title="公共事业管理" href="http://wenku.myeducs.cn/p-gonggongshiyeguanli.html">公共事业管理</a></li> <li>·<a title="公路工程" href="http://wenku.myeducs.cn/p-GongLuGongCheng.html">公路工程</a></li> <li>·<a title="公路交通运输" href="http://wenku.myeducs.cn/p-GongLuJiaoTongYunShu.html">公路交通运输</a></li> <li>·<a title="工商管理" href="http://wenku.myeducs.cn/p-gongshangguanli.html">工商管理</a></li> <li>·<a title="广告学" href="http://wenku.myeducs.cn/p-GuangGaoXue.html">广告学</a></li> <li>·<a title="家政学" href="http://wenku.myeducs.cn/p-homeeconomics.html">家政学</a></li> </div> </div> <div class="jiange"> </div> <div class="indexmr1"> <div class="indexmr1t"> <h2>文章排行榜</h2> </div> <div class="indexmr1li"> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6374/" target="_blank"><span>多行滚动jQuery循环新闻列表代码</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6380/" target="_blank"><span>仿51job.com城市选择框特效</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6477/" target="_blank"><span>带1234的表格换色</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6433/" target="_blank"><span>JS控制图片滚动的效果</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6577/" target="_blank"><span>Flash饼状图工具</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/leisi-51job-shangdediquxuanzexiaoguo/" target="_blank"><span>类似51job上的地区选择效果</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/leisi-QQ-shouyedewushuaxinhuanfuqiehuanyangshi/" target="_blank"><span>类似QQ首页的无刷新换肤切换样式</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/QQ-pindaodanhangduotiao-info-gundongdaima/" target="_blank"><span>QQ频道单行多条信息滚动代码</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6435/" target="_blank"><span>js控制页面字体大小</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6567/" target="_blank"><span>3个最常用的JS时间特效</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6576/" target="_blank"><span>给展示的图片加上工具栏</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6373/" target="_blank"><span>带控制按钮的jQuery滚动代码</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6375/" target="_blank"><span>单行jQuery循环滚动新闻代码</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6425/" target="_blank"><span>CSS左右两列自适应高</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/6568/" target="_blank"><span>字号缩放代码</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/kaoyannidexinsuannengli/" target="_blank"><span>考验你的心算能力</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/xuanzedalei-xiaoleibianhui/" target="_blank"><span>选择大类，小类变灰</span></a></li> <li>· <a href="http://myeducs.cn/lunwen-resource/shiyongdaimapianduan/youhaodebiaogexiaoguo/" target="_blank"><span>友好的表格效果</span></a></li> </div> </div> </div> <div class="clear"> </div> </div> <div class="foot"> <div class="foott"> <a onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://myeducs.cn');" href="#" style="color:#CC6600">设为首页</a> | <a href="javascript:window.external.addFavorite('http://myeducs.cn','网学网');" style="color:#3300FF">加入收藏</a> | <a href="http://myeducs.cn/">网学首页</a> | <a href="http://wenku.myeducs.cn/">原创论文</a> | <a href="http://www.myeducs.cn/yuanchuang/lunwenku/jisuanjilunwenliebiao.html">计算机原创</a> </div> <div class="footli"> 版权所有 网学网 [<a href="http://myeducs.cn" target="_blank">Myeducs.cn</a>] 您电脑的分辨率是 <span class="v"> <script language="JavaScript">document.write(screen.width+' x '+screen.height); </script> </span>像素 <br /> Copyright 2008-2020 <a href="http://myeducs.cn" target="_blank">myeducs.Cn</a> <a href="http://www.myeducs.cn" target="_blank">www.myeducs.Cn</a> All Rights Reserved <a target="_blank" href="http://beian.miit.gov.cn/" rel="nofollow">湘ICP备09003080号</a></span> 常年法律顾问：王律师 </div> </div> </div> <script type="text/javascript">BAIDU_CLB_fillSlot("755933");</script> </body> </html>
