筆者今天要跟各位分享一個跟影像左右移動突顯效果有點類似的圖片突顯效果,讓網頁內容更能吸引瀏覽者的注意。
這邊只需要一個很簡單的 HTML:
檢視原始碼 HTML
1 2 3 4 5 | <body> <a class="abgne-zoom-out" href="http://abgne.tw"> <img src="images/2012TaipeiCartShow_01.jpg" title="" width="250" height="164" /> </a> </body> |
基本上就是一個超連結加圖片的組合,接著準備等一下會用到的 CSS:
檢視原始碼 CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | .abgne-frame-20120208 { position: relative; overflow: hidden; } .abgne-frame-20120208 .overlay { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; /* 遮罩的顏色 */ } |
這邊的 CSS 是接下來產生的元素會用到的,其中 .overlay 的 background-color 會影響遮罩的顏色喔。
當萬事都準備好之後,再來就是輪到咱們的東風 - jQuery 出馬囉:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | $(function(){ // 設定遮罩的透明度及寬高, 位移縮放值 var _overlayOpacity = 0.5, _zoomWidthDiff = 20, _zoomHeightDiff = 15, _marginTopDiff = -5, _marginLeftDiff = -5; // 把有 a.abgne-zoom-out 元素抓出來一一改造 $('a.abgne-zoom-out').each(function(){ // 先取得圖片及移除包裹圖的超連結 // 並重新加上新的外框及產生超連結遮罩 var $this = $(this), $img = $this.find('img').unwrap(), $frame = $img.wrap('<div class="abgne-frame-20120208"></div>').parents('.abgne-frame-20120208'), $overlay = $('<a href="'+$this.attr('href')+'" class="overlay"></a>').css('opacity', _overlayOpacity); // 設定外框的寬高跟圖片寬高一樣 // 並加入遮罩 $frame.css({ width: $img.width(), height: $img.height() }).append($overlay); // 當滑鼠移入及移出遮罩時 $overlay.hover(function(){ // 把圖片的寬高依縮放值加大 // 並變更 margin-left 及 margin-top $img.stop(false, true).animate({ width: '+=' + _zoomWidthDiff + 'px', height: '+=' + _zoomHeightDiff + 'px', marginTop: _marginTopDiff, marginLeft: _marginLeftDiff }); // 遮罩變成完全透明 $(this).stop(false, true).animate({ opacity: 0 }); }, function(){ // 把圖片的寬高依縮放值減少 // 並變更 margin-left 及 margin-top $img.stop(false, true).animate({ width: '-=' + _zoomWidthDiff + 'px', height: '-=' + _zoomHeightDiff + 'px', marginTop: 0, marginLeft: 0 }); // 遮罩變成完全指定透明度 $(this).stop(false, true).animate({ opacity: _overlayOpacity }); }); }); }); |
除了把圖片寬高加大之外,還利用了 margin-left 及 margin-top 的改變來造成移動的動畫效果。
是不是覺得你的視覺會隨著圖片的縮放而被引導了呢!
這應該不需要使用到js吧?
用css3也能呈現
對, 一些很基本簡單的動畫效果都能用 CSS3 來呈現。但如果想要 IE 系列也能有同樣效果的話...就..
請問老師
_zoomWidthDiff = 20,
_zoomHeightDiff = 15,
_marginTopDiff = -5,
_marginLeftDiff = -5;
中的數值[20][15][-5][-5]的單位是pixel嗎
請問老師 我想在圖片的右側加入做文字說明
但是設定了float: left後
依舊會跑到圖片的下方 請問我該如何設定?
文字部分我是用p設定float: left
要不要改用絕對座標來設定看看咧~
是的, 是px
請問一下 如果我圖片是圓形,那我怎樣改變我的遮罩跟區塊成圓形的,是要再css設定嗎?還是jquery?
遮罩看你是要用圖片還是 css3 來產生圓形囉~
請問這可以用在多張圖片嗎?
如果每張圖片的大小都不一樣,那怎麼辦?