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 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
vue写一个组件
Apr 09 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
微信小程序实现文件预览
Oct 22 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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
python的类方法和静态方法
2014/12/13 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
在python中pandas读文件,有中文字符的方法
2018/12/12 Python
python retrying模块的使用方法详解
2019/09/25 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python celery原理及运行流程解析
2020/06/13 Python
linux面试题参考答案(7)
2012/10/29 面试题
新闻编辑专业自荐信
2014/07/02 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
企业法人任命书
2015/09/21 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
Python学习开发之图形用户界面详解
2021/08/23 Python
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript