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 相关文章推荐
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
window.open的功能全解析
Oct 10 Javascript
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
基于jQuery实现Tabs选项卡自定义插件
Nov 21 Javascript
js实现前端分页页码管理
Jan 06 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
AngularJS表单验证功能
Oct 19 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
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
php生成静态页面的简单示例
2014/04/17 PHP
解决laravel 5.1报错:No supported encrypter found的办法
2017/06/07 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
bootstrap时间插件daterangepicker使用详解
2017/10/19 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
Python中类的初始化特殊方法
2017/12/01 Python
Python实现将HTML转成PDF的方法分析
2019/05/04 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
CSS3制作3D立方体loading特效
2020/11/09 HTML / CSS
美国购车网站:TrueCar
2016/10/19 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
采购主管工作职责
2013/12/12 职场文书
住房公积金接收函
2014/01/09 职场文书
高中军训感言200字
2014/02/23 职场文书
《满井游记》教学反思
2014/02/26 职场文书
投标担保书范文
2014/04/02 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
代理词怎么写
2015/05/25 职场文书
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers