您的当前位置:首页正文

使用纯javascript实现放大镜效果_javascript技巧

2023-12-05 来源:帮我找美食网

jd或者淘宝的具体商品有个放大镜的效果。虽然网上类似插件琳琅满目,应用到项目上有诸多不便,自己抽点时间自己写了个类似插件,积累下代码,何乐而不为呢!!let‘go:

打算把此特效封装成个插件,先把最基本的算法实现,然后再一步步封装吧:

最终实现效果:

html 代码:

代码如下:

css 代码:

代码如下:

貌似什么都没有,开始咱们强大的js之旅吧:

javascript 代码:

代码如下: function createElement(MagnifierId, sImg, bImg) { var Magnifier = $(MagnifierId); Magnifier.style.position = 'relative'; //小图div var smallDiv = $Create("div"); smallDiv.setAttribute("id", "small"); smallDiv.style.position = "absolute"; //遮罩层 var mask = $Create("div"); mask.setAttribute("id", "mask"); mask.style.position = "absolute"; //镜片 var mirror = $Create("div"); mirror.setAttribute("id", "mirror"); mirror.style.opacity = 0.3; mirror.style.position = "absolute"; mirror.style.display = "none"; //小图 var smallImg = $Create("img"); smallImg.setAttribute("src", sImg); smallImg.setAttribute("id", "smallImg"); smallImg.onload = function () { //如果没设置放大镜的height或者width 根据小图大小设置放大镜大小 if (!Magnifier.offsetHeight) { Magnifier.style.width = this.offsetWidth+"px"; Magnifier.style.height = this.offsetHeight + "px"; } //遮罩层大小和小图一样 mask.style.opacity = "0"; mask.style.width = this.width + 'px'; mask.style.height = this.height + "px"; mask.style.zIndex = 2; bigDiv.style.left = this.width + 5 + "px"; bigDiv.style.top = "-5px"; } smallDiv.appendChild(mask); smallDiv.appendChild(mirror); smallDiv.appendChild(smallImg); //视窗 var bigDiv = $Create("div"); bigDiv.setAttribute("id", "big"); bigDiv.style.position = "absolute"; bigDiv.style.overflow = "hidden"; bigDiv.style.display = "none"; var bigImg = $Create("img"); bigImg.setAttribute("src", bImg); bigImg.setAttribute("id", "bigImg"); bigImg.style.position = "absolute"; bigDiv.appendChild(bigImg); Magnifier.appendChild(smallDiv); Magnifier.appendChild(bigDiv); } function setMagnifierStyle(mirrorStyle,shichuangStyle) { //mirror for (var item in mirrorStyle) { mirror.style[item] = mirrorStyle[item]; } for (var item in shichuangStyle) { $("big").style[item] = shichuangStyle[item]; } } function registerEvent() { $("mask").onmouseover = function () { $("big").style.display = "block"; mirror.style.display = "block"; } $("mask").onmouseout = function () { $("big").style.display = "none"; mirror.style.display = "none"; } $("mask").onmousemove = function (evt) { var oEvent = evt || event; var disX = oEvent.offsetX; var disY = oEvent.offsetY; var mirrorLeft = disX - mirror.offsetWidth / 2; var mirrorTop = disY - mirror.offsetHeight / 2; if (mirrorLeft < 0) { mirrorLeft = 0; } else if (mirrorLeft > mask.offsetWidth - mirror.offsetWidth) { mirrorLeft = mask.offsetWidth - mirror.offsetWidth; } if (mirrorTop < 0) { mirrorTop = 0; } else if (mirrorTop > mask.offsetHeight - mirror.offsetHeight) { mirrorTop = mask.offsetHeight - mirror.offsetHeight; } mirror.style.top = mirrorTop + "px"; mirror.style.left = mirrorLeft + "px"; var paX = mirrorTop / (mask.offsetHeight - mirror.offsetHeight); var paY = mirrorLeft / (mask.offsetWidth - mirror.offsetWidth); $("bigImg").style.top = -paX * ($("bigImg").offsetHeight - $("big").offsetHeight) + "px"; $("bigImg").style.left = -paY * ($("bigImg").offsetWidth - $("big").offsetWidth) + "px"; } } function $(id) { return document.getElementById(id); } function $Create(type) { return document.createElement(type); }

最后再 onload小小的调用一下:

代码如下: window.onload = function () { createElement("Magnifier", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg"); setMagnifierStyle({ "width": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" }); registerEvent(); }

