当前位置：首页 > news >正文

设计图片绘制的展现

news 来源：原创 2024/5/2 18:41:57

这一款图片的绘计，来进行应用和展现图片，从中起到很好的效果，荐写以参考和学习，从中可以得到启发和帮助;与其图片组展示方式，在IE6浏览器中进行滤镜透明方式来展现，突出了IE6与火狐浏览器的测试应用程度与支持。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div id='container'>
<img src="left.png" style="left:-5px;top:85px;" onclick="javascript:showImg(-1)" />
<img id="img01" style="z-index:4;left:31px;top:63px;width:74px;height:74px"/>
<div class='mask2' style="z-index:4;left:31px;top:63px;width:74px;height:74px" onclick="javascript:showImg(2)" >
</div>
<img id="img02" style="z-index:5;left:71px;top:32px;width:138px;height:138px" />
<div class='mask' style="z-index:5;left:71px;top:32px;width:138px;height:138px" onclick="javascript:showImg(1)"/>
</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" />
<div class='mask' style="z-index:5;left:291px;top:32px;width:138px;height:138px" onclick="javascript:showImg(-1)" />
</div>
<img id="img05" style="z-index:4;left:395px;top:64px;width:74px;height:74px"/>
<div class='mask2' style="z-index:4;left:395px;top:64px;width:74px;height:74px" onclick="javascript:showImg(-2)" />
</div>
<img src="right.png" style="left:486px;top:85px;" onclick="javascript:showImg(1)" />
</div>
<script type="text/javascript">
//图片列表数组
var imgArray = new Array();
imgArray[0] = "1.png";
imgArray[1] = "2.png";
imgArray[2] = "3.png";
imgArray[3] = "4.png";
imgArray[4] = "5.png";
imgArray[5] = "6.png";
imgArray[6] = "7.png";
imgArray[7] = "8.png";
imgArray[8] = "9.png";
imgArray[9] = "10.png";
//默认显示的图片序号
var base = 0;
//通过指定偏移量来显示数组顺序中前或者后的第几张图片
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>
<style>
/* 图片浏览器容器 */
#container{
position:absolute;
left:20%;
text-align:center;
margin-top:150px;
border:0px solid red;
width:500px;
height:198px;
}
/* 图片浏览器容器中的所有图片样式 */
#container img{
position:absolute;
}
/* 半透明遮罩层 */
.mask{
background:#000;
position:absolute;
opacity:0.3; /* CSS标准方式，IE7以上支持 */
filter:Alpha(Opacity='30'); /* 滤镜透明方式，IE6支持 */
}
/* 颜色更深的半透明遮罩层 */
.mask2{
background:#000;
position:absolute;
opacity:0.5; /* CSS标准方式，IE7以上支持 */
filter:Alpha(Opacity='50'); /* 滤镜透明方式，IE6支持 */
}
</style>
</body>
</html>