1.效果:
a.當滑鼠不在圖片上時...
b.當滑鼠在第一個方框中時...
由方框的放大縮小, 造成有種類似漣漪, 或是風吹過旗面的效果...具美觀且有廣告效力
1.CODE:
[canvas]
[simplelayout axis="y" spacing="10"/]
[class name="box" bgcolor="blue"
height="100" width="100" /]
/*定義box, 為底部方框之大小及顏色, 還有各方框間隔距離位置,*/
[class name="borderedbox" extends="box"
width="${size}" height="${size}"
onmouseover="this.changeSize(50)"
onmouseout="this.changeSize(-50)"]
/*定義borderedbox, 此部分最重要為 onmouseover="this.changeSize(50)"
onmouseout="this.changeSize(-50)" 這兩句...這為定義當滑鼠移進及移出時, 所要放大的大小
[attribute name="size" value="100"/]
[attribute name="bordersize" value="2"/]
[view bgcolor="yellow"
x="${parent.bordersize}"
y="${parent.bordersize}"
width="${parent.width - parent.bordersize*2}"
height="${parent.height - parent.bordersize*2}"/]
/*這裡也是定義borderedbox變數的地方, 有color及大小, 比較特殊為:內框之大小是視外框而定的, 即為和外框成一定比例, width="${parent.width - parent.bordersize*2}"
height="${parent.height - parent.bordersize*2}"我們可以在這裡改變比例*/
[method name="changeSize" args="pixels"]
this.animate('size', pixels, 500, true);
/*此地方為定義changeSize, 即為我們所希望的變動的幅度, 為視pixel而定, 類似圖片畫素一般, 如果pixel越大則其變動的幅度會越接近自然的變動, 越小則會像一格一格投影片的效果, 端看我們想要的效果可以改變其pixel*/
[/method]
[/class]
[borderedbox/]
[borderedbox bordersize="6"/]
[borderedbox bordersize="9"/]
/*這裡為定義物件borderedbox 的多寡及內外框一開始距離, 我們如果想要增加框框可以在此地定義*/
[/canvas]
[!-- Copyright 2001-2007 Laszlo Systems, Inc. All Rights Reserved. --]
心得:
這學期跟著老師一起上這堂課, 雖然我認為和其他的電子學...等課來說這門課很輕鬆, 但是我覺得我學到很多很實際的東西, 也在這裡面學到一些網路上的架構概念, 而我會在這裡想找這個程式來做範例, 是因為它讓我看到了網路行銷的功能, 我想網路之所以發達, 應該不只是因為他好玩吧!
而是他的行銷功能強大且不需要花費很多錢...因此我想這會是現在也是未來創業的趨勢, 如何在網路廣告上引人注目
