【分享】JS圖片滑動漸顯漸隱外掛程式-附使用方法。

標籤：style   blog   http   color   使用   os   

 

 前陣子總監要說做一個邀請函 效果 點擊這裡 滑鼠拖拽進行瀏覽

它用的是Adobe edge軟體產生的，代碼量過大，冗餘太多。

再加上我也沒學過這個軟體怎麼使用，增加學習成本影響項目進度。

 

於是就自己寫了個簡單的。滑鼠移動到右下角視窗滾動看效果→DEMO

不過是單體的 沒有使用多個圖片分頻運動 ，當然如果項目需要的話，改起來也不費勁，比上面的要簡單許多。

使用方法在下方：

    #bg{        position:fixed;        width: 100%;        height: 200%;        background: url(images/bg.jpg);        background-size:100% 100%;    }    #wrap{        width: 100%;        height: 100%;    }    #wrap > div{        position:absolute;        left:20%;        top:30%;    }    .img1 ~ div{        opacity:0;    }    .rotate{        -webkit-transition: -webkit-transform 500s linear;        -moz-transition:    -moz-transform 500s linear;        -o-transition:      -o-transform 500s linear;        transition:         transform 500s linear;    }

<div id="bg"></div><!--背景ID--><div id="wrap"><!--主體和背景分離 div class必須以img+數字形式依次向下-->        <div class="img1"><img src="images/shou.png" width="100%" class="rotate" /></div>        <div class="img2"><img src="images/map.jpg" width="100%" /></div>        <div class="img3"><img src="images/U.png" width="100%" /></div>        <div class="img4"><img src="images/keji_06.png" width="100%" /></div></div> 

css設定bg想要的背景url

JS就不貼了 有興趣讀源碼的就下載去看吧 上方的DEMO也可以看的到。

如果想要手機觸發的話給滑鼠滾輪改成 觸屏事件就好了。

#wrap子項目的DIV有多少張圖片就依次的 class="img+圖片數";

附件下載：點擊這裡

 謝謝。

 

Margo_test
出處：http://www.cnblogs.com/margo/