前些天做一个网站，突发奇想的想要做弹出图片那种显示，下面把代码分享给大家，很简单，很好用：
1.网页的<head>部分引入依赖的JS和CSS
<!-- Add jQuery library -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />
2.<head>部分加入需要图片特效的触发JS代码
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
3.加入需要弹出图片的HTML部分
<h1> 打印时间</h1>
<a class="fancybox" href="img/print_time.jpg">
<img src="./img/print_time.jpg"/>
</a>
效果图：
点击前
点击后
扫一扫
2697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
