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 相关文章推荐
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
理解javascript定时器中的单线程
Feb 23 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
Vue 进阶之路(三)
Apr 18 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
Nest.js 授权验证的方法示例
Feb 22 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
javascript 操作文件 实现方法小结
2009/07/02 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
AngularJS执行流程详解
2017/02/17 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
python错误处理详解
2014/09/28 Python
Python中list初始化方法示例
2016/09/18 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Django中ORM外键和表的关系详解
2019/05/20 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
python输出带颜色字体实例方法
2019/09/01 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
利用Python如何制作贪吃蛇及AI版贪吃蛇详解
2020/08/24 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
学生感冒英文请假条
2014/02/04 职场文书
部队万能检讨书
2014/02/20 职场文书
教育合作协议范本
2014/10/17 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
讲座通知范文
2015/04/23 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
家访教师心得体会
2016/01/23 职场文书
工伤调解协议书
2016/03/21 职场文书
创业计划书之宠物店
2019/09/19 职场文书
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript