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 相关文章推荐
JSQL 批量图片切换的实现代码
May 05 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
js/jquery去掉空格,回车,换行示例代码
Nov 05 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
JS canvas实现画板和签字板功能
Feb 23 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
Windows下的PHP5.0详解
2006/11/18 PHP
php $_ENV为空的原因分析
2009/06/01 PHP
php+highchats生成动态统计图
2014/05/21 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
Laravel validate error处理,ajax,json示例
2019/10/25 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
用director.js实现前端路由使用实例
2017/01/27 Javascript
详解nodeJS中读写文件方法的区别
2017/03/06 NodeJs
前端开发之CSS原理详解
2017/03/11 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python通用循环的构造方法实例分析
2018/12/19 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
python requests证书问题解决
2019/09/05 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
使用python计算三角形的斜边例子
2020/04/15 Python
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
采购助理岗位职责
2014/02/16 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
教师演讲稿开场白
2014/08/25 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
2014年食堂工作总结
2014/11/20 职场文书
教师党员个人总结
2015/02/10 职场文书
《落花生》教学反思
2016/02/16 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
python实现Nao机器人的单目测距
2021/09/04 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers