用 jQuery 實作首頁幻燈片大圖效果


【青林愛閱家分享報】提供生活、親子、知識各方面的最新閱讀趨勢,幫助大小朋友們優遊在童書的繽紛世界裡! 【聯合書報攤快遞】網羅各類型雜誌文章,為您精選最即時的周刊報導、最時尚的流行品味,最深入的知識饗宴。
無法正常瀏覽圖片,請按這裡看說明   無法正常瀏覽內容,請按這裡線上閱讀
新聞  健康  財經  追星  NBA台灣  udn部落格  udnTV  讀書吧  
2015/09/25 第 536 期 |  訂閱/退訂  |  看歷史報份  |  
 
 
 
  學習主題
  新書搶鮮報
   
  學習地圖
  活動快遞
  延伸閱讀主題
   
Good Jam 法式手作果醬食譜與應用 (附 4 款 Flag`s 幸運草單柄醬料碗含浮雕碗蓋)
 
 
 

 
用 jQuery 實作首頁幻燈片大圖效果

製作顯示於頁面上半部主視覺圖片的 製作重點 Slideshow, 主要圖片會顯示於中間, 兩側則分別是上一張與下一張圖片並用黑色半透明圖片覆蓋在上面。由於前後圖片顯示於兩側, 因此畫面寬度即使變動也能維持中間圖片的滿版顯示, 這樣主要圖片就可讓人印象深刻。

製作重點

  • 製作 Slideshow 的圖片列表
  • 以 CSS 準備 Slideshow 外觀
  • 新增圖片的切換處理
首先撰寫 Slideshow 的 HTML, 用 li 元素配置所有圖片, 移動按鈕的連結配置在圖片列
表元素下方。這次範例要使用單一圖片對應各種螢幕大小, 因此不在 img 元素中設定
width、height 屬性, 而是在 CSS 中控制
配置位置一般是放在頁首區域, 也可依照需求配置在頁尾區域也是沒關係的。



接著在 CSS 中設定所有圖片橫向配置, 此外考量如果中間圖片與兩側都以相同的方式顯
示, 會無法突顯出主題, 所以兩側圖片上用半透明的點狀圖片覆蓋, 如此可讓中間顯示圖
片更明顯, 兩側圖片更有設計感, 讓整個幻燈片效果更有特色


.......﹝詳細內容

 

更多內容請見 《接案我最行: jQuery 經典範例必殺技 》

  

 
 
完全詳解! 免費雲端工具活用事典

完全詳解! 免費雲端工具活用事典

在電腦上無論進行文書編輯、各種文件/影片的轉檔、下載檔案...等工作, 都免不了要安裝相對應的軟體, 但網路上下載到的軟體品質參差不齊, 有些軟體更挾帶數個惡意程式, 一旦不慎安裝到電腦, 往往造成系統變慢、瀏覽器被綁架、中毒等慘劇發生...!
別再讓這種慘劇一再發生了!其實大部分的電腦使用需求, 在網路上都有免費的雲端工具可以解決, 這些工具完全不用安裝, 直接連上網就可以使用。本書嚴選 47 個熱門雲端服務, 從【轉換檔案格式、影音下載、簡報、問卷、企劃圖表製作, 到 PDF 文書處理、修圖合成、影片後製】, 各種電腦需求一應俱全。書中將 Step by Step 介紹這些免費工具的活用技巧, 改變您原本工作的習慣, 除了長保電腦效能, 更能將生活、工作效率發揮到極限!

......... 更多內容 >>

   
設計職人必備 Photoshop 精緻筆刷素材集 設計職人必備 Photoshop 精緻筆刷素材集

【別當肝苦設計人,早點下班不是夢!】
稿子都快完成了,客人又要你加東加西,什麼花草圖案、雷電特效、古典花紋...甚至要換個風格!哪來的時間啊?這時候就要靠超強的 PS 筆刷來幫忙啦!
買到這本書,你將擁有一套超威的筆刷圖庫,內含 10 大類 / 215 種設計職人愛用、常用、超實用的 PS 筆刷,什麼效果都能快速變出來,身為設計師,為了愛護你的肝,一定要收藏啊!

                          .........多內容 >>

 
 
改善體能的協調性訓練與交叉訓練  

協調性訓練」是一種提高行動調節能力的特別訓練。

在青少年時期實施,可以促進身體、腦部、神經系統發育得更均衡;在成人期施行,可以讓運動更流暢,提昇正確運動的能力,並學會技巧或讓技巧變得更純熟,是基礎訓練的一種。

運動訓練分成「體能訓練」與「專業技巧、戰術訓練」。體能訓練重視的肌力、速度、耐力等項目。

體能的構成要素,大抵分為「引發」動作的能力、「調節」能力、「續航」力等,在這之中,調節能力又包含了協調能力。

所謂協調能力,就是能順暢地透過眼、耳等五感來察覺狀況,並經由頭腦判斷,讓肌肉活動的一連串過程。訓練協調能力能提高以下幾種能力。

訓練時要注意的不是投球時的速度或強度,而是動作部位、輔助性動作部位等身體各部位,讓全身連動起來。

舉手投球、反手投球
分別自上、下方投球,讓肩關節、上半身的旋轉、重心腳的位置等上半身的變化,與對應的下半身動作彼此連動。

右手投球、左手投球
用相同的姿勢、力道分別以慣用手與另一隻手投球,讓右半身與左半身的動作彼此連動。

.......﹝詳細內容

  

  更多內容請見 《 運動健身知識家 最新版 - 圖解肌肉關節•肌力訓練•耐力訓練•營養補充•運動傷害•基礎理論



 
 
旗 標 出 版 股 份 有 限 公 司
地址:100 台北市杭州南路一段15-1號19樓 電話: (02) 2396-3257
若您對內容有任何建議,歡迎您來信與我們分享 ! 聯絡我們
如果您對內容讚賞有加,希望能轉載,還請務必來信告知 ! 以便於處理。
  免費電子報 | 著作權聲明 | 隱私權聲明 | 聯絡我們
udnfamily : news | video | money | stars | health | reading | mobile | data | NBA TAIWAN | blog | shopping

沒有留言:

張貼留言