js实现绿白相间竖向网页百叶窗动画切换效果


Posted in Javascript onMarch 02, 2015

本文实例讲述了js实现绿白相间竖向网页百叶窗动画切换效果。分享给大家供大家参考。具体分析如下:

前面我们讲解了一个网页百叶窗切换动画效果,不过是横向百叶窗,这个是竖向百叶窗,代码基本一样:

<html>

<head>

<title>百叶窗页面切换效果</title>

<style>

<!--

.intro{

position:absolute;

left:0;

top:0;

layer-background-color:green;

background-color:green;

border:0.1px solid green

}

-->

</style>

</head>

<body>

<div id="i1" class="intro"></div><div id="i2" class="intro"></div><div id="i3"

class="intro"></div><div id="i4" class="intro"></div><div id="i5" class="intro"></div><div

id="i6" class="intro"></div><div id="i7" class="intro"></div><div id="i8" 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<=8;i++){

temp[i]=eval("document.i"+i+".clip")

temp2[i]=eval("document.i"+i)

temp[i].width=window.innerWidth/8-0.3

temp[i].height=window.innerHeight

temp2[i].left=(i-1)*temp[i].width

}

}

else if (document.all){

var clipbottom=document.body.offsetHeight,cliptop=0

for (i=1;i<=8;i++){

temp[i]=eval("document.all.i"+i+".style")

temp[i].width=document.body.clientWidth/8

temp[i].height=document.body.offsetHeight

temp[i].left=(i-1)*parseInt(temp[i].width)

}

}

function openit(){

window.scrollTo(0,0)

if (document.layers){

for (i=1;i<=8;i=i+2)

temp[i].bottom-=speed

for (i=2;i<=8;i=i+2)

temp[i].top+=speed

if (temp[2].top>window.innerHeight)

clearInterval(stopit)

}

else if (document.all){

clipbottom-=speed

for (i=1;i<=8;i=i+2){

temp[i].clip="rect(0 auto+"+clipbottom+" 0)"

}

cliptop+=speed

for (i=2;i<=8;i=i+2){

temp[i].clip="rect("+cliptop+" auto auto)"

}

if (clipbottom<=0)

clearInterval(stopit)

}

}

function gogo(){

stopit=setInterval("openit()",100)

}

gogo()

</script>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript Window及document对象详细整理
Jan 12 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
May 03 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
js判断某个字符出现的次数的简单实例
Jun 03 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 #Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 #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
You might like
PHP+DBM的同学录程序(5)
2006/10/09 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
jQuery实现个性翻牌效果导航菜单的方法
2015/03/09 Javascript
js设置文字颜色的方法示例
2016/12/30 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
Django中使用Celery的方法步骤
2020/12/07 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
董事长岗位职责
2013/11/30 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
农林环境专业求职信
2014/03/13 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
副总经理岗位职责范本
2014/09/30 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
股份转让协议书范本
2015/01/27 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
经费申请报告
2015/05/15 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书