最近熱門的話題我想非屬奧運莫屬了,筆者也趁這星期的颱風天逛了一下奧運官網,然後被首頁的最新精彩賽況圖片輪播的效果所吸引
如果您也跟筆者一樣看了就手癢的話,快快打開編輯器動手做囉:
檢視原始碼 HTML
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 | <body> <div id="abgne-block-20120804"> <div class="photo"> <a href="#"> <img src="images/dsc_0342.jpg" alt="第一張圖片"> <div class="desc-block"> <div class="desc-bg"></div> <div class="desc-title">每一個都讓人流口水的義式麵包</div> </div> </a> </div> <div class="thumbs"> <div class="carousel"> <ul> <li><a href="#"><img src="images/dsc_0342.jpg" alt="每一個都讓人流口水的義式麵包" title="每一個都讓人流口水的義式麵包"></a></li> <li><a href="#"><img src="images/dsc_0385.jpg" alt="用來垃圾分類的綠寶、白寶、黃寶及藍寶" title="用來垃圾分類的綠寶、白寶、黃寶及藍寶"></a></li> <li><a href="#"><img src="images/dsc_0424.jpg" alt="龐貝城中用來表演用的露天劇場" title="龐貝城中用來表演用的露天劇場"></a></li> <li><a href="#"><img src="images/dsc_0535.jpg" alt="龐貝城中用來祭祀用的神壇" title="龐貝城中用來祭祀用的神壇"></a></li> <li><a href="#"><img src="images/dsc_0595.jpg" alt="Hotel Pazziella 的外觀" title="Hotel Pazziella 的外觀"></a></li> <li><a href="#"><img src="images/dsc_0575.jpg" alt="我來到一個島叫做卡不里島" title="我來到一個島叫做卡不里島"></a></li> <li><a href="#"><img src="images/dsc_0952.jpg" alt="在蘇連多的俏皮神像" title="在蘇連多的俏皮神像"></a></li> <li><a href="#"><img src="images/dsc_1882.jpg" alt="在艾曼紐二世迴廊中的可憐公牛" title="在艾曼紐二世迴廊中的可憐公牛"></a></li> </ul> </div> </div> </div> </body> |
這邊一樣是把顯示圖片的區塊跟縮圖區塊拆成兩邊,而 .desc-title 中的描述內容會從縮圖中的 alt 屬性取得。接著來套上 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 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 99 100 101 102 103 104 105 106 107 108 109 | #abgne-block-20120804 { width: 552px; /* 圖片寬度 + 縮圖寬度 + 間隔 8px */ height: 300px; /* 圖片高度 */ padding: 6px 10px; position: relative; border: 1px solid #ccc; } #abgne-block-20120804 ul, #abgne-block-20120804 li { margin: 0; padding: 0; list-style: none; } #abgne-block-20120804 img { border: none; } #abgne-block-20120804 .photo { width: 450px; /* 圖片寬度 */ height: 300px; /* 圖片高度 */ position: absolute; } #abgne-block-20120804 .desc-block { position: absolute; bottom: 0; left: 0; width: 450px; /* 圖片寬度 */ height: 32px; } #abgne-block-20120804 .desc-bg, #abgne-block-20120804 .desc-title { position: absolute; width: 430px; /* 圖片寬度 - padding * 2 */ background: #000; top: 0; height: 24px; padding: 4px 10px; } #abgne-block-20120804 .desc-title { color: #fff; background: none; line-height: 24px; } #abgne-block-20120804 #playPause-btn { /* 播放/暫停鈕 */ position: absolute; display: block; right: 5px; bottom: 5px; width: 21px; height: 21px; width: 21px; height: 21px; text-indent: -999px; } #abgne-block-20120804 .playPause-btn-play { background: url(images/sprite.png) no-repeat -21px 0px; } #abgne-block-20120804 .playPause-btn-pause { background: url(images/sprite.png) no-repeat 0px 0px; } #abgne-block-20120804 .thumbs { width: 94px; height: 288px; /* 圖片高度 - padding-top */ padding-top: 12px; right: 10px; position: absolute; } #abgne-block-20120804 .carousel { height: 280px; position: relative; overflow: hidden; } #abgne-block-20120804 .carousel .nav-bar { /* 當被點選時,縮圖左邊的顏色 */ float: left; width: 2px; height: 63px; margin-right: 2px; } #abgne-block-20120804 .carousel img { float: left; width: 90px; height: 63px; } #abgne-block-20120804 .carousel ul { position: absolute; } #abgne-block-20120804 .carousel li { width: 94px; height: 72px; } #abgne-block-20120804 .carousel .current .nav-bar { background: #007acc; } #abgne-block-20120804 .thumbs .prev, #abgne-block-20120804 .thumbs .next { /* 縮圖上下的控制鈕 */ position: absolute; left: 43px; width: 12px; height: 0px; padding-top: 6px; overflow: hidden; display: block; cursor: pointer; background: url(images/sprite.png) no-repeat 0 0; } #abgne-block-20120804 .thumbs .prev { top: 0px; background-position: 0 -21px; } #abgne-block-20120804 .thumbs .next { bottom: -2px; background-position: 0 -27px; } |
厚~加上去後是不是就已經很像了呢~
好了,在看接下來的程式之前,先深呼吸一下吧~:
檢視原始碼 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 99 100 101 102 103 | $(function(){ // 先一一取得相關的元素及高度 var $block = $('#abgne-block-20120804'), $photo = $block.find('.photo'), $photoA = $photo.find('a'), $photoImg = $photoA.find('img'), $photoDesc = $photoA.find('.desc-title'), $thumbs = $block.find('.thumbs'), $carousel = $block.find('.carousel'), _carouselHeight = $carousel.height(), $playPauseBtn = $photo.append('<a href="#playPause" class="playPause-btn-pause" id="playPause-btn" title="暫停">暫停</a>').find('#playPause-btn'), $ul = $thumbs.find('ul'), $li = $ul.find('li'), _liHeight = $li.height(), _set = Math.ceil(_carouselHeight / _liHeight), _count = Math.ceil($li.length / _set), _height = _set * _liHeight * -1, timer, speed = 3000, _animateSpeed = 400, // 分別設定輪播速度及動畫速度 _index = 0, _countIndex = 0; // 先在縮圖前面都插入一個 .nav-bar, 主要是當點選到該縮圖時的效果 $('<span class="nav-bar"></span>').insertBefore($li.find('img')); // 先讓描述區塊的背景有透明度 $block.find('.desc-bg').css('opacity', 0.7); // 如果圖片組數超出一次能顯示的數量時, 產生可以切換的上下鈕 var $controls = null; if(_count>1){ $controls = $thumbs.append('<a href="#prev" class="prev"></a><a href="#next" class="next"></a>').find('.prev, .next'); var $prev = $controls.eq(0).hide(), $next = $controls.eq(1); // 當點擊上下鈕時 $controls.click(function(e){ // 計算要顯示第幾組 _countIndex = Math.floor((e.target.className == 'prev' ? _countIndex - 1 + _count : _countIndex + 1) % _count); // 進行動畫 $ul.stop().animate({ top: _countIndex * _height }, _animateSpeed); // 判斷上下鈕顯示與否 $prev.toggle(_countIndex>0); $next.toggle(_countIndex!=_count-1); return false; }); } // 如果縮圖 li 被點擊時 $li.click(function(){ var $this = $(this), $a = $this.find('a'), $img = $this.find('img'); clearTimeout(timer); _index = $this.index(); // 分別改變左邊顯示區塊的超連結, 圖片, alt 及描述內容 $photoA.attr('href', $a.attr('href')); $photoImg.attr({ src: $img.attr('src'), alt: $img.attr('alt') }); $photoDesc.html($img.attr('alt')); $this.addClass('current').siblings('.current').removeClass('current'); // 如果目前的播放鈕並不是在播放樣式時, 就啟動計時器 if(!$playPauseBtn.hasClass('playPause-btn-play')) timer = setTimeout(auto, speed + _animateSpeed); return false; }).eq(_index).click(); // 當播放鈕被點擊時 $playPauseBtn.click(function(){ // 進行 .playPause-btn-pause 及 .playPause-btn-play 樣式切換 var $this = $(this).toggleClass('playPause-btn-pause playPause-btn-play'), _hasPlay = $this.hasClass('playPause-btn-play'), _txt = _hasPlay ? '播放' : '暫停'; // 如果目前的播放鈕並不是在播放樣式時, 就啟動計時器; 反之則停止計時器 if(_hasPlay) clearTimeout(timer); else timer = setTimeout(auto, speed); $this.attr('title', _txt).text(_txt); return false; }); // 自動輪播使用 function auto(){ _index = (_index + 1) % $li.length; var $tmp = $li.eq(_index).click(); var _indexCount = Math.floor(_index / _set); // 判斷是否要切換縮圖的顯示組數 if($controls != null && (_index == (_countIndex + 1) * _set || _index == 0) && _countIndex != _indexCount){ $next.click(); $tmp.animate({opacity: 1}, _animateSpeed, function(){ $tmp.addClass('current').siblings('.current').removeClass('current'); }) } } }); |
其中讓筆者較頭痛的部份是輪播時判斷是否要切換縮圖顯示組數的部份,若各位有較好的判斷方法的話,請留言分享一下:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 | var _indexCount = Math.floor(_index / _set); // 判斷是否要切換縮圖的顯示組數 if($controls != null && (_index == (_countIndex + 1) * _set || _index == 0) && _countIndex != _indexCount){ $next.click(); $tmp.animate({opacity: 1}, _animateSpeed, function(){ $tmp.addClass('current').siblings('.current').removeClass('current'); }) } |
來看一下預覽結果及效果
不過還有個較特別的地方,在奧運官網原本的效果是不管滑鼠有沒有移到圖片上都不會停止計時器,唯有按下暫停鈕才會停止。因此筆者也就依此方式來設計此範例效果囉!
最後~您覺得這範例跟奧運官網的效果的相似度有多少呢?
不是很多寫程式的都強調要 graceful degradation,我突然很想看看怎麼 graceful degradation。
結果....全世界注目焦點的網站,完全沒有 graceful degradation,連個請開啟 javascript 功能的提示都沒有。
唔...等四年後的下一屆再看看吧 XD
麻煩http://www.nick.com/games 中頭部js特效能否實現一下,尋找了好久都沒有範例,可以延伸的效果!
它這只是一個區塊的寬度是 100% 而已, 其它接下來就是左右滑動切換顯示而已!!!
右側只能顯示兩頁
有辦法讓他顯示超過兩頁嗎?
可以超過兩頁啊, 只要再新增 li 就可以了
男丁大大
http://mimurahitoshi.jp/
像這種的JQ特效
其學習方向應該如何著手呢?
這是有點類 parallax 的效果,
不過其實就是要把每個元素的位置及進出場方向設定好, 然後再進行動畫而已
受用
老師 您好,
請問老師的範例若運用在網站(包含商業網站,非販售HTML專案)是否可以??
可以的, 只要不將範例直接販賣就可以囉!
老師, 請問我有一個表單,如下面程式碼所示,提供給顧客填寫數量,並透過$_POST 產生PDF訂單檔案 (TCPDF)。
若顧客於產品2中數量沒填寫(或寫0),我要產生PDF檔案時,將輸入值為0或空的不顯示,請問我該如何做判別公式??
先供客戶填寫數量,再產生訂單確認表最後轉出PDF,若在確定訂單時 value="0" 我不想在產生PDF時出現,改如何作判別
if ($_POST[xxxnum]!=" && $_POST[xxxnum]!=0) { 使用這個會讓全部隱藏,試過if {} 跟 if else公式都會有此問題? 請問老師該如何解決
產品編號
4 產品描述
5 產品價格
6
7
8 產品編號2
9 產品描述2
10 產品價格2
11
12
你現在的是都會顯示吧?
把$_POST[xxxnum]!=0改成$_POST[xxxnum]!='0'試試
老師,
謝謝你的回覆,但還是空白。我有嘗試if else 也是空白。不知是否我語法錯誤。
下面是form傳給PHP執行pdf程式碼,麻煩老師你幫我看一下
$NUM001=$_POST['NUMF001']
$NUM002=$_POST['NUMF002']
$NUM003=$_POST['NUMF003']
........
//TCPDF 產出PDF
if ($NUM001!=" && $NUM001!='0' ) {
$pdf->Cell (15, 6, "Pro_num",1,0,"C");
$pdf->Cell (150, 6, "Pro_name ",1,0,"L");
$pdf->Cell (10, 6, "$sing_price ",1,0,"L");
$pdf->Cell (20, 6, "$total_price ",1,0,"L");
$pdf->Ln();
}
if ($NUM002!=" && $NUM002!='0' ) {
$pdf->Cell (15, 6, "Pro_num002",1,0,"C");
$pdf->Cell (150, 6, "Pro_name002 ",1,0,"L");
$pdf->Cell (10, 6, "$sing_price002 ",1,0,"L");
$pdf->Cell (20, 6, "$total_price002 ",1,0,"L");
$pdf->Ln();
}
if ($NUM003!=" && $NUM003!='0' ) {
$pdf->Cell (15, 6, "Pro_num003",1,0,"C");
$pdf->Cell (150, 6, "Pro_name003 ",1,0,"L");
$pdf->Cell (10, 6, "$sing_price003 ",1,0,"L");
$pdf->Cell (20, 6, "$total_price003 ",1,0,"L");
$pdf->Ln();
}
....後面相同到 $NUM050
那你先別產生檔案, 先輸出 log 看一下 $NUM001 值是不是真的是空白或 0
另外...看你從 1 產生到 50...這應該是有規則吧, 寫個 for 迴圈應該就可以省下很多程式了
老師,
謝謝你, 我了解了
感謝!~~
請問老師,這個範例上下的箭頭,可以從一組一組的切換,換成上下圖的切換瀏覽嗎?
是可以的, 可以參考 auto() 中的程式來修改一下就可以了。
不好意思,我看不出文字右方的暫停播放功能用處@@?
一開始沒有按之前應該是會自動輪播切換, 當按下後,應該會停止自動輪播。
謝謝大大無私的分享,真的超受用的。