JavaScript实现动画打开半透明提示层的方法
本文实例讲述了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>http://www.jb51.net/</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
用JavaScript实现动画效果的方法
其实原理是很简单的,主要是使用了一个计时器函数,下面我为大家演示一个简单的动画的制作过程,通过有关的介绍,大家可以举一反三,做出更多很炫的动画效果. 这个实例的效果是点击网页上的"开始移动"按钮,则其中的指定图层就会从左到右移动,在这个过程中你点击"停止移动"按钮就会停止移动. 复制代码 代码如下: <html> <head> <title>JavaScript Motion Sample</title> <sc
-
JavaScript实现鼠标滑过处生成气泡的方法
本文实例讲述了JavaScript实现鼠标滑过处生成气泡的方法.分享给大家供大家参考.具体实现方法如下: <HTML> <HEAD> <title>鼠标周围在网页上生成气泡</title> </HEAD> <BODY bgColor=#000000 scroll=no onload=zyva()> <div id=aqua style="position:absolute;left=0;top=0;">
-
JS实现生成会变大变小的圆环实例
本文实例讲述了JS实现生成会变大变小的圆环.分享给大家供大家参考.具体如下: 这里使用javascript生成圆环,会变大变小,对于研究如何利用JavaScript生成动画效果,这是个很好的范例. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
-
JavaScript生成福利彩票双色球号码
福利彩票的双色球号码是由6个红球号码和1个篮球号码组成的,其中,6个红球号码是从01到33中随机抽出的6个数字,1个篮球号码是从01到16中随机抽出的1个数字.6个红球号码通常按照从小到大的顺序排列.下面是JavaScript中生成一注双色球号码的方法,供大家参考! var redBall = new Array(); var redLen = redBall.length; while(redLen<6){ var ball = ranNumber(1,33); var flag = true
-
javascript转换静态图片，增加粒子动画效果
使用getImageData接口获取图片的像素点,然后基于像素点实现动画效果,封装成一个简单的lib <!DOCTYPE html> <html> <head> <title>particle image</title> <meta charset="utf-8" /> <style> #logo { margin-left:20px; margin-top:20px; width:160px; hei
-
JavaScript生成的动态下雨背景效果实现方法
本文实例讲述了JavaScript生成的动态下雨背景效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>JavaScript生成的动态下雨背景效果</TITLE> </HEAD> <BODY bgcolor="#fef4d2" > <center> <script language=JavaScript> <!-- [
-
JavaScript随机生成信用卡卡号的方法
本文实例讲述了JavaScript随机生成信用卡卡号的方法.分享给大家供大家参考.具体分析如下: 这段JS代码根据信用卡卡号产生规则随机生成信用卡卡号,是可以通过验证的,仅供学习参考,请不要用于非法用途,否则后果自负. var visaPrefixList = new Array( "4539", "4556", "4916", "4532", "4929", "40240071", &
-
javascript+html5实现绘制圆环的方法
本文实例讲述了javascript+html5实现绘制圆环的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> </head> <body> <fiel
-
JavaScript实现动画打开半透明提示层的方法
本文实例讲述了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"&g
-
js+CSS实现弹出居中背景半透明div层的方法
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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
-
js实现鼠标移到链接文字弹出一个提示层的方法
本文实例讲述了js实现鼠标移到链接文字弹出一个提示层的方法.分享给大家供大家参考.具体分析如下: 这里实现鼠标移动到链接文字上面,弹出一个已定义好的DIV层的效果.在这个层里你可以加入与此链接对应的信息,这样就成了一个信息提示窗,在淘宝.新浪都能看到这种效果,很实用. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
JavaScript实现控制打开文件另存为对话框的方法
本文实例讲述了JavaScript实现控制打开文件另存为对话框的方法.分享给大家供大家参考.具体如下: 这里通过JS打开图片另存为对话框,提示用户保存文件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <meta name="Generator&
-
微信小程序实现自定义动画弹框/提示框的方法实例
目录 前言 css3 实现动画 小程序动画 API-实现动画 结语 相关文档 前言 在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等 如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库 怎么手动原生方式去实现呢,最主要的是怎么去实现动画 css3 实现动画 如下是wxml代码 <view> <view class="click-btn" catcht
-
JS动画效果打开、关闭层的实现方法
本文实例讲述了JS动画效果打开.关闭层的实现方法.分享给大家供大家参考.具体如下: <!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"> <h
-
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章.下次再有人问就直接把这篇文章的URL丢出去就好了.这个效果很简单所以我就不做太多说明了,具体的看看代码注释就会明白.下面就是全部代码,复制到HTML中就可以运行的. <!DOCTYPE html> <style> #mask { position:fixed;width:100%; top:0px;left:0px; _position:absolute; _top:expression(documentElemen
-
jquery定时滑出可最小化的底部提示层特效代码
html源代码: 复制代码 代码如下: <!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-equ
-
JavaScript实现页面高亮操作提示和蒙板
本文实例为大家分享了JavaScript实现页面高亮操作提示和蒙板的具体代码,供大家参考,具体内容如下 在页面上,有时候会遇到操作提示,如下图所示. 可以很直观的告诉用户,关键的操作在哪里,有什么做作用. 需要说明的是,被高亮的部分,并不是目标的真实标签,而是用的其他标签模拟的. 真实的标签被 mask 层盖住了,在下方呢. 标签高亮的部分和操作提示框,都是用 js 动态生成的. 这里关键的知识点: 1.要用 JS 获取目标标签的位置. el.getBoundingClientRect() 可以
-
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
效果图 代码部分 复制代码 代码如下: // JavaScript Document (function($){ $.fn.extend({ "changeTips":function(value){ value = $.extend({ divTip:"" },value) var $this = $(this); var indexLi = 0; //点击document隐藏下拉层 $(document).click(function(event){ if($(