現在很多廣告輪播效果都有做出類似百葉窗的交錯進場切換方式,這其實是利用了多個區塊及背景圖片座標控制的方式來達成,所以今天筆者會教各位如何做出類似的效果。
首先準備個簡單的 HTML 內容:
檢視原始碼 HTML
1 2 3 4 5 6 7 8 9 | <body> <div id="abgne-block-20120527"> <a href="#"><img src="images/DSC_0668.JPG" /></a> <a href="#"><img src="images/DSC_0952.JPG" /></a> <a href="#"><img src="images/DSC_1147.JPG" /></a> <a href="#"><img src="images/DSC_1838.JPG" /></a> <a href="#"><img src="images/DSC_1882.JPG" /></a> </div> </body> |
接著搭配相關的 CSS:
檢視原始碼 CSS
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 | #abgne-block-20120527 { width: 720px; /* 圖片的寬 */ height: 420px; /* 圖片的高 */ overflow: hidden; } #abgne-block-20120527 a { position: absolute; top: 0; left: 0; } #abgne-block-20120527 a img { border: none; } /* 以下是針對選單按鈕設定 */ #abgne-block-20120527 .abgne-controls { list-style: none; position: absolute; margin: 0; padding: 0; left: 30px; bottom: 40px; height: 20px; } #abgne-block-20120527 .abgne-controls li { float: left; width: 35px; height: 35px; line-height: 35px; font-size: 20px; font-weight: 900; text-align: center; cursor: pointer; margin-right: 2px; color: #0cf; background-color: #fff; } #abgne-block-20120527 .abgne-controls li.current { color: #fff; background-color: #0cf; } |
其中的 .abgne-controls 主要用在接下來產生的選單按鈕使用,若不希望出現選單按鈕的話,可以把它設為隱藏就可以了。接下來就先來看完整的 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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | $(function(){ // 先取得 #abgne-block-20120527 及其相關區塊及元素 // 並依計算出每等份的寬度 var _slices = 9, // 切成幾等份 _index = 0, // 預設顯示第幾個 _zIndex = 999, $block = $('#abgne-block-20120527').css('position', 'relative'), $slides = $block.find('a').css('z-index', _zIndex).hide(), _width = $block.width(), _height = $block.height(), _sliceWidth = _width / _slices, // 每等份的寬度 _lastSliceWidth = _sliceWidth + (_width - _sliceWidth * _slices), // 剩於的寬度 _img = $slides.eq(_index).show().find('img').attr('src'), timer, speed = 2000, // 輪播速度 _animateSpeed = 600, // 動畫速度 _isHover = false, // 滑鼠是否移到 $block 上 _isComplete = true; // 動畫是否已全部執行完 // 依 _slices 數量來產生相對應的 div 區塊 var _sliceDiv = '', _control = ''; for(var i=0;i<_slices;i++){ var _w = i == _slices - 1 ? _lastSliceWidth : _sliceWidth, _l = i * _sliceWidth; _sliceDiv += '<div class="abgne-slice slide-' + i + '" style="left:' + _l + 'px;top:0;width:' + _w + 'px;height:100%;background-image:url(' + _img + ');background-position:-' + _l + 'px 0;position:absolute;background-repeat:no-repeat;"></div>'; } // 依 $slides 數量來產生按鈕 for(var i=0;i<$slides.length;i++){ _control += '<li class="abgne-control control-' + (i + 1) + '">' + (i + 1) + '</li>'; } // 分別把 div 區塊及按鈕加入到 $block 中 var $abgneSlides = $block.append(_sliceDiv, '<ul class="abgne-controls">' + _control + '</ul>').find('.abgne-slice'), $abgneControls = $block.find('.abgne-controls').css('z-index', _zIndex + 2).find('li').eq(_index).addClass('current').end(); // 當點擊到 .abgne-controls li 時 $abgneControls.click(function(){ // 若動畫未完成前不接受其它新的事件 if(!_isComplete) return; var $this = $(this), $slide = $slides.eq($this.index()), _completeTotal = 0; // 若現在顯示的跟點擊到的是同一個時, 就不處理 if($this.hasClass('current')) return; // 幫點擊到的 li 加上 .current, 並移除上一個 .current $this.addClass('current').siblings('.current').removeClass('current'); _isComplete = false; _index = $this.index(); // 取得相對應的圖片的路徑 _img = $slide.find('img').attr('src'); // 先讓每一個區塊的背景圖片為剛剛取得的圖片 // 並進行動畫 $abgneSlides.each(function(i){ var $ele = $(this); $ele.css({ top: i % 2 == 0 ? _height : -_height, opacity: 0, zIndex: _zIndex + 1, backgroundImage: 'url(' + _img + ')' }).stop().animate({ top: 0, opacity: 1 }, _animateSpeed, function(){ $ele.css('zIndex', _zIndex - 1); if(i == _slices - 1){ $block.css('background-image', 'url(' + _img + ')'); $slide.show().siblings('a:visible').hide(); _isComplete = true; // 當動畫完成且滑鼠沒有移到 $block 上時, 再啟動計時器 if(!_isHover)timer = setTimeout(auto, speed); } }); }); }); $block.hover(function(){ // 當滑鼠移入 $block 時停止計時器 _isHover = true; clearTimeout(timer); }, function(){ // 當滑鼠移出 $block 時啟動計時器 _isHover = false; timer = setTimeout(auto, speed); }); // 自動輪播使用 function auto(){ _index = (_index + 1) % $slides.length; $abgneControls.eq(_index).click(); } // 啟動計時器 timer = setTimeout(auto, speed); }); |
其中核心的部份是:
檢視原始碼 JavaScript
1 2 3 4 5 6 | // 依 _slices 數量來產生相對應的 div 區塊 var _sliceDiv = '', _control = ''; for(var i=0;i<_slices;i++){ var _w = i == _slices - 1 ? _lastSliceWidth : _sliceWidth, _l = i * _sliceWidth; _sliceDiv += '<div class="abgne-slice slide-' + i + '" style="left:' + _l + 'px;top:0;width:' + _w + 'px;height:100%;background-image:url(' + _img + ');background-position:-' + _l + 'px 0;position:absolute;background-repeat:no-repeat;"></div>'; } |
這邊會依設定的 _slices 數量來產生相對的區塊,然後再利用絕對座標及背景圖片座標的方式來組出一張完整的圖片,拆開來看應該是長這樣~
假設每個區塊的寬度是 100px 的話,那麼以第 4 個區塊來看,它的座標及背景圖片的關係應該就變這樣
然後又因為座標定位是絕對座標,所以接下來咱們就能自由自在的控制它的進場移動,所以整個效果完成後就是一個類似交錯式的百葉窗效果囉~
真的是太厲害了
我可以請教一個小小的問題嗎
就是如果下載來都是一個html檔案 放上 dropbox 也是有網址可以執行
請問要怎麼放在拍賣的 html 廣告編輯區呢? 是要甚麼語法讓他執行我上傳的網頁html
沒用過拍賣, 不過它應該不能加入其它現有的網頁吧, 頂多把你現在 html 中的內容一五一十的加到拍賣的編輯器中看有沒有用
注意的是, 一些檔案的路徑要改成絕對路徑
因為我是有看到 pchome 商店街有人使用你的範例
我是查裡面的什麼碼的 才找到這^^
給你參考一下
http://www.pcstore.com.tw/dawoko/
請問是大概什麼原理 可以套用上去
是在 html 編寫程式時要加入特定呼叫才型嗎?
因為我看有要注意 html css 真的搞的我霧傻傻 = =
還是有在幫人操作?
它是用 iframe 的方式嵌入其它外部的網頁內容的~
男丁大大,讚+1,
一直有研究新的 plugin 出現,國內大概沒人比你懂 jQuery 吧。
給你拍拍手。
比我懂 jQuery 人很多啦, 像黑暗執行緒的 Jeffrey 或是 ptt ajax 版的 TonyQ 都是很厲害的人。
請問如果動畫上面有選單~如何讓下拉選單在動畫上面?
因為我試了您的方式~結果本來的選單變成在動畫的底層~
要改變你的選單的 z-index 讓它比 1001 還大
找這個效果找很久了..
真是太厲害了
但剛剛我到CSS改了圖片大小
它在每次換圖完時就閃了一下
請問我還要修改哪裡??
謝謝
good sample
您好,我想請問,為什麼不論我依照您的語法,還是我自已的方法去套jquery,都不會有動作呢?
內容跟css都有,但是就是jquery的效果沒反應,可以跟我解答嗎?
可以的話讓我看看你的網頁內容, 不然我也不知道問題在那!
大大您好:
我想請問這兩段,這兩個變數值是一樣的,還是有什麼特殊涵義嗎?
_sliceWidth = _width / _slices, // 每等份的寬度
_lastSliceWidth = _sliceWidth + (_width - _sliceWidth * _slices), // 剩於的寬度