JS打开层/关闭层/移动层动画效果的实例代码


Posted in Javascript onMay 11, 2013

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; }

html
<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>

jq
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;
}
}
Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
JavaScript小技巧 2.5 则
Sep 12 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 18 Javascript
解析javascript 实用函数的使用详解
May 10 #Javascript
jQuery拖动图片删除示例
May 10 #Javascript
jquery 提交值不为空的元素示例代码
May 10 #Javascript
JQuery中SetTimeOut传参问题探讨
May 10 #Javascript
jQuery中读取json文件示例代码
May 10 #Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 #Javascript
javascript级联下拉列表实例代码(自写)
May 10 #Javascript
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
ajax 的post方法实例(带循环)
2011/07/04 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
降低PHP Redis内存占用
2017/03/23 PHP
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
使用mouse事件实现简单的鼠标经过特效
2015/01/30 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python中的tcp示例详解
2018/12/09 Python
python实现的config文件读写功能示例
2019/09/24 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
新春联欢会主持词
2014/03/24 职场文书
医院竞聘演讲稿
2014/05/16 职场文书
党员承诺践诺书
2014/05/20 职场文书
李培根演讲稿
2014/05/22 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
2014年学生会工作总结
2014/11/07 职场文书
六年级学生评语大全
2014/12/26 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
活动新闻稿范文
2015/07/17 职场文书
超市员工管理制度
2015/08/06 职场文书