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 动态将数字金额转化为中文大写金额
May 14 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
jQuery中 $ 符号的冲突问题及解决方案
Nov 04 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
详解jQuery中的easyui
Sep 02 jQuery
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
vue使用nprogress实现进度条
Dec 09 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数据库原有字段后增加新内容
2009/11/26 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
javascript 运算数的求值顺序
2011/08/23 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
javascript中Object使用详解
2015/01/26 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
js时间控件只显示年月
2017/01/08 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
python3+requests接口自动化session操作方法
2018/10/13 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
《王二小》教学反思
2014/02/27 职场文书
小学生学习感言
2014/03/10 职场文书
节能减排倡议书
2014/04/15 职场文书
团队精神口号
2014/06/06 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
python接口测试返回数据为字典取值方式
2022/02/12 Python
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS