您现在的位置是：网站首页 > 心得笔记
Cloud Zoom插件实现图片放大镜效果
简介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。
解决方法
(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
下一篇：瀑布流布局实现图片延迟加载特效