1.目錄結(jié)構(gòu)
源碼
- project
- css
- js
- image
- index1
- index2
- index3
- index4
- index.html
index1到index4分為四個iframe標(biāo)簽引入的可單獨分離的主頁，相當(dāng)于組件的原理，其中index作為主頁，index1是首頁全屏輪播圖，其他都是單獨的相冊風(fēng)格，也可單獨使用。
index.html的iframe引入其他組件：
<div class="section section2">
<div class="container" style="height: 100%;">
<iframe src="index1/index.html" style="width: 100%;height: 100%;border: none;"></iframe>
</div>
</div>
<div class="section section3">
<div class="container" style="height: 100%;">
<iframe src="index2/index.html" style="width: 100%;height: 100%;border: none;"></iframe>
</div>
</div>
<div class="section section4">
<div class="container" style="height: 100%;">
<iframe src="index3/index.html" style="width: 100%;height: 100%;border: none;"></iframe>
</div>
</div>
<div class="section section5">
<div class="container" style="height: 100%;">
<iframe src="index4/index.html" style="width: 100%;height: 100%;border: none;"></iframe>
</div>
</div>
iframe一些基本屬性說明：
| 屬性 | 值 | 描述 |
|---|---|---|
| align | left right top middle bottom |
HTML5 不支持。HTML 4.01 已廢棄。 規(guī)定如何根據(jù)周圍的元素來對齊 <iframe>。 |
| frameborder | 1 0 |
HTML5 不支持。規(guī)定是否顯示 <iframe> 周圍的邊框。 |
| height | pixels | 規(guī)定 <iframe> 的高度。 |
| longdesc | URL | HTML5 不支持。規(guī)定一個頁面，該頁面包含了有關(guān) <iframe> 的較長描述。 |
| marginheight | pixels | HTML5 不支持。規(guī)定 <iframe> 的頂部和底部的邊距。 |
| marginwidth | pixels | HTML5 不支持。規(guī)定 <iframe> 的左側(cè)和右側(cè)的邊距。 |
| name | name | 規(guī)定 <iframe> 的名稱。 |
| sandbox | "" allow-forms allow-same-origin allow-scripts allow-top-navigation |
對 <iframe> 的內(nèi)容定義一系列額外的限制。 |
| scrolling | yes no auto |
HTML5 不支持。規(guī)定是否在 <iframe> 中顯示滾動條。 |
| seamless | seamless | 規(guī)定 <iframe> 看起來像是父文檔中的一部分。 |
| src | URL | 規(guī)定在 <iframe> 中顯示的文檔的 URL。 |
| srcdoc | HTML_code | 規(guī)定頁面中的 HTML 內(nèi)容顯示在 <iframe> 中。 |
| width | pixels | 規(guī)定 <iframe> 的寬度。 |
輪播圖效果：
菜單通過div+li+css定義實現(xiàn)動態(tài)切換效果，采用的是Bootstrap的樣式，無需自己實現(xiàn)：
<ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
<li class="active">
<a href="javascript:void(0)">首頁</a>
</li>
<li class="dropdown">
<a href="javascript:void(0)">
業(yè)務(wù)體系
</a>
<div class="dropdown_menu">
<a href="#">Custom Menu</a>
<a href="#">Custom Menu</a>
<a href="#">Custom Menu</a>
</div>
</li>
<li class="dropdown">
<a href="javascript:void(0)">直營園</a>
<div class="dropdown_menu">
<a href="#">Custom Menu</a>
<a href="#">Custom Menu</a>
<a href="#">Custom Menu</a>
</div>
</li>
<li>
<a href="javascript:void(0)">行知資訊</a>
</li>
<li>
<a href="javascript:void(0)">關(guān)于我們</a>
</li>
<li>
<a href="javascript:void(0)">聯(lián)系合作</a>
</li>
</ul>
2.index1組件，鼠標(biāo)懸?？ㄆ?D翻頁特效
這里涉及幾個關(guān)鍵的css樣式屬性
- transform-style: preserve-3d
- transform: rotateY(180deg)
transform–style屬性指定嵌套元素是怎樣在三維空間中呈現(xiàn)。
注意： 使用此屬性必須先使用 transform 屬性.
語法：
transform-style: flat | preserve-3d;
| 值 | 描述 |
|---|---|
| flat | 表示所有子元素在2D平面呈現(xiàn)。 |
| preserve-3d | 表示所有子元素在3D空間中呈現(xiàn)。 |
Transform屬性定義及使用說明：
Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個屬性允許你將元素旋轉(zhuǎn)，縮放，移動，傾斜等。
語法：
transform: none|transform-functions;
none 定義不進(jìn)行轉(zhuǎn)換。
matrix(n,n,n,n,n,n) 定義 2D 轉(zhuǎn)換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉(zhuǎn)換，使用 16 個值的 4x4 矩陣。
translate(x,y) 定義 2D 轉(zhuǎn)換。
translate3d(x,y,z) 定義 3D 轉(zhuǎn)換。
translateX(x) 定義轉(zhuǎn)換，只是用 X 軸的值。
translateY(y) 定義轉(zhuǎn)換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。
scale(x[,y]?) 定義 2D 縮放轉(zhuǎn)換。
scale3d(x,y,z) 定義 3D 縮放轉(zhuǎn)換。
scaleX(x) 通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。
scaleY(y) 通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。
scaleZ(z) 通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換。
rotate(angle) 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉(zhuǎn)。
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉(zhuǎn)。
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉(zhuǎn)。
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。
skewX(angle) 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。
perspective(n) 為 3D 轉(zhuǎn)換元素定義透視視圖。
3.index2，jquery電影相冊圖片預(yù)覽
這里用到很多第三方的樣式和js,html代碼不多
<body>
<div class="gallery_container">
<div class="gallery_top"></div>
<div class="gallery_content">
<div class="gallery_thumbnails">
<a href="images/gallery/11.jpg" title="電影《一一》的海報"><img src="images/gallery/11_min.jpg"/></a>
<a href="images/gallery/back_to_future.jpg" title="電影《重返未來》的海報"><img src="images/gallery/back_to_future_min.jpg"/></a>
<a href="images/gallery/brave_heart.jpg" title="電影《勇敢的心》的海報"><img src="images/gallery/brave_heart_min.jpg"/></a>
<a href="images/gallery/bwbj.jpg" title="電影《霸王別姬》的海報"><img src="images/gallery/bwbj_min.jpg"/></a>
<a href="images/gallery/district9.jpg" title="電影《第九區(qū)》的海報"><img src="images/gallery/district9_min.jpg"/></a>
<a href="images/gallery/effect.jpg" title="電影《蝴蝶效應(yīng)》的海報"><img src="images/gallery/effect_min.jpg"/></a>
<a href="images/gallery/fightClub.jpg" title="電影《搏擊會》的海報"><img src="images/gallery/fightClub_min.jpg"/></a>
<a href="images/gallery/forrest.jpg" title="電影《阿甘正傳》的海報"><img src="images/gallery/forrest_min.jpg"/></a>
<a href="images/gallery/inception.jpg" title="電影《盜夢空間》的海報"><img src="images/gallery/inception_min.jpg"/></a>
<a href="images/gallery/jarhead.jpg" title="電影《鍋蓋頭》的海報"><img src="images/gallery/jarhead_min.jpg"/></a>
<a href="images/gallery/lc.jpg" title="電影《浪潮》的海報"><img src="images/gallery/lc_min.jpg"/></a>
<a href="images/gallery/lord_of_war.jpg" title="電影《戰(zhàn)爭之王》的海報"><img src="images/gallery/lord_of_war_min.jpg"/></a>
<a href="images/gallery/metal.jpg" title="電影《全金屬外殼》的海報"><img src="images/gallery/metal_min.jpg"/></a>
<a href="images/gallery/oceans.jpg" title="電影《海洋》的海報"><img src="images/gallery/oceans_min.jpg"/></a>
<a href="images/gallery/prestige.jpg" title="電影《致命魔術(shù)》的海報"><img src="images/gallery/prestige_min.jpg"/></a>
<a href="images/gallery/rls.jpg" title="電影《入殮師》的海報"><img src="images/gallery/rls_min.jpg"/></a>
<a href="images/gallery/sixth_sense.jpg" title="電影《第六感》的海報"><img src="images/gallery/sixth_sense_min.jpg"/></a>
<a href="images/gallery/the_boy_in.jpg" title="電影《穿條紋上衣的男孩》的海報"><img src="images/gallery/the_boy_in_min.jpg"/></a>
<a href="images/gallery/truman.jpg" title="電影《楚門的世界》的海報"><img src="images/gallery/truman_min.jpg"/></a>
<a href="images/gallery/rzdf.jpg" title="電影《讓子彈飛》的海報"><img src="images/gallery/rzdf_min.jpg"/></a>
<div class="clear_both"></div>
</div>
<div class="gallery_preview">
<a href="images/gallery/11.jpg"></a>
</div>
<div class="clear_both"></div>
<div class="gallery_contact"><p><a class="contactLink" href="https://blog.csdn.net/lucky_fang">Contact Me</a></p></div>
<div class="gallery_caption"></div>
<div class="clear_both"></div>
<div class="gallery_preload_area"></div>
</div>
<div class="gallery_bottom"></div>
</div>
</body>
4.index3，jquery圖片墻手風(fēng)琴
切割的效果，根據(jù)鼠標(biāo)焦點放大和變化
5.index4，環(huán)形旋轉(zhuǎn)3D相冊
和index1一樣
這里涉及幾個關(guān)鍵的css樣式屬性：文章來源：http://www.zghlxwxcb.cn/news/detail-410827.html
transform-style: preserve-3d
transform: rotateY(180deg)文章來源地址http://www.zghlxwxcb.cn/news/detail-410827.html
6.源碼下載
到了這里，關(guān)于jquery導(dǎo)航圖片全屏滾動、首頁全屏輪播圖，各式相冊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
