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 prototype,executing,context,closure
Dec 24 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
文本框input聚焦失焦样式实现代码
Oct 12 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
May 10 Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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下封装较好的数字分页方法
2010/11/23 PHP
浅谈使用 Yii2 AssetBundle 中 $publishOptions 的正确姿势
2017/11/08 PHP
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
如何用Python合并lmdb文件
2018/07/02 Python
python内置函数sorted()用法深入分析
2019/10/08 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
Python 实现微信自动回复的方法
2020/09/11 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
Noon埃及:埃及在线购物
2019/11/26 全球购物
仓库门卫岗位职责
2013/12/22 职场文书
汇源肾宝广告词
2014/03/20 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
建党伟业的观后感
2015/06/01 职场文书