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获得参数的getParameter使用示例
Feb 26 Javascript
Jquery使用val方法读写value值
May 18 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
详谈javascript异步编程
Feb 21 Javascript
原生js实现放大镜效果
Jan 11 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
python实现的文件夹清理程序分享
2014/11/22 Python
简单使用Python自动生成文章
2014/12/25 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
详解Python中的动态属性和特性
2018/04/07 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
学校安全管理责任书
2014/07/23 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle