繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 类似flash效果的立体图片浏览器
- Javascript
- 用jquery ajax获取网站Alexa排名的代码
- jQuery Selectors(选择器)的使用(九、表单对象属性篇)
- javascript 数组使用方法汇总
- 用于CSS代码压缩与格式化的javascript函数代码
- ExtJS下grid的一些属性说明
- javascript 强制刷新页面的实现代码
- js 加载并解析XML字符串的代码
- jquery提示 "object expected"的解决方法
- 页面中iframe相互传值传参
- jQuery 行背景颜色的交替显示(隔行变色)实现代码
- 魔方在线秒表javascript版
- JavaScript 字符串与数组转换函数[不用split与join]
- javascript与asp.net(c#)互相调用方法
- javascript下搜索子字符串的的实现代码(脚本之家修正版)
- JQuery下关于$.Ready()的分析
- input 日期选择功能的javascript代码
- js 页面传参数时 参数值含特殊字符的问题
- 读取table内容的javascript代码
- 最简单的javascript对象实例代码
- JQuery Tips(2) 关于$()包装集你不知道的
Javascript 中的 JavaScript 类似flash效果的立体图片浏览器
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-02-27 浏览: 329 ::
收藏到网摘: n/a
这是一款比较有立体感的图片浏览器，通过图层定位技术z-index让浏览器正在查看的图片突显出来，并让两边的图片呈现半透明状态。很个性化哦！ PS:显示效果图，大家可以根据自己的需求调整图片的样式哦
代码
复制代码 代码如下:
<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="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="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 = imgArray[imgArray.length+i];}
//判断图片是否从后往前循环显示
else if(i>(imgArray.length-1)){img.src=imgArray[i-imgArray.length];}
else {img.src=imgArray[i];}
}
}
//初始化图片浏览器中的图片
function initImg(){
showImg(3);
}
//页面加载后调用
window.onload=initImg();
</script>
</body>
function initimg(){
showImg(3);
}
window.onload=initimg();
</script>
</body>
评论 (0) All
