图片放大镜jquery.jqzoom.js使用实例附放大镜图标


Posted in Javascript onJune 19, 2014

图片放大镜jquery.jqzoom.js使用实例附放大镜图标
1. jquery.jqzoom.js

//**************************************************************
// jQZoom allows you to realize a small magnifier window,close
// to the image or images on your web page easily.
//
// jqZoom version 2.2
// Author Doc. Ing. Renzi Marco(www.mind-projects.it)
// First Release on Dec 05 2007
// i'm looking for a job,pick me up!!!
// mail: renzi.mrc@gmail.com
//**************************************************************
(function ($) {
$.fn.jqueryzoom = function (options) {
var settings = {
xzoom: 200, //zoomed width default width
yzoom: 200, //zoomed div default width
offset: 10, //zoomed div default offset
position: "right",//zoomed div default position,offset position is to the right of the image
lens: 1, //zooming lens over the image,by default is 1;
preload: 1
};
if (options)
{
$.extend(settings, options);
}
var noalt = '';
$(this).hover(function () {
var imageLeft = $(this).offset().left;
var imageTop = $(this).offset().top;
var imageWidth = $(this).children('img').get(0).offsetWidth;
var imageHeight = $(this).children('img').get(0).offsetHeight;
noalt = $(this).children("img").attr("alt");
var bigimage = $(this).children("img").attr("jqimg");
$(this).children("img").attr("alt", '');
if ($("div.zoomdiv").get().length == 0)
{
$(this).after("<div class='zoomdiv'><img class='bigimg' src='" + bigimage + "'/></div>");
$(this).append("<div class='jqZoomPup'> </div>");
}
if (settings.position == "right")
{
if (imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width)
{
leftpos = imageLeft - settings.offset - settings.xzoom;
} else
{
leftpos = imageLeft + imageWidth + settings.offset;
}
} else
{
leftpos = imageLeft - settings.xzoom - settings.offset;
if (leftpos < 0)
{
leftpos = imageLeft + imageWidth + settings.offset;
}
}
$("div.zoomdiv").css({ top: imageTop, left: leftpos });
$("div.zoomdiv").width(settings.xzoom);
$("div.zoomdiv").height(settings.yzoom);
$("div.zoomdiv").show();
if (!settings.lens)
{
$(this).css('cursor', 'crosshair');
}
$(document.body).mousemove(function (e) {
mouse = new MouseEvent(e);
/*$("div.jqZoomPup").hide();*/
var bigwidth = $(".bigimg").get(0).offsetWidth;
var bigheight = $(".bigimg").get(0).offsetHeight;
var scaley = 'x';
var scalex = 'y';
if (isNaN(scalex) | isNaN(scaley))
{
var scalex = (bigwidth / imageWidth);
var scaley = (bigheight / imageHeight);
$("div.jqZoomPup").width((settings.xzoom) / scalex);
$("div.jqZoomPup").height((settings.yzoom) / scaley);
if (settings.lens)
{
$("div.jqZoomPup").css('visibility', 'visible');
}
}
xpos = mouse.x - $("div.jqZoomPup").width() / 2 - imageLeft;
ypos = mouse.y - $("div.jqZoomPup").height() / 2 - imageTop;
if (settings.lens)
{
xpos = (mouse.x - $("div.jqZoomPup").width() / 2 < imageLeft) ? 0 : (mouse.x + $("div.jqZoomPup").width() / 2 > imageWidth + imageLeft) ? (imageWidth - $("div.jqZoomPup").width() - 2) : xpos;
ypos = (mouse.y - $("div.jqZoomPup").height() / 2 < imageTop) ? 0 : (mouse.y + $("div.jqZoomPup").height() / 2 > imageHeight + imageTop) ? (imageHeight - $("div.jqZoomPup").height() - 2) : ypos;
}
if (settings.lens)
{
$("div.jqZoomPup").css({ top: ypos, left: xpos });
}
scrolly = ypos;
$("div.zoomdiv").get(0).scrollTop = scrolly * scaley;
scrollx = xpos;
$("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex;
});
}, function () {
$(this).children("img").attr("alt", noalt);
$(document.body).unbind("mousemove");
if (settings.lens)
{
$("div.jqZoomPup").remove();
}
$("div.zoomdiv").remove();
});
count = 0;
if (settings.preload)
{
$('body').append("<div style='display:none;' class='jqPreload" + count + "'>sdsdssdsd</div>");
$(this).each(function () {
var imagetopreload = $(this).children("img").attr("jqimg");
var content = jQuery('div.jqPreload' + count + '').html();
jQuery('div.jqPreload' + count + '').html(content + '<img src=\"' + imagetopreload + '\">');
});
}
}
})(jQuery);
function MouseEvent(e) {
this.x = e.pageX;
this.y = e.pageY;
}

2. jqzoom.css

/*jQzoom*/
.jqzoom{
border:1px solid #BBB;
float:left;
position:relative;
padding:0px;
cursor:pointer;
}
div.zoomdiv {
z-index: 999;
position : absolute;
top:0px;
left:0px;
width : 200px;
height : 200px;
background: #ffffff;
border:1px solid #CCCCCC;
display:none;
text-align: center;
overflow: hidden;
}
div.jqZoomPup {
z-index : 999;
visibility : hidden;
position : absolute;
top:0px;
left:0px;
width : 50px;
height : 50px;
border: 1px solid #aaa;
background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;
opacity: 0.5;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(Opacity=50);
}

3. 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>
<title></title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.jqzoom.js" type="text/javascript"></script>
<link href="jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
/*使用jqzoom*/
$(function() {
$(".jqzoom").jqueryzoom({
xzoom: 400, //放大图的宽度(默认是 200)
yzoom: 400, //放大图的高度(默认是 200)
offset: 10, //离原图的距离(默认是 10)
position: "right", //放大图的定位(默认是 "right")
preload: 1
});
});
</script>
</head>
<body>
<div class="jqzoom">
<img src="images/shoe1_small.jpg" style="width:300px; height:300px;" alt="" jqimg="images/shoe1_big.jpg" id="bigImg"/>
</div>
</body>
</html>

附件:放大镜图标(zoomlens.gif)
图片放大镜jquery.jqzoom.js使用实例附放大镜图标

Javascript 相关文章推荐
jQuery DOM操作小结与实例
Jan 07 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
如何从零开始手写Koa2框架
Mar 22 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 #Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 #Javascript
java和javascript获取word文档的书签位置对比
Jun 19 #Javascript
js调试系列 断点与动态调试[基础篇]
Jun 18 #Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 #Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 #Javascript
input标签内容改变的触发事件介绍
Jun 18 #Javascript
You might like
php自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP通过插入mysql数据来实现多机互锁实例
2014/11/05 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
prototype class详解
2006/09/07 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
Json按某个键的值进行排序
2016/12/22 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
Python获取央视节目单的实现代码
2015/07/25 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
python3 kubernetes api的使用示例
2021/01/12 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
如何获取某个日期是当月的最后一天
2013/12/05 面试题
前厅部经理岗位职责范文
2014/02/04 职场文书
一份创业计划书范文
2014/02/08 职场文书
小学安全汇报材料
2014/08/14 职场文书
六五普法宣传标语
2014/10/06 职场文书
学校会议通知范文
2015/04/15 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
小学体育组工作总结
2015/08/13 职场文书
微信早安问候语
2015/11/10 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang