js实现横向百叶窗效果网页切换动画效果的方法


Posted in Javascript onMarch 02, 2015

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

这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到网页全部显示完全。代码如下:

<html>

<head>

<title>js网页百叶窗动态切换效果</title>

<style>

<!--

.intro{

position:absolute;

left:0;

top:0;

layer-background-color:blue;

background-color:blue;

border:0.1px solid blue

}

-->

</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

temp[i].height=window.innerHeight/8

temp2[i].top=(i-1)*temp[i].height

}

}

else if (document.all){

var clipright=document.body.clientWidth,clipleft=0

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

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

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

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

temp[i].top=(i-1)*parseInt(temp[i].height)

}

}

function openit(){

window.scrollTo(0,0)

if (document.layers){

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

temp[i].right-=speed

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

temp[i].left+=speed

if (temp[2].left>window.innerWidth)

clearInterval(stopit)

}

else if (document.all){

clipright-=speed

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

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

}

clipleft+=speed

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

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

}

if (clipright<=0)

clearInterval(stopit)

}

}

function gogo(){

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

}

gogo()

</script>

</body>

</html>

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

Javascript 相关文章推荐
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
我的Node.js学习之路(二)NPM模块管理
Jul 06 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
vue 监听屏幕高度的实例
Sep 05 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
了解Javascript的模块化开发
Mar 02 #Javascript
You might like
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
python中csv文件的若干读写方法小结
2018/07/04 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
python中if嵌套命令实例讲解
2021/02/25 Python
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
销售文员岗位职责
2013/11/29 职场文书
品质管理部岗位职责范文
2014/03/01 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
分居协议书范本
2014/11/03 职场文书
活着观后感
2015/06/03 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang