javascript中对对层的控制


Posted in Javascript onDecember 29, 2006

层的开发在实际应用中比较重要,比如漂浮广告等等,我这里简单探讨一下。

1.  控制层的显示或隐藏

两种办法,其实都是控制样式的。

办法一:控制 display 属性

<script language="javascript">
function show(status)
{
          document.getElementById("div1").style.display = status;
}

</script>

<div id="div1" style="left:10px;top:200px;width:250;height:100;z-index:2;">
           这是一层,能看见吗,呵呵.
</div>
<a href=# onClick="show('block');">显示</a>
<a href=# onClick="show('none')">关闭</a>

办法二 控制 visibility 属性

<script language="javascript">
function show(status)
{
          document.getElementById("div1").style.visibility = status;
}

<div id="div1" style="left:10px;top:200px;width:250;height:100;z-index:2;visibility=hideen;">
           这是一层,能看见吗,呵呵.
</div>
<a href=# onClick="show('visible);">显示</a>
<a href=# onClick="show('hidden')">关闭</a>

如果要控制层定时关闭的话,可以加上:

function setTimeStart()
     10 {
     11     window.setTimeout(hiddenTips,4000);
     12 }^
</script>

上面代码就是利用setTimeout方法来控制4秒后关闭层。

2.  控制层的运动,类似于浮动广告

主要就是通过控制层样式中的top和left属性的值来运动,通过随机生成不同的值,看起来就象在运动一样。

<script language="javascript">
var a=200, b=100;
var c=0.1;
var d=5;
var t=0;

function float_1()
{
 var random1 = 100*Math.random();
 var random2 = 100*Math.random();

 var float_1 = document.all ? document.all.float_1.style : document.float_1;
 float_1.left = Math.round(a*Math.cos(t)*Math.cos(t/d)+a)+random1;
 float_1.top = Math.round(b*Math.sin(t)+b)+random2;

 t+=c;

 setTimeout("float_1()", 500);

}
</script>

</head>

<body onLoad="float_1()"><div id="float_1" style="position:absolute;width:200;height:100;z-index:2;visibility:visible">
让我动起来。
</div>

</body>

通过 setTimeout方法进行调用,每隔多少秒运行一次,达到一直运动的目的。

Javascript 相关文章推荐
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
JavaScript设置获取和设置属性的方法
Mar 04 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 Javascript
JavaScript方法和技巧大全
Dec 27 #Javascript
fromCharCode和charCodeAt 方法
Dec 27 #Javascript
另类调用flash无须激活的方法
Dec 27 #Javascript
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 #Javascript
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 #Javascript
从javascript语言本身谈项目实战
Dec 27 #Javascript
JavaScript实现禁止后退的方法
Dec 27 #Javascript
You might like
测试php函数的方法
2013/11/13 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
深入分析PHP设计模式
2020/06/15 PHP
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
JavaScript必知必会(九)function 说起 闭包问题
2016/06/08 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
Vue中render方法的使用详解
2018/01/26 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python学习之第三方包安装方法(两种方法)
2015/07/30 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
使用pyecharts生成Echarts网页的实例
2019/08/12 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python实现梯度下降法
2020/03/24 Python
解决Python安装cryptography报错问题
2020/09/03 Python
Python离线安装各种库及pip的方法
2020/11/28 Python
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
Linux操作面试题
2015/02/11 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
简历中的自我评价怎么写
2014/01/29 职场文书
合伙经营协议书范本
2014/04/18 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
机器人总动员观后感
2015/06/09 职场文书