網頁設計

關於網頁設計的技術或相關資訊分享

mootools商品展示 - 淡入淡出圖片切換

  網路上常看到展示一些商品,都是採用一個大突然後下面有幾張小圖,點了小圖就更換上面的大圖的效果,使用這種展示方式,不但可以把長長的頁面內容放在同一個區塊展示,也比較生動活潑,今天小編就來教大家如何自己使用這個方法,不過採用的不是jquery,而是另外一套一樣強大的mootools,不囉嗦先看DEMO。

 

網頁設計 - 用mootools做商品展示,淡入淡出圖片切換 PIC1
網頁設計 - 用mootools做商品展示,淡入淡出圖片切換 thumbpic1 網頁設計 - 用mootools做商品展示,淡入淡出圖片切換 thumbpic2 網頁設計 - 用mootools做商品展示,淡入淡出圖片切換 thumbpic3

點小圖看切換效果

使用方法:

一樣先載入需要的js檔,這邊載入的mootools版本為V1.3,不同版本可能有所不同請大家自己注意版本差異。

<script src="/js/mootools.js" type="text/javascript"></script>

之後將圖片的Html先寫好

<div id="bigphoto"> <img src="/image/01.JPG"/> </div> <div id="thumbphoto"> <img src="/image/01.JPG" /> <img src="/image/02.JPG" /> <img src="/image/03.JPG" /> </div>

*其中大圖和縮圖外面分別使用id為bigphoto及thumbphoto的div包起來,這點很重要。

接下來當然要使用CSS修飾一下

#bigphoto img{     border:1px solid #000;
    width:400px;
    height:300px;
}
#thumbphoto{
    text-align:center;
    width:400px;
}
#thumbphoto img{
    border:1px solid #000;
    width:40px;
    height:30px;
    margin-top:5px;
}

最後就是最重要的script了

//定義clicktochange函數
var clicktochange = function() {
    //替縮圖增加Click事件
    $$('#thumbphoto img').addEvent('click', function(){
        //取得點擊縮圖的圖片位置
        var src= this.get('src');
        var bigpic =$$('#bigphoto img');
        bigpic.set("tween", {
            duration: 1000,//淡出的速度
            transition: Fx.Transitions.Quint.easeIn,//淡出的效果
            onComplete: function() {
                bigpic.set('src',src);//將大圖的圖片變更為縮圖的圖片
                bigpic.fade(1);//淡入
            }
        }).fade(0);
    });
};
//當頁面讀取完後執行clicktochange函數
window.addEvent('domready', function() {
    clicktochange();
});

都用完之後,就可以趕快看看效果囉,script裡面的各參數大家可以自行調整看看自己喜歡的效果是怎樣的。

Please enable the javascript to submit this form