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 相关文章推荐
JQuery动态创建DOM、表单元素的实现代码
Aug 09 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
angular2使用简单介绍
Mar 01 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
《PHP边学边教》(01.开篇――准备工作)
2006/12/13 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
做网页的一些技巧
2007/02/01 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
vue内置指令详解
2018/04/03 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
Python实现批量下载图片的方法
2015/07/08 Python
python logging 日志的级别调整方式
2020/02/21 Python
Django基于客户端下载文件实现方法
2020/04/21 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
会计系中文个人求职信
2013/12/24 职场文书
学生评语大全
2014/04/18 职场文书
大学自主招生推荐信
2014/05/10 职场文书
班组建设经验交流材料
2014/05/12 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
收入证明范本
2015/06/12 职场文书