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 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
常用的JavaScript WEB操作方法分享
Feb 28 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
JavaScript实现简单验证码
Aug 24 Javascript
JavaScript仿京东轮播图效果
Feb 25 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的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
利用PHP访问MySql数据库的逻辑操作以及增删改查的实例讲解
2017/08/30 PHP
使用jQuery的将桌面应用程序引入浏览器
2010/11/19 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
javascript实现类似超链接的效果
2014/12/26 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Android基于TCP和URL协议的网络编程示例【附demo源码下载】
2018/01/23 Python
Python实现二维数组输出为图片
2018/04/03 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
证券期货行业个人的自我评价
2013/12/26 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
文化活动实施方案
2014/03/28 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
党员干部一句话承诺
2014/05/30 职场文书
安阳殷墟导游词
2015/02/10 职场文书
入党自荐书范文
2015/03/05 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
干部外出学习心得体会
2016/01/18 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
接收函
2019/04/22 职场文书