jQuery plugin- 圖片文字說明效果

當滑鼠移到圖片上，有時候會希望上面有一些說明文字出來，像這種有一個小方塊滑出來的說明就是不錯的選擇。
外掛網址：
jQuery Image Overlay

一樣引入plugin，然後要使用plugin只要這樣使用

view plaincopy to clipboardprint

1. $("#firstGallery").ImageOverlay();  

另外有些選擇可以設：
always_show_overlay: Allows pinning of overlay if set to true. Overrides overlay_speed, animate. Default: false.
animate: Whether to animate the overlay as it is being shown. Overrides overlay_speed. Default: true.
border_color: Any color value. Default: '#666'.
overlay_color: The color of the semi-opaque overlay layer. Default: '#000'
overlay_origin: The side which the overlay comes in from. Valid values are 'top' and 'bottom'. Default: 'bottom'
overlay_speed: The speed of the overlay animation. Valid values are 'slow', 'normal', 'fast', and numbers for millis. Default: 'normal'
overlay_speed_out: The speed of the overlay animation when hover is removed. Valid values are 'slow', 'normal', 'fast', and numbers for millis. Default is value of overlay_speed.
overlay_text_color: The color of the text on the overlay. Default: '#666'

view plaincopy to clipboardprint

1. $("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out : 'slow' });  

Demo