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 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
Mar 11 Javascript
jquery 模板的应用示例
Nov 12 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
javascript封装的sqlite操作类实例
Jul 17 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 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记录代码执行时间(实现代码)
2013/07/05 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
DWR Ext 加载数据
2009/03/22 Javascript
Javascript中arguments和arguments.callee的区别浅析
2015/04/24 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
2016/01/05 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
jquery延迟对象解析
2016/10/26 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
pandas DataFrame运算的实现
2020/06/14 Python
解决c++调用python中文乱码问题
2020/07/29 Python
一道输出判断型Java面试题
2014/10/01 面试题
校园报刊亭的创业计划书
2014/01/02 职场文书
打架检讨书800字
2014/01/10 职场文书
劳动之星获奖感言
2014/02/01 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
2014年实习生工作总结
2014/11/27 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
Python os和os.path模块详情
2022/04/02 Python
MySQL常用慢查询分析工具详解
2022/08/14 MySQL