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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
Ext 今日学习总结
Sep 19 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
JS 数字转换研究总结
Dec 26 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
Aug 31 Javascript
微信小程序实现购物车功能
Nov 18 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
使用dump函数,给php加断点测试
2013/06/25 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
原生js封装添加class,删除class的实例
2017/11/06 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
2019/09/18 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
关于Js中new操作符的作用详解
2021/02/21 Javascript
解决Python中字符串和数字拼接报错的方法
2016/10/23 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
python关于倒排列的知识点总结
2020/10/13 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
Python datetime模块的使用示例
2021/02/02 Python
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
教师自我反思材料
2014/02/14 职场文书
教堂婚礼主持词
2014/03/14 职场文书
家教广告词
2014/03/19 职场文书
某某同志考察材料
2014/05/28 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server
Hive导入csv文件示例
2022/06/25 数据库