这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
本文给大家分享的是使用使用 JQuery FancyBox 插件实现图片展示的 3 种风格的特效,非常的简单实用,有需要的小伙伴可以查看下
FancyBox 是一个用于显示图像,html 内容和多媒体的 lightbox 工具。
jquery 插件之 fancybox 弹出框特效,与广为人之的 lightbox 插件比较类拟, 可以展示单张图片,也可展示一组图片,它还可以展示自定义的内容与 ajax 载入外部文件的内容等,功能也是很方便与实用的。
Demo effect(image gallery):
Sample code:
- <link href="~/Content/jquery.fancybox.CSS" rel="stylesheet" />
- <p>
- <h2>
- First test(Image gallery)
- </h2>
- <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg">
- <img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg"
- alt="" />
- </a>
- <a class="fancybox1" rel="group" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg">
- <img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg"
- alt="" />
- </a>
- </p>
- <script src="~/Scripts/jquery-2.1.4.min.js">
- </script>
- <script src="~/Scripts/jquery.fancybox.pack.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".fancybox1").fancybox();
- });
- </script>
Demo effect(single images):
Sample code:
- <link href="~/Content/jquery.fancybox.css" rel="stylesheet" />
- <p>
- <h2>
- Single images
- </h2>
- <a id="single_1" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg"
- title="Lupines (Kiddi Einars)">
- <img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg"
- alt="" />
- </a>
- <a id="single_2" href="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_b.jpg"
- title="Colorful Feldberg II (STEFFEN EGLY)">
- <img src="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_m.jpg"
- alt="" />
- </a>
- <a id="single_3" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg"
- title="Cannon Needles (JustinPoe)">
- <img src="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg"
- alt="" />
- </a>
- <a id="single_4" href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg"
- title="Making a summer # 3 :) ((Nikon woman))">
- <img src="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg"
- alt="" />
- </a>
- </p>
- <script src="~/Scripts/jquery-2.1.4.min.js">
- </script>
- <script src="~/Scripts/jquery.fancybox.pack.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("#single_1").fancybox({
- helpers: {
- title: {
- type: 'float'
- }
- }
- });
- $("#single_2").fancybox({
- openEffect: 'elastic',
- closeEffect: 'elastic',
- helpers: {
- title: {
- type: 'inside'
- }
- }
- });
- $("#single_3").fancybox({
- openEffect: 'none',
- closeEffect: 'none',
- helpers: {
- title: {
- type: 'outside'
- }
- }
- });
- $("#single_4").fancybox({
- helpers: {
- title: {
- type: 'over'
- }
- }
- });
- });
- </script>
Demo effect(thumbnail):
Sample code:
- <link href="~/Content/jquery.fancybox.css" rel="stylesheet" />
- <link href="~/Content/jquery.fancybox-thumbs.css" rel="stylesheet" />
- <p>
- <h2>
- Thumbnail helper
- </h2>
- <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg"
- title="Bråviken (jarnasen)">
- <img src="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg"
- alt="" />
- </a>
- <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg"
- title="From the garden (*Jilltoo)">
- <img src="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg"
- alt="" />
- </a>
- <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8591/16141566979_347348e72c_b.jpg"
- title="cold forest (picturesbywalther)">
- <img src="http://farm9.staticflickr.com/8591/16141566979_347348e72c_m.jpg"
- alt="" />
- </a>
- <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_b.jpg"
- title="Holly blue (Masa_N)">
- <img src="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_m.jpg"
- alt="" />
- </a>
- </p>
- <script src="~/Scripts/jquery-2.1.4.min.js">
- </script>
- <script src="~/Scripts/jquery.fancybox.pack.js">
- </script>
- <script src="~/Scripts/jquery.fancybox-thumbs.js">
- </script>
- <script type="text/javascript">
- $(document).ready(function() {
- $(".fancybox-thumb").fancybox({
- prevEffect: 'elastic',
- nextEffect: 'elastic',
- helpers: {
- title: {
- type: 'inside'
- },
- thumbs: {
- width: 50,
- height: 50
- }
- }
- });
- });
- </script>
以上就是 3 款 jQuery 插件 fancybox 图片放大展示效果网页特效,应用简单,兼容 IE6 老版本级别浏览器。图片放大只适应大小并自动窗口居中显示。(兼容测试:IE6 及以上、Firefox、Chrome、Opera、Safari、360 等主流浏览器)
来源: http://www.phperz.com/article/17/0408/268720.html