網頁

2015年8月2日 星期日

EZoApp 範例 - 小圖變大圖


圖片網址:
my logo
https://lh3.googleusercontent.com/-fhHEbeOEdVk/Vb15d87sYAI/AAAAAAAABW8/KgZRC_Q2avg/s404-Ic42/mylogo.gif

烏來
https://lh3.googleusercontent.com/-YJjn48WHewA/Vb12esqV38I/AAAAAAAABWY/LUn_7sCY3EA/s600-Ic42/wulai.jpg

十分瀑布
https://lh3.googleusercontent.com/-FwAVR6Exhaw/Vb12etQE8_I/AAAAAAAABV4/_otjGplpLzs/s500-Ic42/tenwaterfall.jpg

太子賓館
https://lh3.googleusercontent.com/-hcZEP3BVutc/Vb12eUimPNI/AAAAAAAABVw/Hy3ZNWqP_w8/s400-Ic42/tai.jpg

方法:
一個新的page
插入Header元件
Header元件
Text: 小圖變大圖

插入 Footer元件,裏面再插入Button 元件

Button 元件
id:homebutton
Icon :home
IconPOS :notext

插入Gk-text元件
Text: 這是我拍的相片,謝謝觀賞,歡迎引用。
Style: font-size:12pt

插入 Grid元件,裏面放  image元件,讓 Grid 圖的大小不一樣也不會閃動
Columns :1
Style : height:300px

插入Image元件
id : photoshow
style : width:100%;

插入grid元件
Columns :3
Style : height:95px

在此 grid元件內放 3 icon 元件
1 icon
id: photo1
text:烏來

2 icon
id: photo2
text:十分瀑布

3 icon
id: photo3
text:太子賓館

切換到 js 標籤
先打  btn , 同時按 alt + /
alert那行刪除

輸入以下程式
$('#photo1').on('click', function (e) {
    $('#photoshow').attr('src','https://lh3.googleusercontent.com/-YJjn48WHewA/Vb12esqV38I/AAAAAAAABWY/LUn_7sCY3EA/s600-Ic42/wulai.jpg');
  })
 
    $('#photo2').on('click', function (e) {
    $('#photoshow').attr('src','https://lh3.googleusercontent.com/-FwAVR6Exhaw/Vb12etQE8_I/AAAAAAAABV4/_otjGplpLzs/s500-Ic42/tenwaterfall.jpg');
    })
   
    $('#photo3').on('click', function (e) {
    $('#photoshow').attr('src','https://lh3.googleusercontent.com/-hcZEP3BVutc/Vb12eUimPNI/AAAAAAAABVw/Hy3ZNWqP_w8/s400-Ic42/tai.jpg');
     })
   
    $('#homebutton').on('click', function (e) {
    $('#photoshow').attr('src','https://lh3.googleusercontent.com/-fhHEbeOEdVk/Vb15d87sYAI/AAAAAAAABW8/KgZRC_Q2avg/s404-Ic42/mylogo.gif');
          
  })

成品參考圖:


沒有留言 :

張貼留言