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 全等号运算符使用说明
May 31 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
json数据与字符串的相互转化示例
Sep 18 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
AngularJS基础 ng-csp 指令详解
Aug 01 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
Vue中的无限加载vue-infinite-loading的方法
Apr 08 Javascript
Vue实现日历小插件
Jun 26 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
php实现paypal 授权登录
2015/05/28 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
整理Python最基本的操作字典的方法
2015/04/24 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Python格式化日期时间操作示例
2018/06/28 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
详解CSS3 用border写 空心三角箭头 (两种写法)
2017/09/29 HTML / CSS
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
房地产财务部员工岗位职责
2014/03/12 职场文书
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
领导干部保密承诺书
2014/08/30 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
运动会主持人开幕词
2016/03/04 职场文书