您现在的位置是：首页 > 学无止境 > 其他网站首页其他 带缩略图的产品放大镜xzoom-jquery插件
带缩略图的产品放大镜xzoom-jquery插件
- 其他
- 2019-07-06
简介xZoom是一款多功能的jquery图片预览放大镜插件。它支持多种图片放大模式，可以和Fancy Box或Magnific Pop-up等插件结合使用，功能非常强大。字数
1097.5
要仿电商网站，就需要一个带缩略图的产品放大镜的插件，我觉得这个还不错，推荐给大家。
这个插件有好几种效果，但是在初始化插件的时候，把几种效果的初始化放在一个js文件里面了，所以我专门做了一个案例，提取了一个效果，可供大家参考。
案例下载
一、引入外部文件
必须要的三个文件是：
<link rel="stylesheet" href="css/xzoom.css">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/xzoom.js"></script>
如果需要点击大图看到灯箱效果，可以用fancybox或者magnific-popup效果，那么就需要根据自己的需求引入不同的文件，这个案例用的是magnific-popup效果，所以再额外引入了这两个文件。
<link rel="stylesheet" href="css/magnific-popup.css">
<script type="text/javascript" src="js/magnific-popup.js"></script>
二、添加HTML代码
html结构很简单，准备好缩略图，阅览图，高清图就可以了。
三、初始化插件
如果不需要灯箱效果，直接简单初始化就可以了。
有很多的参数可以设置，比如默认的鼠标点击缩略图，可以改成鼠标经过缩略图等等。
如果需要灯箱效果，则还需要加上灯箱效果的初始化。
转载：
感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/270.html”。
- 其他
- 2019-07-06
要仿电商网站，就需要一个带缩略图的产品放大镜的插件，我觉得这个还不错，推荐给大家。
这个插件有好几种效果，但是在初始化插件的时候，把几种效果的初始化放在一个js文件里面了，所以我专门做了一个案例，提取了一个效果，可供大家参考。
案例下载
一、引入外部文件
必须要的三个文件是：
<link rel="stylesheet" href="css/xzoom.css">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/xzoom.js"></script>
如果需要点击大图看到灯箱效果，可以用fancybox或者magnific-popup效果，那么就需要根据自己的需求引入不同的文件，这个案例用的是magnific-popup效果，所以再额外引入了这两个文件。
<link rel="stylesheet" href="css/magnific-popup.css">
<script type="text/javascript" src="js/magnific-popup.js"></script>
二、添加HTML代码
html结构很简单，准备好缩略图，阅览图，高清图就可以了。
三、初始化插件
如果不需要灯箱效果，直接简单初始化就可以了。
有很多的参数可以设置，比如默认的鼠标点击缩略图，可以改成鼠标经过缩略图等等。
如果需要灯箱效果，则还需要加上灯箱效果的初始化。
转载： 感谢您对莫愁个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源莫愁个人博客 https://www.mochoublog.com/study/270.html”。
