图片放大镜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 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
js面向对象编程之如何实现方法重载
Jul 02 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
分享Javascript实用方法二
Dec 13 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
javascript中floor使用方法总结
Feb 02 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
浅析TypeScript 命名空间
Mar 19 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
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
IE8 下的Js错误HTML Parsing Error...
2009/08/14 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
浅析Python中signal包的使用
2015/11/13 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Python实现账号密码输错三次即锁定功能简单示例
2019/03/29 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
科沃斯机器人官网商城:Ecovacs
2016/08/29 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
小区门卫工作职责
2013/12/14 职场文书
管事部库房保管员岗位职责
2014/02/21 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
销售目标责任书
2014/07/23 职场文书
就业协议书
2014/09/12 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
陈斌强事迹观后感
2015/06/17 职场文书