教程集 www.jiaochengji.com
Golang 教程
教程集 >  脚本编程  >  javascript  >  正文 javascript 展示开层/关闭层/移动层动画效果

javascript 展示开层/关闭层/移动层动画效果

发布时间：2016-11-29   编辑：jiaochengji.com
教程集为您提供javascript 展示开层/关闭层/移动层动画效果等资源，欢迎您收藏本站，我们将为您提供最新的javascript 展示开层/关闭层/移动层动画效果资源
本文章来给大家介绍关于javascript 展示开层/关闭层/移动层动画效果代码，有需要了解的朋友可进入参考。
提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS打开层/关闭层/移动层动画效果-</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>
[打开层] [关闭层]
移动层
<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 { 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; } } </script> </body> </html> </textarea>
提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript 展示开层/关闭层/移动层动画效果
photoshop基础图层与蒙版使用技巧心得
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
JS打开层、关闭层、移动层的动画效果的代码一例
动画工具DragonBones的常用术语和使用方法介绍（图）
基于jQuery的网页右下角弹出广告(IE7,firefox)
网站顶部带缓冲打开和关闭功能的横栏提示层js代码
jQuery 打造动态下滑菜单实现说明
photoshop设计一个扁平化风格的天气主题图标制作教程
js页面滚动时层智能浮动定位实现(jQuery/MooTools)

上一篇：仿windows xp左侧菜单伸缩效果js特效 下一篇：js注册按钮读秒倒计时代码
[关闭]
最近更新
浏览排行

关于本站 | 网站地图 | 联系我们 | 免责声明 | 友情链接
京ICP备12039225号-6 广告合作请加QQ:441358019
CopyRight © 2010-2014 教程集 jiaochengji.com , All Rights Reserved.

~ ~