效果总算出来了耶,

2. 接下来咱们封装吧:

Magnifer类代码:

代码如下: function Magnifier( MagnifierId, //放大镜容器ID sImg, //小图片src bImg, //大图片src mirrorStyle, //小图片里镜片样式,json格式数据 ViewStyle //预览视窗样式,json格式数据 ) { var _this = this; this.MagnifierContainer = null; //容器 this.smallDiv = null; //小图容器 this.mask = null; //小图遮罩层 this.mirror = null; //小图镜片 this.smallImg = null; //小图 this.bigDiv = null; //预览视图 this.bigImg = null; //大图 var init = function () { _this.MagnifierContainer = _this.$(MagnifierId); _this.createElement(sImg, bImg); _this.setMagnifierStyle(mirrorStyle, ViewStyle); _this.MainEvent(); } init(); } Magnifier.prototype.createElement = function (sImg, bImg) { var _this = this; var $Create = this.$Create; this.MagnifierContainer.style.position = 'relative'; //脱离文档流,视情况修改 this.smallDiv = $Create("div"); this.smallDiv.setAttribute("id", "small"); this.smallDiv.style.position = "absolute"; this.mask = $Create("div"); this.mask.setAttribute("id", "mask"); this.mask.style.position = "absolute"; this.mirror = $Create("div"); this.mirror.setAttribute("id", "mirror"); this.mirror.style.opacity = 0.3; this.mirror.style.position = "absolute"; this.mirror.style.display = "none"; this.smallImg = $Create("img"); this.smallImg.setAttribute("src", sImg); this.smallImg.setAttribute("id", "smallImg"); this.smallImg.onload = function () { //如果没设置放大镜的height或者width 根据小图大小设置放大镜大小 if (!_this.MagnifierContainer.offsetHeight) { _this.MagnifierContainer.style.width = this.offsetWidth + "px"; _this.MagnifierContainer.style.height = this.offsetHeight + "px"; } //遮罩层大小和小图一样 _this.mask.style.opacity = "0"; _this.mask.style.width = this.offsetWidth + 'px'; _this.mask.style.height = this.offsetHeight + "px"; _this.mask.style.zIndex = 2; _this.bigDiv.style.left = this.offsetWidth + 5 + "px"; _this.bigDiv.style.top = "-5px"; } this.smallDiv.appendChild(this.mask); this.smallDiv.appendChild(this.mirror); this.smallDiv.appendChild(this.smallImg); this.bigDiv = $Create("div"); this.bigDiv.setAttribute("id", "big"); this.bigDiv.style.position = "absolute"; this.bigDiv.style.overflow = "hidden"; this.bigDiv.style.display = "none"; this.bigImg = $Create("img"); this.bigImg.setAttribute("src", bImg); this.bigImg.setAttribute("id", "bigImg"); this.bigImg.style.position = "absolute"; this.bigDiv.appendChild(this.bigImg); this.MagnifierContainer.appendChild(this.smallDiv); this.MagnifierContainer.appendChild(this.bigDiv); } Magnifier.prototype.setMagnifierStyle = function (mirrorStyle, ViewStyle) { for (var item in mirrorStyle) { this.mirror.style[item] = mirrorStyle[item]; } delete item; for (var item in ViewStyle) { this.bigDiv.style[item] = ViewStyle[item]; } } Magnifier.prototype.MainEvent = function () { var _this = this; this.mask.onmouseover = function () { _this.bigDiv.style.display = "block"; _this.mirror.style.display = "block"; } this.mask.onmouseout = function () { _this.bigDiv.style.display = "none"; _this.mirror.style.display = "none"; } this.mask.onmousemove = function (evt) { var oEvent = evt || event; var disX = oEvent.offsetX || oEvent.layerX; //兼容ff var disY = oEvent.offsetY || oEvent.layerY; var mirrorLeft = disX - _this.mirror.offsetWidth / 2; var mirrorTop = disY - _this.mirror.offsetHeight / 2; if (mirrorLeft < 0) { mirrorLeft = 0; } else if (mirrorLeft > this.offsetWidth - _this.mirror.offsetWidth) { mirrorLeft = this.offsetWidth - mirror.offsetWidth; } if (mirrorTop < 0) { mirrorTop = 0; } else if (mirrorTop > this.offsetHeight - _this.mirror.offsetHeight) { mirrorTop = this.offsetHeight - _this.mirror.offsetHeight; } _this.mirror.style.top = mirrorTop + "px"; _this.mirror.style.left = mirrorLeft + "px"; var paX = mirrorTop / (this.offsetHeight - _this.mirror.offsetHeight); var paY = mirrorLeft / (this.offsetWidth - _this.mirror.offsetWidth); _this.bigImg.style.top = -paX * (_this.bigImg.offsetHeight - _this.bigDiv.offsetHeight) + "px"; _this.bigImg.style.left = -paY * (_this.bigImg.offsetWidth - _this.bigDiv.offsetWidth) + "px"; } } Magnifier.prototype.$ = function (id) { return document.getElementById(id); } Magnifier.prototype.$Create = function (type) { return document.createElement(type); }

最后在onload调用下:

代码如下:window.onload = function () { new Magnifier( "Magnifier", "images/Magnifier/small.jpg", "images/Magnifier/big.jpg", { "width": "30px", "height": "30px", "backgroundColor": "#fff" }, { "width": "250px", "height": "250px" } ); }

小编还为您整理了以下内容,可能对您也有帮助:

纯javascript写图片放大镜

帮你找了一个(后面有测试附件):

<style type="text/css">
.img_warp {width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px;}
.img_warp{position:relative;top:0px; left:0px;/*cursor:crosshair*/}
.img_warp .current{ width:318px;height:199px}
</style>
<script type="text/javascript">
var $E = function(opts){
function _(objId){return (typeof objId === "string")?document.getElementById(objId):objId;}
var beImg,expand,clip,cover,warp,expImg;
var clipWidth,clipHeight;
var closeTimeId = null;
var mult = 1; //图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整
//init
(function(){
beImg = _(opts.berviary);
warp = beImg.parentNode;

cover = document.createElement("div");
warp.appendChild(cover);
cover.style.position = "absolute";
cover.style.top = "0px";
cover.style.left = "0px";
cover.style.backgroundColor = "#ccc";
var opac = parseFloat(opts.opacity) || 0.3;
cover.style.opacity = opac;
cover.style.filter = "Alpha(Opacity=" + opac * 100 + ")";
cover.style.width = "100%";
cover.style.height = "100%";
cover.style.zIndex = 2;
cover.style.visibility = "hidden";

clip = document.createElement("img");
warp.appendChild(clip);

clipWidth = (opts.clip && opts.clip.width) || "60px";
clipHeight = (opts.clip && opts.clip.height) || "60px";

clip.src = beImg.src;
clip.className = beImg.className;
clip.style.position = "absolute";
clip.style.top = "0px";
clip.style.left = "0px";
clip.style.clip = "rect(0px," + clipWidth + "," + clipHeight + ",0px)";
clip.style.backgroundColor = "#ccc";
clip.style.zIndex = 3;

//ie里面会*的自动设置宽度和高度
clip.removeAttribute("width");
clip.removeAttribute("height");
})();

function layerPos(e){
if(e.layerX && e.layerY){
return {x:e.layerX,y:e.layerY};
} else {
return {x:e.x,y:e.y};
}
}

function absolutePos(e){
if(e.pageX && e.pageY){
return {x:e.pageX,y:e.pageY};
} else {
var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft);
var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop : document.body.scrollTop);
return {x:x,y:y};
}
}

var showExpand = function(x,y,e){
if(!expand){
initExpand();
}

expImg.style.left = (-1 * x) * mult + "px";
expImg.style.top = (-1 * y ) * mult + "px";

if((!opts.expand) || (!opts.expand.id)){
var aPos = absolutePos(e);
expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + "px";
expand.style.top = aPos.y + "px";
}

//初始化放大的div
function initExpand(){
if(opts.expand && opts.expand.id) {
expand = _(opts.expand.id);
} else {
expand = document.createElement("div");
if(opts.expand && opts.expand.style){
for(var p in opts.expand.style){
expand.style[p] = opts.expand.style[p];
}
}
expand.style.border = "1px solid #000";

expand.style.position = "absolute";
expand.style.left ="0";
expand.style.right = "0";
expand.style.display = "block";
document.body.appendChild(expand);

if(clip.clientWidth>clip.clientHeight){
expand.style.width = clip.clientWidth + "px";
expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + "px";
} else {
expand.style.height = clip.clientHeight + "px";
expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + "px";
}
expand.style.zIndex = 4;
}

expand.style.overflow = "hidden";
if((expand.style.position != "relative") && (expand.style.position != "absolute")){
//*的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效
expand.style.position = "relative";
expand.style.left = "0";
expand.style.top = "0";
}
expImg = document.createElement("img");
expImg.src = beImg.src;
expImg.style.position = "relative";
expImg.style.left = "0px";
expImg.style.top = "0px";
expand.appendChild(expImg);
expImg.removeAttribute("width");
expImg.removeAttribute("height");

//计算图片放大的倍数
var ew = expand.clientWidth;
var eh = expand.clientHeight;
var cw = parseFloat(clipWidth);
var ch = parseFloat(clipHeight);
mult = (ew/cw < eh/ch) ? ew/cw : eh/ch;

//调整放大图片的大小
expImg.style.width = beImg.clientWidth * mult + "px";
expImg.style.height = beImg.clientHeight * mult + "px";
}

}

cover.onmousemove = clip.onmousemove = function(e){
var e = e || event;
var pos = layerPos(e);
var x = pos.x;
var y = pos.y;
//判断x和y坐标有没有超出范围
var w = parseFloat(clipWidth) / 2,h = parseFloat(clipHeight) / 2;

x = (x < w)?w:x;
y = (y < h)?h:y;
x = (x > warp.clientWidth - w) ? (warp.clientWidth - w) : x;
y = (y > warp.clientHeight - h) ? (warp.clientHeight - h) : y;
clip.style.clip = "rect(" + (y - h) + "px," + (x + w) + "px," + (y + h) + "px," + (x - w) + "px)";
showExpand(x - w,y - h,e);
}
warp.onmouseover = cover.onmouseover = clip.onmouseover = function(){
//如果清除的定时器存在,则删除.
if(closeTimeId){
clearTimeout(closeTimeId);
closeTimeId = null;
}
if(cover.style.visibility === "hidden"){
cover.style.visibility = "visible";
}
if(expand && expand.style.display === "none"){
expand.style.display = "block";
}
}

warp.onmouseout = function(){
//延迟一定时间后清除
closeTimeId = setTimeout(function(){
cover.style.visibility = "hidden";

if((!opts.expand) || (!opts.expand.id)){
expand.style.display = "none";
}
},130);
}

return {
clear:function(){
//在这里清除放大镜效果
warp.removeChild(clip);
warp.removeChild(cover);
warp.onmouseout = null;
if((!opts.expand) || (!opts.expand.id)){
expand.style.display = "none";
}
}
}
}
</script>
<div id="img_warp" class="img_warp"><img  id="currentPic1" class="current" border="0" alt="" src="nuan.jpg" width="1280" height="800" /> </div>
<div style="border-bottom: #555 1px solid; border-left: #555 1px solid; margin: -200px 0px 0px 400px; width: 400px; height: 400px; overflow: hidden; border-top: #555 1px solid; border-right: #555 1px solid" id="expand" class="expand"></div>
</div>
<script type="text/javascript">$E({berviary:"currentPic1",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});</script>

 

纯javascript写图片放大镜

帮你找了一个(后面有测试附件):

