基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
字体：[ ] 类型：转载 时间：
看到这种百叶窗效果的动画，以为是用flash做的，下面通过本文给大家介绍基于JavaScript实现百叶窗动画效果，需要的朋友参考下吧
看到这种什么百叶窗的动画，以为都是flash实现的，最近突然灵光一闪，想到了用js实现（虽然我不是做前端的，本人做.net）。代码虽然实现了，但是比较乱，先上个图：
　　一个js的动画，以前以为只有flash可以实现
代码主要就是一些数学的计算，然后结合html，css打造出类似flash的效果。
　　下面贴出主要的部分代码：
function all(books){
for(var i=;i&self.i++) {
for (var j = ; j & self. j++) {
if(!books[i][j])
function resetBooks(books){
for(var i=;i&self.i++) {
for (var j = ; j & self. j++) {
books[i][j]=
var self=this,timer=null,_iindex= ;
var initdir=[[[,],[,]],[[-,],[,]],[[,-],[-,]],[[,-],[,]],[[,-],[,],[,],[-,]]],dir=initdir[];
var weight=[,,,,];
var initpos=[[{x:,y:-}],[{x:self.columns-,y:-}],[{x:self.columns-,y:self.rows}],[{x:,y:self.rows}],[{x:self.columns/,y:self.rows/}]];
timer=setInterval(function(){
for(var i=;i&self.preDivs.i++){
var _div=null,x= ,y=;
for(var j=;j&dir.j++){
x=self.preDivs[i].x+dir[j][];
y=self.preDivs[i].y+dir[j][];
if(x&=&&y&=&&x&self.columns&&y&self.rows&&!self.books[y][x]){
self.books[y][x]=
_div=self.zzDivStatck[y][x];
n.push({x:x,y:y});
_div.style.backgroundImage = "url(" + self.zzImages[_iindex] + ")";
_div.style.backgroundPositionX = (-x * self.zzDivW) + "px ";
_div.style.backgroundPositionY = (-y * self.zzDivH) + "px";
self.preDivs=n;
if(all(self.books)){
resetBooks(self.books);
var _r=util.randomWeight(weight);
self.preDivs = initpos[_r];
dir=initdir[_r];
_iindex++;
if(_iindex&=+self.zzImages.length){
以上代码是使用javascript实现的百叶窗动画效果，希望对大家有所帮助！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具CSS+JS让页面产生百叶窗效果
html head titleCSS+JS让页面产生百叶窗效果丨芯晴网页特效丨/title style.intro { BACKGROUND-COLOR: BORDER-BOTTOM: green 0 BORDER-LEFT: green 0 BORDER-RIGHT: green 0 BORDER-TOP: green 0 LEFT: 0 POS
&title&CSS+JS让页面产生百叶窗效果丨芯晴网页特效丨&/title&
&style&.intro {
BACKGROUND-COLOR: BORDER-BOTTOM: green 0 BORDER-LEFT: green 0 BORDER-RIGHT: green 0 BORDER-TOP: green 0 LEFT: 0 POSITION: TOP: 0 layer-background-color: green
&style type=&text/css&&BODY {
FONT-FAMILY: &宋体&; FONT-SIZE: 9 MARGIN-LEFT: 0 MARGIN-RIGHT: 0 MARGIN-TOP: 0px
COLOR: FONT-SIZE: 9 FONT-WEIGHT: 400; TEXT-DECORATION: none
COLOR: FONT-SIZE: 9 FONT-WEIGHT: 400; TEXT-DECORATION: underline
A:active {
COLOR: #ff0033; CURSOR: FONT: 9pt &宋体&
&meta content=&text/ charset=gb2312& http-equiv=&Content-Type&&
&body bgColor=&#800000&&
&div class=&intro& id=&i1&&&/div&&div class=&intro& id=&i2&&&/div&&div class=&intro&
id=&i3&&&/div&&div class=&intro& id=&i4&&&/div&&div class=&intro& id=&i5&&&/div&&div
class=&intro& id=&i6&&&/div&&div class=&intro& id=&i7&&&/div&&div class=&intro& id=&i8&&&/div&&script
language=&javascript&&
var speed=30
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)
&title&网页特效收集||---页面漫天飞雪&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
&body bgcolor=&#000000& onLoad=&snow()&&
&script language=&JavaScript&&
Y = new Array();
X = new Array();
S = new Array();
A = new Array();
B = new Array();
M = new Array();
V = (document.layers)?1:0;
iH=(document.layers)?window.innerHeight:window.document.body.clientH
iW=(document.layers)?window.innerWidth:window.document.body.clientW
for (i=0; i & N; i++){
Y[i]=Math.round(Math.random()*iH);
X[i]=Math.round(Math.random()*iW);
S[i]=Math.round(Math.random()*5+2);
B[i]=Math.random()*0.1+0.1;
M[i]=Math.round(Math.random()*1+1);
for (i = 0; i & N; i++)
{document.write(&&LAYER NAME='sn&+i+&' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,&+M[i]+&,&+M[i]+&'&&/LAYER&&)}
document.write('&div style=&position:top:0left:0px&&');
document.write('&div style=&position:relative&&');
for (i = 0; i & N; i++)
{document.write('&div id=&si& style=&position:top:0;left:0;width:'+M[i]+';height:'+M[i]+';background:#fffff0;font-size:'+M[i]+'&&&/div&')}
document.write('&/div&&/div&');
function snow(){
var H=(document.layers)?window.innerHeight:window.document.body.clientH
var W=(document.layers)?window.innerWidth:window.document.body.clientW
var T=(document.layers)?window.pageYOffset:document.body.scrollT
var L=(document.layers)?window.pageXOffset:document.body.scrollL
for (i=0; i & N; i++){
sy=S[i]*Math.sin(90*Math.PI/180);
sx=S[i]*Math.cos(A[i]);
if (Y[i] & H){
X[i]=Math.round(Math.random()*W);
M[i]=Math.round(Math.random()*1+1);
S[i]=Math.round(Math.random()*5+2);
if (V){document.layers['sn'+i].left=X[i];document.layers['sn'+i].top=Y[i]+T}
else{si[i].style.pixelLeft=X[i];si[i].style.pixelTop=Y[i]+T}
A[i]+=B[i];
setTimeout('snow()',10);
&script language=&Javascript&&
function selectAll(theField){
var tempval=eval(&document.&+theField)
tempval.focus()
tempval.select()
&br&&br&&hr&&p align=&center&&&font color=black&本特效由 &a href=&& target=&_blank&&芯晴网页特效&/a&丨 收集于互联网，只为兴趣与学习交流，不作商业用途。&/font&&/p&
提示：可以先修改部分代码后再运行
（本文由 |芯晴网页特效 收集丨）
文章地址：/article-123-1.html
------分隔线----------------------------
jQuery页面右上角的折角广告效果丨芯晴网页特效束 所需...
这应该算是一个布局方面的技巧吧，借助jquery插件还是蛮灵活就...
一个类似于百度的分页足迹效果，基于jquery，原理就是所有为奇...
运用了所学习的jQuery特性，制作了这款效果，该效果集结了返回...
本来想用css3来实现，但后来脑袋一热就用了js，省的别人你ie怎...
新闻页，当显示内容区域的时候能否通过JS强制先显示几秒钟广...基于jQuery焦点图百叶窗效果切换-JavaScript_网络编程-脚本宝典
页面导航： >
> 基于jQuery焦点图百叶窗效果切换
基于jQuery焦点图百叶窗效果切换
基于jQuery焦点图百叶窗效果切换。这是一款带各种百叶窗过渡效果的jQuery幻灯片插件。效果图如下： 实现的代码。 html代码： divclass=htmleaf-containerdivclass=sliderulclass=slider-mainliimgsrc=image
基于jQuery焦点图百叶窗效果切换。这是一款带各种百叶窗过渡效果的jQuery幻灯片插件。效果图如下：实现的代码。html代码：&div&class=&htmleaf-container&&
&&&&&&&&div&class=&slider&&
&&&&&&&&&&&&ul&class=&slider-main&&
&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&img&src=&images/1.jpg&&alt=&&&
&&&&&&&&&&&&&&&&/li&
&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&img&src=&images/2.jpg&&alt=&&&
&&&&&&&&&&&&&&&&/li&
&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&img&src=&images/3.jpg&&alt=&&&
&&&&&&&&&&&&&&&&/li&
&&&&&&&&&&&&&&&&li&
&&&&&&&&&&&&&&&&&&&&img&src=&images/4.jpg&&alt=&&&
&&&&&&&&&&&&&&&&/li&
&&&&&&&&&&&&/ul&
&&&&&&&&/div&
&&&&script&src=&js/jquery-2.1.1.min.js&&type=&text/javascript&&&/script&
&&&&script&src=&js/osSlider.js&&&/script&
&&&&script&type=&text/javascript&&
&&&&&&&var&slider&=&new&osSlider({&//开始创建效果
&&&&&&&&&&&pNode:&'.slider',&//容器的选择器&必填
&&&&&&&&&&&cNode:&'.slider-main&li',&//轮播体的选择器&必填
&&&&&&&&&&&speed:&3000,&//速度&默认3000&可不填写
&&&&&&&&&&&autoPlay:&true&//是否自动播放&默认true&可不填写
&&&&&&&});
&&&&/script&
本文链接：
最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具