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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
js内置对象处理_打印学生成绩单的简单实现
Sep 24 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
快速使用node.js进行web开发详解
Apr 26 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
js中的闭包学习心得
Feb 06 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
Vue性能优化的方法
Jul 30 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
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
Js四则运算函数代码
2012/07/21 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
jquery+json实现分页效果
2016/03/07 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
python rsa 加密解密
2017/03/20 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
大学军训感言
2014/01/10 职场文书
完美主义个人的自我评价
2014/02/17 职场文书
春节晚会主持词
2014/03/24 职场文书
申报材料格式
2014/12/30 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
董事长年会致辞
2015/07/29 职场文书
宾馆客房管理制度
2015/08/06 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android