盛悦个人博客 - 个人学习笔记 | Cloud Zoom插件实现图片放大镜效果

您现在的位置是：网站首页 > 心得笔记

Cloud Zoom插件实现图片放大镜效果

盛悦2019-05-22共662人围观

简介Cloud Zoom是一个图像放大jQuery插件，效果堪比Magic Zoom。相对于流行jQZoom插件，Cloud Zoom体积小，有更多的功能和更强大的跨浏览器兼容性。

运行效果：

1、html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="图片放大镜,Cloud Zoom" />
    <meta content="Liu Renfei" name="author" />
    <title>演示：图片放大镜-Cloud Zoom</title>
    <script type="text/JavaScript" src="/admin/js/jquery.min.js"></script>
    <script type="text/JavaScript" src="/admin/js/cloud-zoom.1.0.2.min.js"></script>
</head>
<body>
    <a class="cloud-zoom" id="zoom1" href="/admin/img/bigimage00.jpg" rel="adjustX: 10, adjustY:-4, softFocus:true">
        <img src="/admin/img/smallimage.jpg" title="Optional title display" alt="" />
    </a>
    <a href='/admin/img/bigimage00.jpg' class='cloud-zoom-gallery' title='Thumbnail 1'
       rel="useZoom: 'zoom1', smallImage: '/admin/img/smallimage.jpg' "><!--bigimage00主图1-->
        <img src="/admin/img/tinyimage.jpg" alt = "Thumbnail 1"/><!--主图下面显示的小图1-->
    </a>
    <a href='/admin/img/bigimage01.jpg' class='cloud-zoom-gallery' title='Thumbnail 2'
       rel="useZoom: 'zoom1', smallImage: ' /admin/img/smallimage-1.jpg'"><!--bigimage01主图2-->
        <img src="/admin/img/tinyimage-1.jpg" alt = "Thumbnail 2"/><!--主图下面显示的小图2-->
    </a>
    <a href='/admin/img/bigimage02.jpg' class='cloud-zoom-gallery' title='Thumbnail 3'
       rel="useZoom: 'zoom1', smallImage: '/admin/img/smallimage-2.jpg' "><!--bigimage03点击主图下对应小图后主图3的图片-->
        <img src="/admin/img/tinyimage-2.jpg" alt = "Thumbnail 3"/><!--主图下面显示的小图3和鼠标悬浮在主图上的模糊图层-->
    </a>
</body>
</html>

2、css

/* This is the moving lens square underneath the mouse pointer. */
.cloud-zoom-lens {
    border: 4px solid #888;
    margin:-4px;   /* Set this to minus the border thickness. */
    background-color:#fff;
    cursor:move;
}

/* This is for the title text. */
.cloud-zoom-title {
    font-family:Arial, Helvetica, sans-serif;
    position:absolute !important;
    background-color:#000;
    color:#fff;
    padding:3px;
    width:100%;
    text-align:center;
    font-weight:bold;
    font-size:10px;
    top:0px;
}

/* This is the zoom window. */
.cloud-zoom-big {
    border:4px solid #ccc;
    overflow:hidden;
}

/* This is the loading message. */
.cloud-zoom-loading {
    color:white;
    background:#222;
    padding:3px;
    border:1px solid #000;
}

注意：在引入cloud-zoom.min.js后可能会报错：$.browser is undefined???? cloud-zoom.min.js下载地址：https://blog.blonglee.me/js/cloud-zoom.1.0.2.min.js

为什么会报错呢？下面给出爬坑方案：

jQuery 从 1.9 版开始，移除了 $和$ .browser.version ，取而代之的是 $.support 。在更新的 2.0 版本中，将不再支持 IE 6/7/8。以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。

解决方法加入以下js即可

(function(jQuery){

if(jQuery.browser) return;

jQuery.browser = {};
jQuery.browser.mozilla = false;
jQuery.browser.webkit = false;
jQuery.browser.opera = false;
jQuery.browser.msie = false;

var nAgt = navigator.userAgent;
jQuery.browser.name = navigator.appName;
jQuery.browser.fullVersion = ''+parseFloat(navigator.appVersion);
jQuery.browser.majorVersion = parseInt(navigator.appVersion,10);
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
jQuery.browser.opera = true;
jQuery.browser.name = "Opera";
jQuery.browser.fullVersion = nAgt.substring(verOffset+6);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
jQuery.browser.msie = true;
jQuery.browser.name = "Microsoft Internet Explorer";
jQuery.browser.fullVersion = nAgt.substring(verOffset+5);
}
// In Chrome, the true version is after "Chrome"
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
jQuery.browser.webkit = true;
jQuery.browser.name = "Chrome";
jQuery.browser.fullVersion = nAgt.substring(verOffset+7);
}
// In Safari, the true version is after "Safari" or after "Version"
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
jQuery.browser.webkit = true;
jQuery.browser.name = "Safari";
jQuery.browser.fullVersion = nAgt.substring(verOffset+7);
if ((verOffset=nAgt.indexOf("Version"))!=-1)
jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
}
// In Firefox, the true version is after "Firefox"
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
jQuery.browser.mozilla = true;
jQuery.browser.name = "Firefox";
jQuery.browser.fullVersion = nAgt.substring(verOffset+8);
}
// In most other browsers, "name/version" is at the end of userAgent
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) <
(verOffset=nAgt.lastIndexOf('/')) )
{
jQuery.browser.name = nAgt.substring(nameOffset,verOffset);
jQuery.browser.fullVersion = nAgt.substring(verOffset+1);
if (jQuery.browser.name.toLowerCase()==jQuery.browser.name.toUpperCase()) {
jQuery.browser.name = navigator.appName;
}
}
// trim the fullVersion string at semicolon/space if present
if ((ix=jQuery.browser.fullVersion.indexOf(";"))!=-1)
jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix);
if ((ix=jQuery.browser.fullVersion.indexOf(" "))!=-1)
jQuery.browser.fullVersion=jQuery.browser.fullVersion.substring(0,ix);

jQuery.browser.majorVersion = parseInt(''+jQuery.browser.fullVersion,10);
if (isNaN(jQuery.browser.majorVersion)) {
jQuery.browser.fullVersion = ''+parseFloat(navigator.appVersion);
jQuery.browser.majorVersion = parseInt(navigator.appVersion,10);
}
jQuery.browser.version = jQuery.browser.majorVersion;
})(jQuery);

将以上js另存为browser.js然后在jsp中引入即可！！！这样可能会比较麻烦，但是如果你不怕后续的影响，也可以简单粗暴的直接将 cloud-zoom.1.0.2.min.js 中的$.browser用$.support替换！！！

上一篇：jquery获取当前url

下一篇：瀑布流布局实现图片延迟加载特效