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 相关文章推荐
学习YUI.Ext第五日--做拖放Darg&amp;Drop
Mar 10 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
javascript随机变色实例代码
Oct 15 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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 htmlspecialchars加强版
2010/02/16 PHP
php in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
php生成短域名函数
2015/03/23 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
nginx下安装php7+php5
2016/07/31 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
js尾调用优化的实现
2019/05/23 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
Paradox London官方网站:英国新娘鞋婚礼鞋品牌
2019/08/29 全球购物
动态密码技术
2012/10/18 面试题
社团成立邀请函
2014/01/08 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
年终奖发放方案
2014/06/02 职场文书
奖励通知
2015/04/22 职场文书
个人收入证明范本
2015/06/12 职场文书
《法国号》教学反思
2016/02/22 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android