JavaScript 類似flash效果的立體圖片瀏覽器
更新時(shí)間:2010年02月08日 07:05:56 作者:
這是一款比較有立體感的圖片瀏覽器,通過(guò)圖層定位技術(shù)z-index讓瀏覽器正在查看的圖片突顯出來(lái),并讓兩邊的圖片呈現(xiàn)半透明狀態(tài)。很個(gè)性化哦!
PS:顯示效果圖,大家可以根據(jù)自己的需求調(diào)整圖片的樣式哦

代碼
<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)"/>
<!--左邊第一個(gè)圖片-->
<img id="img01" style="z-index:4; left:31px; top:63px; width:74px; height:74px;" onclick="JavaScript:showImg(2)"/>
<!--左邊第一個(gè)圖片的遮罩層-->
<div class="mask" style="z-index:4; left:31px; top:63px; width:74px; height:74px;"></div>
<!--左邊第二個(gè)圖片-->
<img id="img02" style="z-index:5; left:71px; top:32px; width:138px; height:138px;" onclick="JavaScript:showImg(1)"/>
<!--左邊第二個(gè)圖片的遮罩層-->
<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)"/>
<!--右邊第二個(gè)圖片-->
<img id="img04" style="z-index:5; left:291px; top:32px; width:138px; height:138px;" onclick="JavaScript:showImg(-1)"/>
<!--右邊第二個(gè)圖片的遮罩層-->
<div class="mask2" style="z-index:5; left:291px; top:32px; width:138px; height:138px;"></div>
<!--右邊第一個(gè)圖片-->
<img id="img05" style="z-index:4; left:395px; top:64px; width:74px; height:74px;" onclick="JavaScript:showImg(-2)"/>
<!--右邊第一個(gè)圖片的遮罩層-->
<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>
//圖片列表數(shù)組
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";
//默認(rèn)顯示的圖片序號(hào)
var base = 0;
//通過(guò)制定偏移量來(lái)顯示數(shù)組順序中的前或者后的幾張圖片,offset參數(shù)為偏移量
function showImg(offset){
base=(base-offset)%imgArray.length;
//顯示從base號(hào)開(kāi)始的5個(gè)圖片
for(var i=base;i<base+5;i++){
var img = document.getElementById("img0"+(i-base+1));
//判斷圖片是否從前往后循環(huán)顯示
if(i<0){img.src = imgArray[imgArray.length+i];}
//判斷圖片是否從后往前循環(huán)顯示
else if(i>(imgArray.length-1)){img.src=imgArray[i-imgArray.length];}
else {img.src=imgArray[i];}
}
}
//初始化圖片瀏覽器中的圖片
function initImg(){
showImg(3);
}
//頁(yè)面加載后調(diào)用
window.onload=initImg();
</script>
</body>
function initimg(){
showImg(3);
}
window.onload=initimg();
</script>
</body>

代碼
復(fù)制代碼 代碼如下:
<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)"/>
<!--左邊第一個(gè)圖片-->
<img id="img01" style="z-index:4; left:31px; top:63px; width:74px; height:74px;" onclick="JavaScript:showImg(2)"/>
<!--左邊第一個(gè)圖片的遮罩層-->
<div class="mask" style="z-index:4; left:31px; top:63px; width:74px; height:74px;"></div>
<!--左邊第二個(gè)圖片-->
<img id="img02" style="z-index:5; left:71px; top:32px; width:138px; height:138px;" onclick="JavaScript:showImg(1)"/>
<!--左邊第二個(gè)圖片的遮罩層-->
<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)"/>
<!--右邊第二個(gè)圖片-->
<img id="img04" style="z-index:5; left:291px; top:32px; width:138px; height:138px;" onclick="JavaScript:showImg(-1)"/>
<!--右邊第二個(gè)圖片的遮罩層-->
<div class="mask2" style="z-index:5; left:291px; top:32px; width:138px; height:138px;"></div>
<!--右邊第一個(gè)圖片-->
<img id="img05" style="z-index:4; left:395px; top:64px; width:74px; height:74px;" onclick="JavaScript:showImg(-2)"/>
<!--右邊第一個(gè)圖片的遮罩層-->
<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>
//圖片列表數(shù)組
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";
//默認(rèn)顯示的圖片序號(hào)
var base = 0;
//通過(guò)制定偏移量來(lái)顯示數(shù)組順序中的前或者后的幾張圖片,offset參數(shù)為偏移量
function showImg(offset){
base=(base-offset)%imgArray.length;
//顯示從base號(hào)開(kāi)始的5個(gè)圖片
for(var i=base;i<base+5;i++){
var img = document.getElementById("img0"+(i-base+1));
//判斷圖片是否從前往后循環(huán)顯示
if(i<0){img.src = imgArray[imgArray.length+i];}
//判斷圖片是否從后往前循環(huán)顯示
else if(i>(imgArray.length-1)){img.src=imgArray[i-imgArray.length];}
else {img.src=imgArray[i];}
}
}
//初始化圖片瀏覽器中的圖片
function initImg(){
showImg(3);
}
//頁(yè)面加載后調(diào)用
window.onload=initImg();
</script>
</body>
function initimg(){
showImg(3);
}
window.onload=initimg();
</script>
</body>
您可能感興趣的文章:
- JS預(yù)覽圖像將本地圖片顯示到瀏覽器上
- 來(lái)自國(guó)外的一款Js圖片瀏覽效果
- javascript IE7 瀏覽器本地圖片預(yù)覽
- 來(lái)自ImageSee官方 JavaScript圖片瀏覽器
- 多瀏覽器兼容的qq圖片輪換效果javascript代碼
- js與自動(dòng)伸縮圖片 自動(dòng)縮小圖片的多瀏覽器兼容的方法總結(jié)
- javascript上傳圖片前預(yù)覽圖片兼容大多數(shù)瀏覽器
- 瀏覽器圖片選擇預(yù)覽、旋轉(zhuǎn)、批量上傳的JS代碼實(shí)現(xiàn)
- jb51站長(zhǎng)推薦的用js實(shí)現(xiàn)的多瀏覽器支持的圖片輪換展示效果ie,firefox
- JavaScript仿百度圖片瀏覽效果
相關(guān)文章
非常不錯(cuò)的 子鼠 滑動(dòng)圖片效果 Javascript+CSS
一個(gè)效果如果沒(méi)有一個(gè)合理的布局,是很難作出來(lái)的,所以布局是非常重要的基礎(chǔ)! 下邊的效果,是試著假設(shè)在布局我無(wú)法改的情況下,能過(guò)外邊的CSS或Javascript來(lái)實(shí)現(xiàn)一個(gè)滑動(dòng)圖片效果!2009-04-04JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到縮略圖顯示大圖的圖片放大效果
一個(gè)網(wǎng)頁(yè)上用的圖片提示效果,當(dāng)把鼠標(biāo)移動(dòng)到圖片縮略圖的時(shí)候,會(huì)顯示圖片大圖,似乎在網(wǎng)上這是個(gè)很常見(jiàn)的效果,實(shí)現(xiàn)方法也比較多,有人用CSS,有人用JavaScript,有人用jQuery,總之,選擇自己習(xí)慣的方式去實(shí)現(xiàn),就是最棒的。2012-12-12JavaScript圖片放大鏡效果代碼[代碼比較簡(jiǎn)單]
實(shí)用漂亮的放大鏡效果,基于JavaScript代碼實(shí)現(xiàn),貌似代碼不太多,但效果確實(shí)不錯(cuò),因調(diào)用的圖片比較大,所以運(yùn)行效果后請(qǐng)稍等一會(huì),等待圖片加載。2011-02-02符合web標(biāo)準(zhǔn)的連續(xù)滾動(dòng)圖像的js代碼
符合web標(biāo)準(zhǔn)的連續(xù)滾動(dòng)圖像的js代碼...2007-02-02javascript實(shí)現(xiàn)的一個(gè)圖片轉(zhuǎn)移效果
javascript實(shí)現(xiàn)的一個(gè)圖片轉(zhuǎn)移效果...2007-06-06