HTML5+CSS3+Jquery實現3D焦點圖相冊插件
功能如下:
1、除了鼠標之外,點擊放大圖像后能夠用鍵盤 左右方向鍵控制 ESC鍵退出放大圖像。
2、ie6下面部分功能不完整,比方點擊放大圖像后背景不透明,無法加載上一頁、下一頁等,但基礎功能可以用。
3、由于images\001\目錄圖像尺寸是100_100px,所以圖片墻圖像大點則被拉變形,需要自行調整尺寸。
4、無法播放優酷等的視頻,視頻播放鏈接可以直接填寫圖片,<a href=""></a>外圍需要設置高寬,否則圖片會非常小。
5、點擊放大圖像之后,會自動停止,需要點擊滾動條才能重新自動播放。
6、點擊放大圖像之后,再點擊右上角繼續放大,如果再點擊上一張或下一張,則圖像自動縮小至放大尺寸。
7、點擊放大圖像之后,播放當中如果遇到flash,則自動適應尺寸,圖像無變化。
8、放大播放第一輪圖像會顯示縮略圖,連續第二輪重新播放則不顯示縮略圖,重新點擊放大圖像之后則又顯示縮略圖,同樣第二輪重新播放則不顯示。播放flash之后,則不再顯示縮略圖,重新打開則顯示。
9、原圖像尺寸不要超過屏幕,如超出原圖像尺寸會撐出x,y滾動條。
<!-- 3dwall_001 begin -->
這之間的代碼為一整個區塊,高 502px 寬隨區塊增加而自動延伸,可以自己調整尺寸,但要加在一起等于區塊尺寸,如果要擴展區塊,直接連注釋代碼一起復制,擴展區塊后圖像需要新增或用原圖像。原圖像名稱定義 images/002/001.jpg 縮略圖像名稱定義 images/002/001a.jpg
<!-- 3dwall_001 end -->
<a class="image-icon" rel="gallery[modal]" title="html6game" href="images/002/001.jpg"> //圖片類型 class="image-icon" "video-icon" "article-icon" || 鼠標放上顯示的標題 title="html6game" || 原圖像鏈接地址 href="images/002/001.jpg"
<a class="video-icon" rel="gallery[modal]" title="html6game" href="http://www.油Tube.com/watch?v=DDgoDooApwM"> //播放類型 視頻播放格式 http://www.油Tube.com/watch?v=DDgoDooApwM&width=960&height=500 &width=寬度 &height=高度 需要連寫。
<a class="article-icon" title="前端開發網" href="#"> //閱讀類型 href="#" 可以替換成 還可以加 target="_blank" 在新建窗口打開鏈接。
<strong>html6game 3dwall 001</strong> //標題
</strong>html53d墻圖片。。 »</em> //摘要
<img height="298" width="318" src="images/001/001.jpg" alt="請查看圖片"> //縮略圖高寬 圖像鏈接地址
效果如下: