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实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
jQuery EasyUI 的EasyLoader功能介绍
Sep 12 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
js+cavans实现图片滑块验证
Sep 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
深入了解php4(2)--重访过去
2006/10/09 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
关于crontab的使用详解
2013/06/24 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
js的一些常用方法小结
2011/06/29 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
2018/11/07 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
Python搭建Spark分布式集群环境
2019/07/05 Python
Python文件路径名的操作方法
2019/10/30 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
pytorch 实现删除tensor中的指定行列
2020/01/13 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
pandas数据拼接的实现示例
2020/04/16 Python
如何使用PyCharm将代码上传到GitHub上(图文详解)
2020/04/27 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
信息系统专业个人求职信范文
2013/12/07 职场文书
大学军训感言600字
2014/02/25 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
Kubernetes关键组件与结构组成介绍
2022/03/31 Servers