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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
如何利用vue实现波谱拟合详解
Nov 05 Javascript
解决vue init webpack 下载依赖卡住不动的问题
Nov 09 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预定义常量
2006/12/25 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
python操作CouchDB的方法
2014/10/08 Python
Python psutil模块简单使用实例
2015/04/28 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
详解Python进程间通信之命名管道
2017/08/28 Python
python交互式图形编程实例(一)
2017/11/17 Python
Python中常用的内置方法
2019/01/28 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
《中华少年》教学反思
2014/02/15 职场文书
颁奖晚会主持词
2014/03/25 职场文书
我的祖国演讲稿
2014/05/04 职场文书
留学生求职信
2014/06/03 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android