JS实现点击登录弹出窗口同时背景色渐变动画效果
本文实例讲述了JS实现点击登录弹出窗口同时背景色渐变动画效果。分享给大家供大家参考，具体如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<STYLE>
#login{
position: relative;
display: none;
top: 20px;
left: 30px;
background-color: #ffffff;
text-align: center;
border: solid 1px;
padding: 10px;
z-index: 1;
}
body {
background-color: #0099CC;
}
.STYLE1 {color: #FFFF00}
</STYLE>
<script type="text/javascript">
var W = screen.width;//取得屏幕分辨率宽度
var H = screen.height;//取得屏幕分辨率高度
function M(id){
return document.getElementById(id);//用M()方法代替document.getElementByIdx_x(id)
}
function MC(t){
return document.createElement(t);//用MC()方法代替document.createElement_x(t)
};
//判断浏览器是否为IE
function isIE(){
return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
//取得页面的高宽
function getBodySize(){
var bodySize = [];
with(document.documentElement) {
bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度，取得滚动条的宽度，否则取页面宽度
bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//如果滚动条的高度大于页面的高度，取得滚动条的高度，否则取高度
}
return bodySize;
}
//创建遮盖层
function popCoverDiv(){
if (M("cover_div")) {
//如果存在遮盖层，则让其显示
M("cover_div").style.display = 'block';
} else {
//否则创建遮盖层
var coverDiv = MC('div');
document.body.appendChild(coverDiv);
coverDiv.id = 'cover_div';
with(coverDiv.style) {
position = 'absolute';
background = '#CCCCCC';
left = '0px';
top = '0px';
var bodySize = getBodySize();
width = bodySize[0] + 'px'
height = bodySize[1] + 'px';
zIndex = 0;
if (isIE()) {
filter = "Alpha(Opacity=60)";//IE逆境
} else {
opacity = 0.6;
}
}
}
}
//让登陆层显示为块
function showLogin()
{
var login=M("login");
login.style.display = "block";
}
//设置DIV层的样式
function change(){
var login = M("login");
login.style.position = "absolute";
login.style.border = "1px solid #CCCCCC";
login.style.background ="#F6F6F6";
var i=0;
var bodySize = getBodySize();
login.style.left = (bodySize[0]-i*i*4)/2+"px";
login.style.top = (bodySize[1]/2-100-i*i)+"px";
login.style.width = i*i*4 + "px";
login.style.height = i*i*1.5 + "px";
popChange(i);
}
//让DIV层大小循环增大
function popChange(i){
var login = M("login");
var bodySize = getBodySize();
login.style.left = (bodySize[0]-i*i*4)/2+"px";
login.style.top = (bodySize[1]/2-100-i*i)+"px";
login.style.width = i*i*4 + "px";
login.style.height = i*i*1.5+ "px";
if(i<=10){
i++;
setTimeout("popChange("+i+")",10);//设置超时10毫秒
}
}
//打开DIV层
function open()
{
change();
showLogin();
popCoverDiv()
void(0);//不进行任何操作,如：<a href="#">aaa</a>
}
//关闭DIV层
function close(){
M('login').style.display = 'none';
M("cover_div").style.display = 'none';
void(0);
}
</script>
</head>
<body>
<br>
<br>
<div align="center"><a href="javascript:open();" class="STYLE1">登陆</a></div>
<div id="login">
<span>用户登陆</span>
<div id="panel">
<lable>用户名: </lable><input type="text" size="20" />
<lable>密码: </lable><input type="password" size="20">
<input type="checkbox" /><lable>登陆</lable>
</div>
<input type="button" value="提交" />
<a href="javascript:close();">关闭</a>
</div>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
神奇！js+CSS+DIV实现文字颜色渐变效果
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati
-
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
本文实例讲述了JavaScript实现弹出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/xhtml&
-
javascript实现颜色渐变的方法
渐变(Gradient)是美学中一条重要的形式美法则,与其相对应的是突变.形状.大小.位置.方向.色彩等视觉因素都可以进行渐变.在色彩中,色相.明度.纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感.本文主要讲述两种颜色RGB数值的渐变算法. 已知:A=50,B=200,A.B之间平均分成3份(Step=3),求每份的数值(StepN)分别是多少. 公式:Gradient = A + (B-A) / Step * N 注]编程时为了提高效率避免浮点运算,往往把除法放在最后面,这样公式就成了
-
js+HTML5实现canvas多种颜色渐变效果的方法
本文实例讲述了js+HTML5实现canvas多种颜色渐变效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not s
-
js实现按钮颜色渐变动画效果
本文实例讲述了js实现按钮颜色渐变动画效果的方法.分享给大家供大家参考.具体如下: 这里演示js实现按钮慢慢变色的方法,鼠标移到按钮上,按钮的背景色就发生变化,是慢慢的变化,点击按钮会打开指定链接,这里主要是演示按钮变色的代码实现方法. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-button-cha-color-animate-codes/ 具体代码如下: <HTML><HEAD><TITLE>按钮慢慢变色&
-
JS Tween 颜色渐变
有31中缓动算法,实现了颜色的自动转换(#f00 #ff0000 rgb(255,0,0)格式到颜色运算格式,最后返回#ff0000格式).px单位的自动转换. 调用接口: /** * 对外接口 * Tween的示例 * @param startProps 开始属性,单个属性或者数组 * @param endProps 结束属性,单个属性或者数组 * @param timeSeconds 运动消耗时间,单位秒 * @param animType 动作类型,字符串型,内部自己转换算子 * @par
-
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/xhtml">
-
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> JS配合CSS实现的漂亮渐变背景特效6个实例 </title> <script> var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas =
-
利用递增的数字返回循环渐变的颜色的js代码
函数如下: 复制代码 代码如下: function gCL(i){ var f=parseInt((i%15)/5); i=i%15%5; switch(f){ case 0:return "#"+cS2(255-i*51)+cS2(i*51)+"00"; case 1:return "#00"+cS2(255-i*51)+cS2(i*51); case 2:return "#"+cS2(i*51)+"00"
-
Javascript 颜色渐变效果的实现代码
下面就是博主的一些思路和解决办法,如果对此没兴趣,想直接使用jquery插件的同学,可以点这里 思路 每一种颜色由RGB组成,每两位为一个16进制数当前颜色代码和目标颜色代码,转换成10进制数后,是有差值的,利用差值,设定总执行次数的步长,计算每一步变更颜色的10进制数利用定时器执行简单的讲,就是将6位颜色代码以每两位转换为10进制数,然后计算两对RGB值的差,根据设定的步长(执行次数),计算每一步需要增加或减少的RGB值,最后变为目标颜色的RGB值 需要解决的问题 将6位颜色代码转换为10进制
-
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" > <head
-
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"> <
-
JavaScript 颜色梯度和渐变效果第1/3页
程序说明 [ColorGrads颜色梯度] 程序ColorGrads的作用是通过StartColor和EndColor生成颜色梯度集合. 颜色都可以用红(r).绿(g).蓝(b)三个颜色来表示. 程序中先通过GetColor把一般的颜色表示形式转化成一个用红(r).绿(g).蓝(b)三个颜色值作元素的集合. 那就首先要知道有什么颜色表示形式,从w3c的Colors部分可以知道有以下形式: 关键词模式: em { color: red } RGB颜色模式: em { color: #f00 } e