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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 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 用数组降低程序的时间复杂度
2009/12/04 PHP
基于php 随机数的深入理解
2013/06/05 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
ES6新特性五:Set与Map的数据结构实例分析
2017/04/21 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
Vuex的API文档说明详解
2020/02/05 Javascript
[01:08]2014DOTA2展望TI 剑指西雅图LGD战队专访
2014/06/30 DOTA
Python3中多线程编程的队列运作示例
2015/04/16 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
python中如何进行连乘计算
2020/05/28 Python
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
一道输出判断型Java面试题
2014/10/01 面试题
浪漫婚礼主持词
2014/03/14 职场文书
授权委托书怎么写
2014/04/03 职场文书
优秀志愿者感言
2015/08/01 职场文书
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android
详解flex:1什么意思
2022/07/23 HTML / CSS