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 相关文章推荐
vs2003 js文件编码问题的解决方法
Mar 20 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
Node.js使用NodeMailer发送邮件实例代码
Mar 06 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
layer 关闭指定弹出层的例子
Sep 25 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实现aes加密类分享
2014/02/16 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
动手学习无线电
2021/03/10 无线电
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
Js基础学习资料
2010/11/23 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
js鼠标点击图片切换效果代码分享
2015/08/26 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
轻松掌握JavaScript中的Math object数学对象
2016/05/26 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
angularJS开发注意事项
2018/05/26 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
python中的闭包用法实例详解
2015/05/05 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Python模块相关知识点小结
2020/03/09 Python
django model object序列化实例
2020/03/13 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
2014小学数学教研组工作总结
2014/12/06 职场文书
高考诚信考试承诺书
2015/04/29 职场文书