JavaScript实现动画打开半透明提示层的方法


Posted in Javascript onApril 21, 2015

本文实例讲述了JavaScript实现动画打开半透明提示层的方法。分享给大家供大家参考。具体如下:

<!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半透明提示层</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;
}
.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
{
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><br/>
<div>https://3water.com/</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
Jul 01 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
vue2 自定义动态组件所遇到的问题
Jun 08 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
javascript格式化指定日期对象的方法
Apr 21 #Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 #Javascript
javascript判断数组内是否重复的方法
Apr 21 #Javascript
jQuery菜单插件superfish使用指南
Apr 21 #Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 #Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 #Javascript
jQuery背景插件backstretch使用指南
Apr 21 #Javascript
You might like
php array的学习笔记
2012/05/10 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
2019/10/30 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
python列表的常用操作方法小结
2016/05/21 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Python版中国省市经纬度
2020/02/11 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
C语言编程练习
2012/04/02 面试题
土木工程应届生自荐信
2013/09/24 职场文书
行政副总岗位职责
2014/02/23 职场文书
主要负责人任命书
2014/06/06 职场文书
个人工作表现评价材料
2014/09/21 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
师范生见习报告范文
2014/11/03 职场文书
四群教育工作总结
2015/08/10 职场文书
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL