javascript實例分享---具有立體效果的圖片特效_javascript技巧

此實例是我一遍學習一邊寫出來的，希望能夠幫到大家，一起學習。效果如圖：

html程式碼如下圖：

複製程式碼 程式碼如下:

 
   
   
   
 
 
 

     

     
     

" onclick="javascript:jzk.ui.moveImg(3);">

     
     

" onclick="javascript:jzk.ui.moveImg(2);">" onclick="javascript:jzk.ui.moveImg(2);">

     
     

" onclick="javascript:jzk.ui.moveImg(1);">

     

     
     

     
     

     
     

     
 
 

css程式碼如下：

    此處的mask1、2、3.....是覆蓋幾張照片的一個div，用opacity屬性來定義透明度，可以實現一種朦朧感，讓外觀更加美麗。

複製程式碼 程式碼如下:

body {width: 1340px; url(../images/body_bg.gif) no-repeat;}
#pic_browser {width: 860px;height: 192px; position: relative;margin:130px 106px;}
#pic_browser img{position sercum ;border: none;}

.prev {top:76px;left: 0px; }
#img1, .mask3 {width: 106px;height: 70px;left: 45px;top: 61px;z-index: 4; #img2, .mask2 {width: 166px;height: 110px;left: 95px;top:41px;z-index: 5;}
#img3, .mask1 {width: 226px;height: 150075;頂: 21px;z-index: 6;}
#img4 {width: 290px;height: 192px;left: 285px;top: 0px;z-index: 7;}
#img5, .mas5 {wid : 226px;height: 150px;right: 175px;top: 21px;z-index: 6;}
#img6, .mask6 {width: 166px;height: 110px;right: 95pxtop:4. : 5;}
#img7, .mask7 {width: 106px;height: 70px;right: 45px;top: 61px;z-index: 4;}
.next {top:76px;right: 0px; }

.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {background: #fff;position: absolute;}

.mask1, .mask5  {opacity: 0.3;}. , .mask6 {opacity: 0.5;}
.mask3, .mask7 {opacity: 0.7;}

js程式碼如下：

複製程式碼 程式碼如下:

window.onload = function()
{
   jzk.app.initImg();
}

var imgArray = new Array();
imgArray[0] = 'images/1.jpg';
imgArray[1] = 'images/2.jpg';
imgArray[2] = 'images/3.jpg';
imgArray[3] = 'images/4.jpg';
imgArray[4] = 'images/5.jpg';
imgArray[5] = ' images/6.jpg';
imgArray[6] = 'images/7.jpg';
var base=0;

var jzk = {}; /*定義命名空間*/

jzk.tools = {};/*分層第一層*/

jzk.ui = {};/*分層第二層*/
jzk.ui.moveImg = function(offset)
{
    base= (base-offset);
for(var i = base;i    {
        var img = document.getElementById('img' (i-1)); /*保證img變數為img1、img2、img3...直到img7這7個img元素*/
        if(i0，*/
        {
            img.src =imgArray[imgArray.length i];
 -1)
        {
            img.src =imgArray[i- imgArray.length];
        }
        else
               }
    }
}

jzk.app = {}; /*分層第三層*/
jzk.app.initImg = function()/*初始化顯示圖片,也就是呼叫函數moveImg過程：參數為7，base等於-7，i等於-7，-6，-5，-4，-3,-2,-1這7個值，對應的元素為img1，img2，...img7，所以有：img1=imgArray[ -7 7],img2=imgArray[-6 7]....*/

{

     jzk.ui.moveImg(7);/*初始參數應設為：能顯示的張數(此處為7)；*/
}
三個文件，屬js代碼比較難理解，上面我也給了詳細的註釋，如果還有誰看了不懂的，可以在下面評論中討論。