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取得iframe中元素的几种方法
Jul 04 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
Jan 02 Javascript
Javascript 实现复制(Copy)动作方法大全
Jun 20 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
Dec 02 Javascript
AngularJS手动表单验证
Feb 01 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
vue.js click点击事件获取当前元素对象的操作
Aug 07 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作的文本留言本的例子(四)
2006/10/09 PHP
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
asp.net和php的区别点总结
2019/10/10 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
js Date概念详细介绍
2013/11/22 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
wxPython 入门教程
2008/10/07 Python
Python实现登录接口的示例代码
2017/07/21 Python
详解python实现线程安全的单例模式
2018/03/05 Python
详解django.contirb.auth-认证
2018/07/16 Python
使用TensorFlow实现SVM
2018/09/06 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
旷工检讨书大全
2015/08/15 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android