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学习网址备忘
May 29 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
js 加载时自动调整图片大小
May 28 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
原生js和css实现图片轮播效果
Feb 07 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
8个JS的reduce使用实例和reduce操作方式
Oct 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处理单文件、多文件上传代码分享
2016/08/24 PHP
PHP实现验证码校验功能
2017/11/16 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
用console.table()调试javascript
2014/09/04 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
electron制作仿制qq聊天界面的示例代码
2018/11/26 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
深入理解Python中命名空间的查找规则LEGB
2015/08/06 Python
Python中字符串的格式化方法小结
2016/05/03 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
行政管理人员精品工作推荐信
2013/11/04 职场文书
开工仪式主持词
2014/03/20 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL
浅谈Python中的正则表达式
2021/06/28 Python
Python学习之os包使用教程详解
2022/03/21 Python
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技