<style type="text/css">
.img_warp {width:318px; _height:199px; _overflow:hidden; border:1px solid #ccc;padding:0px;margin-left:0px; margin-top:0px; position:absolute;top:0px; left:0px;}
.img_warp{position:relative;top:0px; left:0px;/*cursor:crosshair*/}
.img_warp .current{ width:318px;height:199px}
</style>
<script type="text/javascript">
var $E = function(opts){
function _(objId){return (typeof objId === "string")?document.getElementById(objId):objId;}
var beImg,expand,clip,cover,warp,expImg;
var clipWidth,clipHeight;
var closeTimeId = null;
var mult = 1; //图片放大倍数,根据裁剪框和放大后图片容器的大小自动调整
//init
(function(){
beImg = _(opts.berviary);
warp = beImg.parentNode;

cover = document.createElement("div");
warp.appendChild(cover);
cover.style.position = "absolute";
cover.style.top = "0px";
cover.style.left = "0px";
cover.style.backgroundColor = "#ccc";
var opac = parseFloat(opts.opacity) || 0.3;
cover.style.opacity = opac;
cover.style.filter = "Alpha(Opacity=" + opac * 100 + ")";
cover.style.width = "100%";
cover.style.height = "100%";
cover.style.zIndex = 2;
cover.style.visibility = "hidden";

clip = document.createElement("img");
warp.appendChild(clip);

clipWidth = (opts.clip && opts.clip.width) || "60px";
clipHeight = (opts.clip && opts.clip.height) || "60px";

clip.src = beImg.src;
clip.className = beImg.className;
clip.style.position = "absolute";
clip.style.top = "0px";
clip.style.left = "0px";
clip.style.clip = "rect(0px," + clipWidth + "," + clipHeight + ",0px)";
clip.style.backgroundColor = "#ccc";
clip.style.zIndex = 3;

//ie里面会*的自动设置宽度和高度
clip.removeAttribute("width");
clip.removeAttribute("height");
})();

function layerPos(e){
if(e.layerX && e.layerY){
return {x:e.layerX,y:e.layerY};
} else {
return {x:e.x,y:e.y};
}
}

function absolutePos(e){
if(e.pageX && e.pageY){
return {x:e.pageX,y:e.pageY};
} else {
var x = e.clientX + (document.documentElement.scrollLeft?document.documentElement.scrollLeft : document.body.scrollLeft);
var y = e.clientY + (document.documentElement.scrollTop?document.documentElement.scrollTop : document.body.scrollTop);
return {x:x,y:y};
}
}

var showExpand = function(x,y,e){
if(!expand){
initExpand();
}

expImg.style.left = (-1 * x) * mult + "px";
expImg.style.top = (-1 * y ) * mult + "px";

if((!opts.expand) || (!opts.expand.id)){
var aPos = absolutePos(e);
expand.style.left = aPos.x + parseFloat(clipWidth) / 2 + 20 + "px";
expand.style.top = aPos.y + "px";
}

//初始化放大的div
function initExpand(){
if(opts.expand && opts.expand.id) {
expand = _(opts.expand.id);
} else {
expand = document.createElement("div");
if(opts.expand && opts.expand.style){
for(var p in opts.expand.style){
expand.style[p] = opts.expand.style[p];
}
}
expand.style.border = "1px solid #000";

expand.style.position = "absolute";
expand.style.left ="0";
expand.style.right = "0";
expand.style.display = "block";
document.body.appendChild(expand);

if(clip.clientWidth>clip.clientHeight){
expand.style.width = clip.clientWidth + "px";
expand.style.height = clip.clientWidth * parseFloat(clipHeight) / parseFloat(clipWidth) + "px";
} else {
expand.style.height = clip.clientHeight + "px";
expand.style.width = clip.clientHeight * parseFloat(clipWidth) / parseFloat(clipHeight) + "px";
}
expand.style.zIndex = 4;
}

expand.style.overflow = "hidden";
if((expand.style.position != "relative") && (expand.style.position != "absolute")){
//*的ie6和ie7的img如果为relative,需要设置其父节点也为relative,否则overflow:hidden无效
expand.style.position = "relative";
expand.style.left = "0";
expand.style.top = "0";
}
expImg = document.createElement("img");
expImg.src = beImg.src;
expImg.style.position = "relative";
expImg.style.left = "0px";
expImg.style.top = "0px";
expand.appendChild(expImg);
expImg.removeAttribute("width");
expImg.removeAttribute("height");

//计算图片放大的倍数
var ew = expand.clientWidth;
var eh = expand.clientHeight;
var cw = parseFloat(clipWidth);
var ch = parseFloat(clipHeight);
mult = (ew/cw < eh/ch) ? ew/cw : eh/ch;

//调整放大图片的大小
expImg.style.width = beImg.clientWidth * mult + "px";
expImg.style.height = beImg.clientHeight * mult + "px";
}

}

cover.onmousemove = clip.onmousemove = function(e){
var e = e || event;
var pos = layerPos(e);
var x = pos.x;
var y = pos.y;
//判断x和y坐标有没有超出范围
var w = parseFloat(clipWidth) / 2,h = parseFloat(clipHeight) / 2;

x = (x < w)?w:x;
y = (y < h)?h:y;
x = (x > warp.clientWidth - w) ? (warp.clientWidth - w) : x;
y = (y > warp.clientHeight - h) ? (warp.clientHeight - h) : y;
clip.style.clip = "rect(" + (y - h) + "px," + (x + w) + "px," + (y + h) + "px," + (x - w) + "px)";
showExpand(x - w,y - h,e);
}
warp.onmouseover = cover.onmouseover = clip.onmouseover = function(){
//如果清除的定时器存在,则删除.
if(closeTimeId){
clearTimeout(closeTimeId);
closeTimeId = null;
}
if(cover.style.visibility === "hidden"){
cover.style.visibility = "visible";
}
if(expand && expand.style.display === "none"){
expand.style.display = "block";
}
}

warp.onmouseout = function(){
//延迟一定时间后清除
closeTimeId = setTimeout(function(){
cover.style.visibility = "hidden";

if((!opts.expand) || (!opts.expand.id)){
expand.style.display = "none";
}
},130);
}

return {
clear:function(){
//在这里清除放大镜效果
warp.removeChild(clip);
warp.removeChild(cover);
warp.onmouseout = null;
if((!opts.expand) || (!opts.expand.id)){
expand.style.display = "none";
}
}
}
}
</script>
<div id="img_warp" class="img_warp"><img  id="currentPic1" class="current" border="0" alt="" src="nuan.jpg" width="1280" height="800" /> </div>
<div style="border-bottom: #555 1px solid; border-left: #555 1px solid; margin: -200px 0px 0px 400px; width: 400px; height: 400px; overflow: hidden; border-top: #555 1px solid; border-right: #555 1px solid" id="expand" class="expand"></div>
</div>
<script type="text/javascript">$E({berviary:"currentPic1",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});</script>

 

持普通自小客车驾照可否骑乘轻型机车?

根据中国的相关法律法规,持普通自小客车驾照的驾驶员不可以骑乘轻型摩托车。只有取得了A1、A2、A3等相应的摩托车驾照才能合法驾驶轻型摩托车。

需要注意的是,在中国台湾地区和香港特别行政区的驾驶证制度中,持普通自小客车驾照的驾驶员可以骑乘一定排量以下的轻型机车,但这些规定并不适用于地区。

JS图片放大扩展,按钮开关放大镜

copy运行我如下代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>magnifier</title>

<script src=" http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

var Magnifier = {

imgURL: null,

imgContainer: null,

imgScale: null,

init: function(url, imageContainer, scale) {

this.imgURL = url;

this.imgScale = scale;

this.imgContainer = imageContainer;

var browserDiv = document.createElement('div');

jQuery(browserDiv).attr('id', 'imageBrowser').css({ position: 'absolute', border: '1px #000 solid', zIndex: 20 }).hide();

imageContainer.append(browserDiv);

var bigImageDiv = document.createElement('div');

jQuery(bigImageDiv).attr('id', 'bigImageDiv').css({ overflow: 'hidden', position: 'absolute', border: '1px #000 solid', zIndex: 100 }).hide();

jQuery('body').append(bigImageDiv);

var bigImage = document.createElement('img');

jQuery(bigImage).attr({ id: 'bigImage', src: url }).css({ position: 'absolute' });

jQuery('#bigImageDiv').append(bigImage);

$("#btnOpen").click(function() {

imageContainer.mousemove(Magnifier.start);

imageContainer.mouseout(Magnifier.end);

});

$("#btnClose").click(function() {

jQuery('#magnifier').unbind('mousemove').unbind('mouseout');

});

},

start: function(e) {

e = Magnifier.fixE(e);

var scale = Magnifier.imgScale;

var x = Magnifier.getMouse(e).x;

var y = Magnifier.getMouse(e).y;

var browserDivW = jQuery('#magnifier img').width() / scale;

var browserDivH = jQuery('#magnifier img').height() / scale;

var positionImage = Magnifier.imgContainer.offset();

var browserDivT = y - browserDivH / 2 - positionImage.top;

var browserDivL = x - browserDivW / 2 - positionImage.left;

if (browserDivT <= 0) browserDivT = 0;

if (browserDivL <= 0) browserDivL = 0;

if (browserDivT >= Magnifier.imgContainer.height() - browserDivH - 2) {

browserDivT = Magnifier.imgContainer.height() - browserDivH - 2;

};

if (browserDivL >= Magnifier.imgContainer.width() - browserDivW - 2) {

browserDivL = Magnifier.imgContainer.width() - browserDivW - 2;

};

jQuery('#imageBrowser').css({ width: browserDivW + 'px', height: browserDivH + 'px', top: browserDivT + 'px', left: browserDivL + 'px' });

jQuery('#imageBrowser:hidden').show();

jQuery('#bigImageDiv').css({ width: Magnifier.imgContainer.innerWidth() + 'px', height: Magnifier.imgContainer.innerHeight() + 'px', top: positionImage.top + 'px', left: positionImage.left + Magnifier.imgContainer.width() + 10 + 'px' });

jQuery('#bigImageDiv:hidden').show();

jQuery('#bigImage').css({ width: Magnifier.imgContainer.innerWidth() * scale + 'px', height: Magnifier.imgContainer.innerHeight() * scale + 'px', top: -(jQuery('#imageBrowser').offset().top - positionImage.top) * scale + 'px', left: -(jQuery('#imageBrowser').offset().left - positionImage.left) * scale + 'px' });

},

end: function(e) {

e = Magnifier.fixE(e);

var toObj = e ? e.relatedTarget : event.toElement;

if (toObj.tagName == "DIV" || toObj == this) {

return;

};

jQuery('#imageBrowser').hide();

jQuery('#bigImageDiv').hide();

},

fixE: function(e) {

if (typeof e == 'undefined') {

e = window.event;

e.target = e.srcElement;

e.layerX = e.offsetX;

e.layerY = e.offsetY;

}

return e;

},

getMouse: function(e) {

e = e || window.event;

return pointer = {

x: e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)),

y: e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop))

};

}

}

