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 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
vue的.vue文件是怎么run起来的(vue-loader)
Dec 10 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
JS+Canvas实现五子棋游戏
Aug 26 Javascript
vue el-upload上传文件的示例代码
Dec 21 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小马小结(方便查找后门的朋友)
2012/05/05 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
php实现可逆加密的方法
2015/08/11 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
js有序数组的连接问题
2013/10/01 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
微信开发 消息推送实现代码
2016/10/21 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
Python解惑之True和False详解
2017/04/24 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
django如何自己创建一个中间件
2019/07/24 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
工伤赔偿协议书
2014/04/15 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
公司承诺书范文
2014/05/19 职场文书
企业宣传标语
2014/06/09 职场文书
秋菊打官司观后感
2015/06/03 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书