关闭

js源码--动态层

767人阅读 评论(0) 收藏 举报
<style type="text/css">
body 
{
height:
100%;
}

.wc, #wc1, #wc2 
{
position:absolute;
border
-width:0px;
z
-index:2;
left:0px;
top:0px;
display:none
}

#wc1 
{
width:320px;
height:240px;
background
-color:#FFCC00;
}

#wc2 
{
width:420px;
height:340px;
background
-color:#CCCCCC;
}

.wc 
{
z
-index:1;
}

</style>
<html>
<head>
</head>
<body>
<div id="wc1"></div>
<div id="wc2"></div>
<center>
<button id="show_wc1">show_wc1</button>
<button id="show_wc2">show_wc2</button>
<div id="id3"></div>
  
<form name="form1" method="post" action="">
    
<input type="submit" name="Submit" value="提交">
  
</form>
  
<br />
</center>
</body>
</html>
<script language="javascript">
window.onload
=init;
function init(){
div1
=document.getElementById("wc1")
div2
=document.getElementById("wc2")
button1
=document.getElementById("show_wc1")
button2
=document.getElementById("show_wc2")
add(div1,button1)
add(div2,button2)
}


function add(o,p){
o.style.display
="block";
o.top
=p.offsetTop+p.offsetHeight;
o.left
=p.offsetLeft+Math.ceil(p.offsetWidth/2);
o.style.left
=parseInt(o.left)-Math.ceil(o.offsetWidth/2)
o.style.top
=o.top
o.width 
= (o.offsetWidth) / 20;
o.height 
= (o.offsetHeight) / 20;
o.num 
= 0;
o.style.width
=0;
o.style.height
=0
o.style.display
="none";
p.onmouseover
=o.onmouseover=function(){move(o)};
p.onmouseout
=o.onmouseout=function(){out(o)};
}


function move(o){
window.clearTimeout(o.time)
window.status
=o.num
    
if (++o.num<=20){
        o.style.display
="block";
        o.style.width
=(o.num * o.width) + "px"
        o.style.height
=(o.num * o.height) + "px"
        o.style.left
=parseInt(o.left)-(o.offsetWidth/2)
        o.clear
=window.setTimeout(move, 10, o);
        }

    
else{
        window.clearTimeout(o.clear);
        }
    
}


function out(o){
window.clearTimeout(o.clear)
window.status
=o.num
if(--o.num>=0){
        o.style.width
=(o.num * o.width) + "px"
        o.style.height
=(o.num * o.height) + "px"
        o.style.left
=parseInt(o.left)-(o.offsetWidth/2)
        o.time
=window.setTimeout(out, 10, o);
        }

else{
        o.style.display
="none"
        window.clearTimeout(o.time);
        }
        
}



(
function () {
var timeout = window.setTimeout;
window.setTimeout 
= function (a, b) {
var fun;
if ("function" == typeof a) {
var arg = Array.prototype.slice.call(arguments, 2);
fun 
= function () {
a.apply(
null, arg);
}
;
}
 else {
fun 
= a;
}

return timeout(fun, b);
}
;
}
)();

</script>
clearTimeout一定要注意,可以测试类型来确定是否有值,在就是不能在onmouse等事件里放初始值,害的我研究了一下午,原来是放在mousemove等事件变量值随着改变 
0
0
查看评论

js源码--动态层

style type="text/css">body ...{height:100%;}.wc, #wc1, #wc2 ...{position:absolute;border-width:0px;z-index:2;lef...
  • xiaolei1982
  • xiaolei1982
  • 2007-09-10 23:09
  • 642

Js代码动态移动层-拖动浮层并关闭

个由JAVASCRIPT实现的弹出层拖动实例,右上角还带有一个关闭按钮 ,点击即可关闭该浮动层,并且关闭时带有“溶解”效果,比较生动的网页浮动层例子,无jquery代码。
  • life66881
  • life66881
  • 2015-02-06 16:59
  • 352

js源码--层动态变化

html>head>style type="text/css">body ...{height:100%;}#window, #window1 ...{z-index:99;position:absolute
  • xiaolei1982
  • xiaolei1982
  • 2007-09-10 11:12
  • 708

使用原生js实现页面蒙灰(mask)效果

对于web应用开发者,当用户进行界面浏览时如果后台程序处理程序
  • a304507016
  • a304507016
  • 2014-06-19 20:36
  • 896

纯JS实现动态时间显示代码

一、 JavaScript获取当前日期时间同时显示星期几,具体代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 html>...
  • qq_35893120
  • qq_35893120
  • 2017-04-27 10:31
  • 1839

JavaScript实现OATH动态口令算法

1、sjcl.js "use strict";var sjcl={cipher:{},hash:{},keyexchange:{},mode:{},misc:{},codec:{},exception:{corrupt:function(a){this.toString=fun...
  • anda0109
  • anda0109
  • 2016-03-03 11:17
  • 1449

cocos2d-x 是男人就下100层 附源码

1.效果图:    玩法: 一个不断下降的小人,点击屏幕的left或者right控制小人的移动方向,尽可能生存久些. 为什么要搞这个游戏呢?因为在2012年的8月份,我完成它的android版本,见《自己写的第一个android 游戏“是男人就下100层”》。没...
  • fox64194167
  • fox64194167
  • 2013-12-18 11:00
  • 3300

JS弹出一个相对位置的浮动层

需求:点击一个按钮之后在按钮下方显示一个浮出层。#thelayer{ width:300px;height:98px;border:#E4F5FD 1px solid;z-index:2;position:absolute;background:#FFFFFF;display:none;}...
  • xinqinglhj
  • xinqinglhj
  • 2010-05-27 22:36
  • 5129

javascript如何获取当前网页的源码

返回根节点的元素内容: document.documentElement.outerHTML ======================================================== 首先outerHTML有兼容性问题(老版本FF不支持,刚测试了不知从哪个版...
  • sqzhao
  • sqzhao
  • 2015-10-01 14:14
  • 1316

js动态修改页面标题

原生js 动态修改页面标题,窗口获得焦点时显示正常的标题,失去焦点显示指定的标题,效果预览: 代码如下: // window.onload = function () { let hour = new Date().getHours() let str = '...
  • zuoyixiao
  • zuoyixiao
  • 2017-09-21 15:14
  • 357
    个人资料
    • 访问:11990760次
    • 积分:66662
    • 等级:
    • 排名:第39名
    • 原创:675篇
    • 转载:2295篇
    • 译文:0篇
    • 评论:558条
    文章分类
    文章存档
    最新评论
    计算流量