幻灯片/轮播
全屏动态缩略图导航幻灯片插件
PetitQ
这是一款使用 jQuery 制作的全屏动态缩略图导航幻灯片插件。在该幻灯片插件的左侧有几个导航按钮，点击按钮后会弹出一个盒型导航框，其中有缩略图导航，点击缩略图后页面背景会切换为该缩略图的大图。内容面板的滚动条使用的是神奇的 jScrollPane Plugin。插件中还使用了 jQuery 2d transformation plugin 用于旋转那些小方块。同时使用 jQuery Easing Plugin 来增加一些动画效果。
HTML 代码：
首先在网格覆盖的地方 div 放置背景图片：
也想出现在这里？联系我们吧
<div id="mb_background" class="mb_background">
<img class="mb_bgimage" src="images/default.jpg" alt="Background"/>
<div class="mb_overlay"></div>
</div>
然后创建一个 div 来放置一些小方块，这些小方块被随机放在不同的地方并各自有不同的旋转角度:
<div id="mb_pattern" class="mb_pattern"></div>
上面的 div 在 demo 中放置了 16 个小方块。左侧菜单的结构如下:
<div class="mb_heading">
<h1>Lack of Color</h1>
</div>
<div id="mb_menu" class="mb_menu">
<a href="#" data-speed="600" data-easing="easeOutBack">About</a>
<a href="#" data-speed="1000" data-easing="easeInExpo">Work</a>
<a href="#" data-speed="600" data-easing="easeOutBack">Media</a>
<a href="#" data-speed="1000" data-easing="easeInExpo">Contact</a>
</div>
这里定义了两个“data-”属性用来控制盒子运动的速度和 easing 效果。更多的关于 html5 自定义 data 属性方面的资料请参考： HTML 5 data- Attributes 。接着是创建弹出的盒子内容区域。这里使用一个 class 为 mb_content_wrapper 的包裹 div 包住所有的内容。在里面多个 class 为 mb_content 的内容块和一个用于关闭盒子的关闭按钮。
<div id="mb_content_wrapper" class="mb_content_wrapper">
<span class="mb_close"></span>
<div class="mb_content">
<h2>About</h2>
<div class="mb_content_inner">
<p>Some text...</p>
</div>
</div>
<div class="mb_content">
...</div>
<div class="mb_content">
...</div>
<div class="mb_content">
...</div>
</div>
其中的缩略图内容块的结构如下：
<div class="mb_content_inner">
<p>...</p>
<ul id="mb_imagelist" class="mb_imagelist">
<li><img src="images/small/1.jpg" alt="image1" data-bgimg="images/image1.jpg"/></li>
<li><img src="images/small/2.jpg" alt="image2" data-bgimg="images/image2.jpg"/></li>
<li>...</li>
</ul>
<p>...</p>
</div>
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
