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 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
js 小贴士一星期合集
Apr 07 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
易操作的jQuery表单提示插件
Dec 01 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
微信小程序实现同时上传多张图片
Feb 03 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
smarty实例教程
2006/11/19 PHP
PHP生成静态页
2006/11/25 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
基于jquery的Repeater实现代码
2010/07/17 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
详解Python发送email的三种方式
2018/10/18 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
python中的句柄操作的方法示例
2019/06/20 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
集体备课反思
2014/02/12 职场文书
防暑降温通知书
2015/04/27 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
pytorch中的 .view()函数的用法介绍
2022/03/17 Python