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 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
javascript继承机制实例详解
Nov 20 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 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初学者(入门学习经验谈)
2010/10/12 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP解密Unicode及Escape加密字符串
2015/05/17 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
javascript学习之json入门
2016/12/22 Javascript
javascript实现右下角广告框效果
2017/02/01 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
浅谈在node.js进入文件目录的问题
2018/05/13 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python单元测试unittest实例详解
2015/05/11 Python
Python爬取网易云音乐热门评论
2017/03/31 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
django rest framework 自定义返回方式
2020/07/12 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
酒店管理毕业生自荐信
2013/10/24 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
教师个人考察材料
2014/12/16 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书