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 学习6 操纵元素显示效果的函数
Feb 07 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
javascript折半查找详解
Jan 26 Javascript
jQuery获取样式中颜色值的方法
Jan 29 Javascript
JS实现瀑布流布局
Oct 21 Javascript
实例教学如何写vue插件
Nov 30 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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
如何利用http协议发布博客园博文评论
2015/08/03 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
Python yield的用法实例分析
2020/03/06 Python
django API 中接口的互相调用实例
2020/04/01 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
2014/02/10 HTML / CSS
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
请假条的格式
2014/04/11 职场文书
生产车间标语
2014/06/11 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
产品调价通知函
2015/04/20 职场文书
劳动仲裁调解书
2015/05/20 职场文书
茶花女读书笔记
2015/06/29 职场文书
感恩父母主题班会
2015/08/12 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python