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 相关文章推荐
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
微信小程序单选框自定义赋值
May 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
php设计模式 Factory(工厂模式)
2011/06/26 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
JavaScript 私有成员分析
2009/01/13 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
JavaScript从数组中删除指定值元素的方法
2015/03/18 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
详解react-redux插件入门
2018/04/19 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
Python实现的矩阵类实例
2017/08/22 Python
python实现随机漫步方法和原理
2019/06/10 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
django 实现简单的插入视频
2020/04/07 Python
python中如何进行连乘计算
2020/05/28 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
团代会主持词
2014/04/02 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
辞职信标准格式
2015/02/27 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android