jQuery(document).ready(function() {

Magnifier.init(" http://static.niu.com/www/web/catch/2008/2/20/1203479158450.jpg", jQuery('#magnifier'), 5);

});

</script>

<style>

#magnifier

{

width: 300px;

height: 400px;

position: absolute;

top: 100px;

left: 100px;

}

#magnifierImg

{

width: 300px;

height: 400px;

}

</style>

</head>

<body>

<div id="magnifier">

<img src=" http://static.niu.com/www/web/catch/2008/2/20/1203479158450.jpg" id="magnifierImg" />

</div>

<p>

</p>

<form>

<input type="button" value="Open" id="btnOpen" />

<input type="button" value="Close" id="btnClose"/>

</form>

</body>

</html>

帮我找美食网还为您提供以下相关内容希望对您有帮助:

纯javascript写图片放大镜

if((!opts.expand) || (!opts.expand.id)){ expand.style.display = "none"; } },130); } return { clear:function(){ //在这里清除放大镜效果 warp.removeChild(clip); warp.removeChild(cover); warp.onmouseo...

JS图片放大扩展,按钮开关放大镜

回答:copy运行我如下代码: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; ...

javascript放大镜代码

这个网页有两个特殊的地方:1.左侧的画在右侧放大;2左侧的画是一个大... 大家看看这个效果是怎么做的http://www.sxr-gallery.com/art_pic_detail.asp?art_pic_id=1086,谁能提供源代码? 这个网页有两个特殊的地方:1.左侧的画在...

给一个图片设置放大镜。跟淘宝的放大镜一样,代码怎么做。

你好,可以使用jquery的插件:jqzoom来实现。下载地址:http://www.jb51.net/jiaoben/29216.html 演示的代码如下:【以下并非原创】JQzoom Demo

在html中怎么用js实现鼠标指向图片时图片放大的效果?(具体实现)_百度知...

分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function,分别写想要放大的尺寸和缩小或复原的尺寸。具体代码实现如下: var img = document.getElementById('img');function bigger(){ img.style.width = '...

js 放大镜效果在右边放大 放大后右边的文字被挤到旁边怎么可以让鼠标...

试试这个图片放大效果 鼠标移上去就会显示放大图片 里面有教程和源码 参考资料:http://www.blueidea.com/common/shoutbox/redir.asp?4=y&amp;id=11843

网页上的放大镜怎么弄出来

按住Ctrl,然后用鼠标的滚动功能可以调整网页字的大小

怎么让已经写好的页面通过代码的方式扩大2倍

HTML5图片放大镜代码,实现了一个圆形框的图像放大镜效果;使用了JavaScript和HTML5中的Canvas来共同实现;参考如下:&lt;!DOCTYPE html&gt; HTML5对图像使用放大镜 function window_onload(){ ...

在html中怎么实现鼠标指向图片时 有个放大镜的图标效果 还可以点击图 ...

你是要放大镜效果吧,找JQ放大镜效果,然后加到你的网页中调用就可以了。

Top