图片放大镜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 相关文章推荐
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
jQuery中Find选择器用法示例
Sep 21 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
angularjs 获取默认选中的单选按钮的value方法
Feb 28 Javascript
详解.vue文件解析的实现
Jun 11 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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
php与paypal整合方法
2010/11/28 PHP
浅谈php冒泡排序
2014/12/30 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
在php7中MongoDB实现模糊查询的方法详解
2017/05/03 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
shell程序中如何注释
2012/01/28 面试题
新闻专业个人求职信
2013/12/19 职场文书
大学生旷课检讨书
2014/01/22 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
网站推广策划方案
2014/06/04 职场文书
防邪知识进家庭活动方案
2014/08/26 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
详解Redis瘦身指南
2021/05/26 Redis
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技