您现在的位置是:首页 > 学无止境 > 其他网站首页其他 带缩略图的产品放大镜xzoom-jquery插件

带缩略图的产品放大镜xzoom-jquery插件

  • 莫愁
  • 其他
  • 2019-07-06
简介xZoom是一款多功能的jquery图片预览放大镜插件。它支持多种图片放大模式,可以和Fancy Box或Magnific Pop-up等插件结合使用,功能非常强大。
字数 1421.5

要仿电商网站,就需要一个带缩略图的产品放大镜的插件,我觉得这个还不错,推荐给大家。

这个插件有好几种效果,但是在初始化插件的时候,把几种效果的初始化放在一个js文件里面了,所以我专门做了一个案例,提取了一个效果,可供大家参考。

zoom.jpg

 

案例下载

zoom  提取码: cryt
zoom (2.8 MB)

 

一、引入外部文件

必须要的三个文件是:

<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”。

文章评论

    • 评论
    人参与,条评论

技术在线

服务时间

周一至周日 12:00-22:00

关闭下雪
关闭背景特效