網頁設計

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

mootools商品展示加強版

  上次在mootools商品展示中介紹了網頁設計中常見的商品展示方法,有人提出是否可以點大圖會開啟連結,這樣比較適合拿來做廣告Banner,當然是可以的阿,稍微修改一下就可以達到了。
  先來看看效果如何,在點小圖換大圖的效果和上次一致,不過這次點大圖之後,會開啟指定的連結,下面的範例,分別開啟不同的三個連結,大家可以試著操作看看,這樣的話就可以拿來作活動促銷的廣告了,點了廣告之後自動導向活動說明頁面。

 

 

點小圖看切換效果

使用說明

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

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

之後將圖片的Html先寫好

<div id="bigphoto">
  <a href="/網址1" target="_blank">
    <img src="/image/01.jpg"/>
  </a>
</div>
<div id="thumbphoto">
  <a href="/網址1" target="_blank">
    <img src="/image/01.jpg"/>
  </a>
  <a href="/網址2" target="_blank">
    <img src="/image/02.jpg"/>
  </a>
  <a href="/網址3" target="_blank">
    <img src="/image/03.jpg"/>
  </a>
</div>

*其中最外面分別使用id為bigphoto及thumbphoto的div包起來,然後再用a標籤將img標籤包起來,這邊的a標籤的href屬性就是寫著要切換的連結,如果不想讓他另開視窗的話,可以將大圖的target的屬性設為"_parent"。


接下來當然要使用CSS修飾一下,這邊的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了

<script type="text/javascript">
 var clicktochange = function() {
  //替縮圖增加Click事件
  $$('#thumbphoto a').addEvent('click', function(){
   //取得點擊縮圖的圖片位置、連結網址
   var src= this.getElement('img').get('src');
   var url= this.get('href');
   var bigpic =$$('#bigphoto a img');
   var bigurl =$$('#bigphoto a');
   bigpic.set("tween", {
    duration: 1000,//淡出的速度
    transition: Fx.Transitions.Quint.easeIn,//淡出的效果
    onComplete: function() {
     bigpic.set('src',src);//將大圖的圖片變更為縮圖的圖片
     bigpic.fade(1);//淡入
    }}).fade(0);
   bigurl.set('href',url);
   return false;
  });
 };
//當頁面讀取完後執行clicktochange函數
window.addEvent('domready', function() {
clicktochange();
});
</script>

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

Please enable the javascript to submit this form