fancybox什么意思?

Fancybox是一款很绚丽的 jquery弹出层展示插件,一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽。

fancyBox是一种工具,它提供了一种精美的方法来为网页上的图像,html内容和多媒体添加缩放功能。它建立在流行的JavaScript框架jQuery的顶部,并且易于实现和易于定制。

fancybox的应用

第一步:下载fancybox插件。网址:http://fancyapps.com/fancybox/

第二步:创建html文档,images文档,js文档,css文档,把下载下来的fancybox文档中的文件进行分类

图片放到创建的images文档中,js放到创建的js文档中,css放到创建的css文档中

第三步:就是写html代码(引入和fancybox相关的js、css文件)

具体的代码如下:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>FancyBox效果</title>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css">
<!--引入fancybox的样式-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<!--引入jQury库文件-->

<!--第一部分 单纯的fancybox引入-->
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<!--第一部分 单纯的fancybox引入-->

<script type="text/javascript" src="js/jquery.mousewheel-3.0.6.pack.js"></script>
<!--带有鼠标滚动效果的库-->
<style type="text/css">
#content {
width: 800px;
margin: 20px auto;
overflow: hidden;
}

#fancybox-loading,
.fancybox-close,
.fancybox-prev span,
.fancybox-next span {
background-image: url('images/fancybox_sprite.png');
}
/**更改fancybox默认的图片路径**/
</style>
<script type="text/javascript">
$(function() {
$(".fancybox").fancybox();
})
</script>
</head>

<body>
<div id="content">
<!--第一部分 单纯的fancybox引入-->
<div>
<a href="images/1_b.jpg" data-fancybox-group="gallery">
<img src="images/1_s.jpg" height="150" width="150">
</a>
<a href="images/1_b.jpg" data-fancybox-group="gallery">
<img src="images/2_s.jpg" height="150" width="150">
</a>
<a href="images/1_b.jpg" data-fancybox-group="gallery">
<img src="images/3_s.jpg" height="150" width="150">
</a>
<a href="images/1_b.jpg" data-fancybox-group="gallery">
<img src="images/4_s.jpg" height="150" width="150">
</a>
</div>
<!--第一部分 单纯的fancybox引入-->
</div>
</body>

</html>

展示的效果图如下:
点击前:

1.jpg

点击后:

2.jpg

更多前端开发知识,请查阅 HTML中文网 !!

以上就是fancybox什么意思?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