首页 / 编程技术 / JavaScript / 教程详解

【flash】JavaScript 类似flash效果的立体图片浏览器-立体图片浏览器

时间:2016-02-12 13:11 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【JavaScript 类似flash效果的立体图片浏览器】，下面是详细的讲解！

JavaScript 类似flash效果的立体图片浏览器

<style type="text/css">
//图片浏览器容器
#container{position:absolute;}
#container img{position:absolute;}
//半透明遮罩层样式
.mask2{
background:#99FF00;
opacity:0.3;
filter:Alpha(Opacity='30');
position:absolute;
}
//颜色更深的半透明遮罩层样式
.mask{
background:#99FF00;
opacity:0.3;
filter:Alpha(Opacity='50');
position:absolute;
}
</style>
<body>
<div id="container">

<img src="http://www.jb51.net/article/j1.jpg" style="left:-25px; top:85px; width:50px; height:50px;" onclick="JavaScript:showImg(-1)"/>

<img id="img01" style="z-index:4; left:31px; top:63px; width:74px; height:74px;" onclick="JavaScript:showImg(2)"/>

<div class="mask" style="z-index:4; left:31px; top:63px; width:74px; height:74px;"></div>

<img id="img02" style="z-index:5; left:71px; top:32px; width:138px; height:138px;" onclick="JavaScript:showImg(1)"/>

<div class="mask2" style="z-index:5; left:71px; top:32px; width:138px; height:138px;"></div>

<img id="img03" style="z-index:6; left:151px; top:0px; width:198px; height:198px;" onclick="JavaScript:showImg(0)"/>

<img id="img04" style="z-index:5; left:291px; top:32px; width:138px; height:138px;" onclick="JavaScript:showImg(-1)"/>

<div class="mask2" style="z-index:5; left:291px; top:32px; width:138px; height:138px;"></div>

<img id="img05" style="z-index:4; left:395px; top:64px; width:74px; height:74px;" onclick="JavaScript:showImg(-2)"/>

<div class="mask" style="z-index:4; left:395px; top:64px; width:74px; height:74px;"></div>

<img src="http://www.jb51.net/article/j2.jpg" style="left:486px; top:85px; width:50px; height:50px;" onclick="JavaScript:showImg(1)"/>
</div>
<script>
//图片列表数组
var imgArray=new Array();
imgArray[0]="1.jpg";
imgArray[1]="2.jpg";
imgArray[2]="3.jpg";
imgArray[3]="4.jpg";
imgArray[4]="5.jpg";
imgArray[5]="6.jpg";
imgArray[6]="7.jpg";
imgArray[7]="8.jpg";
imgArray[8]="9.jpg";
imgArray[9]="10.jpg";
//默认显示的图片序号
var base=0;
//通过制定偏移量来显示数组顺序中的前或者后的几张图片，offset参数为偏移量
function showImg(offset){
base=(base-offset)%imgArray.length;
//显示从base号开始的5个图片
for(var i=base;i<base+5;i++){
var img=document.getElementById("img0"+(i-base+1));
//判断图片是否从前往后循环显示
if(i<0){img.src=http://www.jb51.net/article/imgArray[imgArray.length+i];}
//判断图片是否从后往前循环显示
else if(i>(imgArray.length-1)){img.src=http://www.jb51.net/article/imgArray[i-imgArray.length];}
else {img.src=http://www.jb51.net/article/imgArray[i];}
}
}
//初始化图片浏览器中的图片
function initImg(){
showImg(3);
}
//页面加载后调用
window.onload=initImg();
</script>
</body>
function initimg(){
showImg(3);
}
window.onload=initimg();
</script>
</body>

关于JavaScript 类似flash效果的立体图片浏览器的用户互动如下：

　　相关问题：flash怎么做出这种立体翻转的效果

　　答：flash是平面设计软件，不具备3D能力，当然也可以模拟3D翻转效果，不过很假的请看实例 >>详细

　　相关问题：怎样用FLASH做一个图片围着一个物体转的立体效果？

　　答：用引导加遮罩勉强可以。因为我不知道你要做什么样的立体感。用引导加遮罩可以出来绕着物体转的效果。 >>详细

　　相关问题：网页上的图片浏览啊那种效果是就用flash制作出来的...

　　答：你说的效果不是用flash做的，是用javascript编程制作的。要想简单应用，可以找jquery的图片显示代码，有很多不错的效果。 >>详细

<上一篇下一篇>

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

我爱IT技术网专注编程技术和教育培训，助你提升自我价值！
Copyright © 2012-2017 我爱IT技术网 (www.52ij.com) 版权所有。
郑重声明：未经许可，本站任何技术教程不得转载。我爱IT技术网教育平台QQ交流群：6538112 皖ICP备10017427号