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 相关文章推荐
js模拟滚动条(横向竖向)
Feb 22 Javascript
JQuery设置和去除disabled属性的5种方法总结
May 16 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
简单的js计算器实现
Oct 26 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 Javascript
js实现页面图片消除效果
Mar 24 Javascript
js观察者模式的弹幕案例
Nov 23 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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生成静态HTML速度快类库
2007/03/18 PHP
php 异常处理实现代码
2009/03/10 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
smarty中js的调用方法示例
2014/10/27 PHP
使用PHP生成二维码的方法汇总
2015/07/22 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
jquery默认校验规则整理
2014/03/24 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
vue中mint-ui的使用方法
2018/04/04 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
简单实现python爬虫功能
2015/12/31 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
美术教师岗位职责
2014/03/18 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
好人好事新闻稿
2015/07/17 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技