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 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
深入浅析var,let,const的异同点
Aug 07 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
JavaScript实现多文件下载方法解析
Aug 07 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
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
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
超清晰的document对象详解
2007/02/27 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[05:23]DOTA2-DPC中国联赛2月1日Recap集锦
2021/03/11 DOTA
Python 文件操作实现代码
2009/10/07 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
Python自动化测试Eclipse+Pydev 搭建开发环境
2016/08/15 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
春秋淹城导游词
2015/02/11 职场文书
525心理健康活动总结
2015/05/08 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
Python实现简单的猜单词
2021/06/15 Python
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android