công nghệ website - chương xviii_2010 filter và transition

FILTER VÀ TRANSITION I. FILTER  Khái niệm: Filter là hiệu ứng đặc biệt được áp dụng cho một đối tượng trong trang web để thay đổi sự thể hiện của nó. Hiệu ứng này chỉ được Internet Explorer hỗ trợ.  2. Cách tạo: – Dùng CSS – Dùng Javascript II. TẠO FILTER  Sử dụng CSS: – Cú pháp: Filter: filter_Name(list parameters) Ví dụ: filter: alpha (opacity = 90, style = 2) III. Một số filter thông dụng  Alpha(Opacity:0-100,Style : 0,1,2,3):Bộ lọc trong suốt – opacity từ 0 (trong suốt) tới 100 (bình thường). – Style là kiểu lọc  Blur(Direction:0-360, Strength:1-100, Add :0/1) (cộng hình gốc) Bộ lọc nhoè – Direction: chiều làm nhoè tính theo góc, – strength chỉ độ nhoè mạnh hay yếu III. Một số filter thông dụng Ví dụ: <img border = "0" src = "van.gif" width = "110" height= "120" style= "filter: alpha (opacity = 90, style = 2)"> <img border="0" src="van.gif" width="110" height="120" style=" filter: blur (strength = 10) " > III. Một số filter thông dụng III. Một số filter thông dụng  Chroma(color :#rrggbb):Làm cho màu chỉ định bởi color bị mất đi  DropShadow(color : #rrggbb,OffX, OffY): Tạo bóng đổ xuống mặt phẳng phía dưới – OffX và OffY tính bằng pixel là chênh lệch theo toạ độ x và y của hình gốc và bóng đổ  FlipH( ):Lật hình theo chiều ngang  FlipV( ):Lật hình theo chiều đứng III. Một số filter thông dụng  Glow(color : #rrggbb, Strength : 1-255):Tạo quầng sáng quanh đối tượng – Strength: độ rộng quầng sáng tính bằng pixel – Color: xác định màu  Gray(): Thể hiện đối tượng theo thang độ xám  Invert(): Đảo ngược màu  Light():Tạo các nguồn sáng để chiếu sáng đối tượng III. Một số filter thông dụng  Mask(Color:#rrggbb): Tạo mặt nạ với màu xác định bởi Color  Shadow(Direction: 0-360, Color= #rrggbb): Tạo bóng đổ cho đối tượng – color định màu cho bóng đổ – Direction: Góc bóng  Wave( ): Biến dạng đối tượng theo dạng sóng sin  Xray( ): Làm cho đối tượng có hình ảnh như ảnh của film X quang III. Một số filter thông dụng  Sử dụng JavaScript:  Cú pháp: object.style.filter = “filter_name(parameters)” – object : tên của của đối tượng trong trang. – Nếu muốn kết hợp nhiều filter trong trang, ta phải phải phân cách chúng với nhau bằng dấu chấm phẩy [...]... (0 22) 23 IV TRANSITION  Sử dụng javascript : Cú pháp trong javascript cho tham chiếu tới transition tương tự như đối với filter Phải thiết lập thời gian diễn tiến cho transition object.style .filter = “blendTrans ( Duration=2)”; Hoặc dùng tập hợp filter : object.filters.bendTrans.Duration = 2; – object : tên của đối tượng áp dụng transition IV TRANSITION  Thực thi một transition :Khi transition được... số filter thông dụng Ví dụ: h.style .filter= “shadow(direction:60,color= #ff0000) ; alpha(opacity=60, Style =1 )" III Một số filter thông dụng  Có thể sử dụng cách khác là xem filter như một phần của mô hình đối tượng, các tham số như là thuộc tính của đối tượng filter  Cú pháp object.filters .filter_ name .filter_ parameter = value – object : tên của đối tượng – filter_ name:tên của filter. .. tượng thứ hai – Reveal Transition : khi thay thế đối tượng thứ nhất bằng đối tượng thứ hai, và có thể áp dụng một trong rất nhiều hiệu ứng IV TRANSITION  Sử dụng CSS :  Cú pháp blend transition filter : blendTrans ( Duration=value) – value : lượng thời gian tính bằng giây ấn định thời gian cho hiệu ứng tiếp diễn  Cú pháp reaveal transition filter : revealTrans ( Duration = value, Transition = type)... Explorer III Một số filter thông dụng Ví dụ: function imgfilter() { img1.style .filter = "shadow"; img1.filters.shadow.color="#ff0000"; } III Một số filter thông dụng  Tạo hiệu ứng cuộn với filter (rollover) : – Dùng Filter có thể tạo hiệu... nhiều filter Ví dụ: logo.filters truy xuất tới tập hợp filter của đối tượng  Trong javascript để truy xuất tới phần tử (chẳng hạn DropShadow) ta có nhiều cách viết tương đương : logo.filters.DropShadow logo.filters[“DropShaDow”] logo.filters[0] III Một số filter thông dụng Ví dụ: if(navigator.appName == “Microsoft Internet Explorer”) ie=true else ie=false ; if (ie) { logo.style .filter = “apha(opacity=30)”;... Một số filter thông dụng Ví dụ: Hình 16 bảng I có thể được tạo bằng cách dùng filter light theo mã sau img1.filters.light.addpoint(40,30,130,0,255,0,100) img1.filters.light.addpoint(40,30,20,0,255,0,100) img1.filters.light.addpoint(40,30,20,0,255,0,100) IV TRANSITION. .. để thi hành transition phải chạy chương trình javascript gồm bốn bước : – Thiết lập trạng thái khởi đầu cho đối tượng – Dùng phương thức apply() cho đối tượng – Chỉ định trạng thái kết thúc – Dùng phương thức Play() để thi hành transition  Trạng thái khởi đầu là hình ảnh của đối tượng trước khi thực thi transition IV TRANSITION  Dùng phương thức apply() cho đối tượng : object.filters .transition_ type.apply();... thúc là hiện đối tượng – Nếu transition dùng đổi một hình bằng một hình khác, thì chỉ định trạng thái kết thúc bằng lệnh javascript cho biết file hình mới cho đối tượng IV TRANSITION Ví dụ: tạo transition cho đối tượng hình ảnh : # img1 {filter : revealTrans( Duration=2, Transition= 6 ) } IV TRANSITION function swapit () { img1.filters.revealTrans.apply();... bằng chương trình javascript, nếu việc thay đổi này tiếp diễn liên tục theo thời gian đối tượng sẽ có hiệu ứng filter động III Một số filter thông dụng Ví dụ: var oplevel = 0; objname.style .filter = “alpha()” ids=setInterval (“dynobject(objname)”,200); function dynobject (object) { if (oplevel . Alpha(Opacity: 0-1 00,Style : 0,1,2,3):Bộ lọc trong suốt – opacity từ 0 (trong suốt) tới 100 (bình thường). – Style là kiểu lọc  Blur(Direction: 0-3 60, Strength: 1-1 00,. đứng III. Một số filter thông dụng  Glow(color : #rrggbb, Strength : 1-2 55):Tạo quầng sáng quanh đối tượng – Strength: độ rộng quầng sáng tính bằng