js实现从中间开始往上下展开网页窗口的方法


Posted in Javascript onMarch 02, 2015

本文实例讲述了js实现从中间开始往上下展开网页窗口的方法。分享给大家供大家参考。具体分析如下:

这个是从中间然后慢慢向上下展开的页面显示效果,也还不错,代码如下:

<html>

<head>

<title>js从中间展开的网页窗口显示</title>

<style>

<!--

.intro{

position:absolute;

left:0;

top:0;

layer-background-color:yellow;

background-color:#336699;

border:0.1px solid #336699

}

-->

</style>

</head>

<body>

<div id="i1" class="intro"></div><div id="i2" class="intro"></div>

<script language="JavaScript1.2">

var speed=20

var temp=new Array()

var temp2=new Array()

if (document.layers){

for (i=1;i<=2;i++){

temp[i]=eval("document.i"+i+".clip")

temp2[i]=eval("document.i"+i)

temp[i].width=window.innerWidth

temp[i].height=window.innerHeight/2

temp2[i].top=(i-1)*temp[i].height

}

}

else if (document.all){

var clipbottom=document.body.offsetHeight/2,cliptop=0

for (i=1;i<=2;i++){

temp[i]=eval("document.all.i"+i+".style")

temp[i].width=document.body.clientWidth

temp[i].height=document.body.offsetHeight/2

temp[i].top=(i-1)*parseInt(temp[i].height)

}

}

function openit(){

window.scrollTo(0,0)

if (document.layers){

temp[1].bottom-=speed

temp[2].top+=speed

if (temp[1].bottom<=0)

clearInterval(stopit)

}

else if (document.all){

clipbottom-=speed

temp[1].clip="rect(0 auto+"+clipbottom+" 0)"

cliptop+=speed

temp[2].clip="rect("+cliptop+" auto auto)"

if (clipbottom<=0)

clearInterval(stopit)

}

}

function gogo(){

stopit=setInterval("openit()",100)

}

gogo()

</script>

</body>

</html>

希望本文所述对大家的Go语言程序设计有所帮助。

Javascript 相关文章推荐
location.href语句与火狐不兼容的问题
Jul 04 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
javascript时间函数大全
Jun 30 Javascript
JavaScript判断图片是否已经加载完毕的方法汇总
Feb 05 Javascript
轻松搞定js表单验证
Oct 13 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
vue监听对象及对象属性问题
Aug 20 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
uniapp微信小程序:key失效的解决方法
Jan 20 Javascript
适合后台管理系统开发的12个前端框架(小结)
Jun 29 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 #Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 #Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 #Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 #Javascript
JavaScript日期类型的一些用法介绍
Mar 02 #Javascript
了解Javascript的模块化开发
Mar 02 #Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 #Javascript
You might like
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP标准类(stdclass)用法示例
2016/09/28 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
php如何获取Http请求
2020/04/30 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
php 修改密码实现代码
2017/05/24 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
python2与python3共存问题的解决方法
2018/09/18 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
英语课前三分钟演讲稿
2014/08/19 职场文书
2014年班务工作总结
2014/12/02 职场文书
2015年项目工作总结
2015/04/29 职场文书
地道战观后感
2015/06/04 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis