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 中文字符串处理额外注意事项
Nov 15 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
js同源策略详解
May 21 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
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中实现获取随机数组列表的自定义函数
2015/04/02 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
jQuery无刷新上传之uploadify简单代码
2017/01/17 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
基于Bootstrap实现城市三级联动
2017/11/23 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
Cordova(ionic)项目实现双击返回键退出应用
2019/09/17 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
python TCP Socket的粘包和分包的处理详解
2018/02/09 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
Python秒算24点实现及原理详解
2019/07/29 Python
详解django实现自定义manage命令的扩展
2019/08/13 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Keras模型转成tensorflow的.pb操作
2020/07/06 Python
2015社区个人工作总结范文
2015/05/13 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android