js放大镜代码（html放大镜代码）

今天给各位分享js放大镜代码的知识，其中也会对html放大镜代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、javascript放大镜代码
• 2、JS图片放大扩展，按钮开关放大镜
• 3、jquery图片放大镜代码解析注释
• 4、有谁能告诉我magento放大镜怎么弄啊，我弄了好多js都有冲突用不了
• 5、JS+CSS 放大镜
• 6、纯javascript写图片放大镜

javascript放大镜代码

同命相连，我也在找这个效果，失望啊！

发现有教程，可是运行不起来，看你会吗？

picclass.asp 图片处理类文件

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

%

'//////////// GPS：Get Picture Size //////////////

'//////////////利用ADODB.stream获取图片尺寸//////////////

'/////////Cited By Leon（心晴） 2005年8月11日//////////

Class GPS

Dim aso

Private Sub Class_Initialize

Set aso=CreateObject("Adodb.Stream")

aso.Mode=3

aso.Type=1

aso.Open

End Sub

Private Sub Class_Terminate

set aso=nothing

End Sub

Private Function Bin2Str(Bin)

Dim I, Str

For I=1 to LenB(Bin)

clow=MidB(Bin,I,1)

if AscB(clow)128 then

Str = Str Chr(ASCB(clow))

Else

I=I+1

if I = LenB(Bin) then Str = Str Chr(ASCW(MidB(Bin,I,1)clow))

end If

Next

Bin2Str = Str

End Function

Private Function Num2Str(num,base,lens)

'GPS (2005-8-11)

dim ret

ret = ""

while(num=base)

ret = (num mod base) ret

num = (num - num mod base)/base

wend

Num2Str = right(string(lens,"0") num ret,lens)

End Function

Private Function Str2Num(str,base)

'GPS (2005-8-11)

dim ret

ret = 0

for i=1 to len(str)

ret = ret *base + cint(mid(str,i,1))

next

Str2Num=ret

End Function

Private Function BinVal(bin)

'GPS (2002-8-11)

dim ret

ret = 0

for i = lenb(bin) to 1 step -1

ret = ret *256 + ascb(midb(bin,i,1))

next

BinVal=ret

End Function

Private Function BinVal2(bin)

'GPS (2002-8-11)

dim ret

ret = 0

for i = 1 to lenb(bin)

ret = ret *256 + ascb(midb(bin,i,1))

next

BinVal2=ret

End Function

'///以下是调用代码///

Function getImageSize(filespec)

'GPS (2002-8-11)

dim ret(3)

aso.LoadFromFile(filespec)

bFlag=aso.read(3)

select case hex(binVal(bFlag))

case "4E5089":

aso.read(15)

ret(0)="PNG"

ret(1)=BinVal2(aso.read(2))

aso.read(2)

ret(2)=BinVal2(aso.read(2))

case "464947":

aso.read(3)

ret(0)="GIF"

ret(1)=BinVal(aso.read(2))

ret(2)=BinVal(aso.read(2))

case "535746":

aso.read(5)

binData=aso.Read(1)

sConv=Num2Str(ascb(binData),2 ,8)

nBits=Str2Num(left(sConv,5),2)

sConv=mid(sConv,6)

while(len(sConv)nBits*4)

binData=aso.Read(1)

sConv=sConvNum2Str(ascb(binData),2 ,8)

wend

ret(0)="SWF"

ret(1)=int(abs(Str2Num(mid(sConv,1*nBits+1,nBits),2)-Str2Num(mid(sConv,0*nBits+1,nBits),2))/20)

ret(2)=int(abs(Str2Num(mid(sConv,3*nBits+1,nBits),2)-Str2Num(mid(sConv,2*nBits+1,nBits),2))/20)

case "FFD8FF":

do

do: p1=binVal(aso.Read(1)): loop while p1=255 and not aso.EOS

if p1191 and p1196 then exit do else aso.read(binval2(aso.Read(2))-2)

do:p1=binVal(aso.Read(1)):loop while p1255 and not aso.EOS

loop while true

aso.Read(3)

ret(0)="JPG"

ret(2)=binval2(aso.Read(2))

ret(1)=binval2(aso.Read(2))

case else:

if left(Bin2Str(bFlag),2)="BM" then

aso.Read(15)

ret(0)="BMP"

ret(1)=binval(aso.Read(4))

ret(2)=binval(aso.Read(4))

else

ret(0)=""

end if

end select

ret(3)="width=""" ret(1) """ height=""" ret(2) """"

getimagesize=ret

End Function

End Class

%

图片调用文件----------------------------------------------------------------------------------------------------------

%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%

!--#include file="picclass.asp"--

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

""

head

SCRIPT LANGUAGE="JAVASCRIPT"

!--

function maxview(){

if (window.screen){

var w=screen.availwidth;

var h=screen.availheight;

window.moveTo(0,0);

window.resizeTo(w,h);

}

}

// --

/SCRIPT

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title/title

SCRIPT src="zoom.js" type=text/javascript/SCRIPT

/head

body onLoad="maxview(); OnLoadMainFunction();"

table width="905" border="0" align="center" cellpadding="15" cellspacing="1"

tr

td valign="top" bgcolor="#FFFFFF"table width="100%" border="0" cellspacing="15"

cellpadding="0"

tr

td valign="top"

%

if request("showid")"" then

sql="update lei_product set dianjishu=dianjishu+1 where id="(request("showid"))

conn.execute(sql)

set rs=server.CreateObject("adodb.recordset")

showstr="select * from lei_product where id=" (request("showid"))

rs.open showstr,conn,1,1

if not rs.bof and not rs.eof then

'/////获取ShowImg.asp的绝对路径/////

Dim curFile

curFile=Server.mappath(Request.servervariables("PATH_INFO"))

Dim curfilename,filename

'/////图片相对路径（存于数据库中）

'cufilename=rs("ImgURL")

cufilename="../admin/upimg/"rs("bigimg2")

cufilename2="../admin/upimg/"rs("bigimg")

'/////因为ShowImg.asp与images在同一目录，所以我们用instrrev获取images的路径/////

filename=left(curFile,instrrev(curFile,"\"))cufilename

filename2=left(curFile,instrrev(curFile,"\"))cufilename2

'/////建立GPS类实体/////

Dim GetPicSize

Set GetPicSize=new GPS

Set fs=Server.CreateObject("Scripting.FileSystemObject")

'/////获取图片类型/////

Dim PicSuffixName

Dim PicSuffixName2

if (fs.FileExists(filename)=false) then

Response.Write("scriptalert('文件加载失败,请确认文件是否存在');history.back(-1);/script")

Response.End()

end if

if (fs.FileExists(filename2)=false) then

Response.Write("scriptalert('文件加载失败,请确认文件是否存在');history.back(-1);/script")

Response.End()

end if

PicSuffixName=fs.GetExtensionName(filename)

PicSuffixName2=fs.GetExtensionName(filename2)

Dim PD '//Picture Dimension

Dim PD2 '//Picture Dimension

Dim PWidth,PHeight

Dim PWidth2,PHeight2

PD=GetPicSize.GetImageSize(filename)

PD2=GetPicSize.GetImageSize(filename2)

PWidth=PD(1) '//获取图片宽度

PWidth2=PD2(1) '//获取图片宽度

PHeight=PD(2) '//获取图片高度

PHeight2=PD2(2) '//获取图片高度

Set fs=Nothing

Set GetPicSize=Nothing

%

SCRIPT type=text/javascript

var usezoom = 1;

var itemimagedir = '';

var zoom_bigimagediv = 'bigimagediv';

var zoom_bigimagetablediv = 'bigimagetablediv';

var zoom_highlightdiv = 'highlightdiv';

var zoom_bigimageouterdiv = 'bigimageouterdiv';

var zoom_viewportwid = 400;//大图图片显示区域

var zoom_viewporthei = 320;//大图片显示区域

var zoom_mainimagewid = %=PWidth2%;//小图宽

var zoom_mainimagehei = %=PHeight2%;//小图高

var zoom_mainimageurl = '../admin/upimg/%=rs("bigimg2")%';

var zoom_zoomimagewid = %=PWidth%;//原图大小宽

var zoom_zoomimagehei = %=PHeight%;//原图大小高

var zoom_zoomimageurl = '../admin/upimg/%=rs("bigimg2")%';//大图地址

var zoom_bigimagetablexoffset = 1;

var zoom_bigimagetableyoffset = 21;

var zoom_displayxposition = 0;

var zoom_displayyposition = 0;

var zoom_miniimagex = 0;

var zoom_miniimagey = 0;

var zoom_highlightbgcolor = 'ffffff';

var zoom_highlightimage = 'highlight.gif';

function GetZoomObjectData() {

var position;

if (!InIE !InNS6 !DOMCompatible)

return;

position = MeMSOObjectGetPosition('mainimage');

zoom_miniimagex = position.x;

zoom_miniimagey = position.y;

position = MeMSOObjectGetPosition('locatezoomim');

zoom_displayxposition = position.x;//显示图片的位置

zoom_displayyposition = position.y - 21;

Zoom_StartupZoomRegion();

}

onloadlist += 'GetZoomObjectData();';

/SCRIPT

table width="100%" border="0" align="center" cellpadding="0" cellspacing="1"

tr

td bgcolor="#FFFFFF" div align="center"

table cellspacing="0" cellpadding="0" width="100%" border="0"

tbody

tr

td valign="center" align="middle" rowspan="4"table cellspacing="1"

cellpadding="2" width="%=PWidth2%"

bgcolor="#efe6dd" border="0" height="%=PHeight2%"

tbody

tr

td bgcolor="#ffffff"img

src="..\admin\upimg\%=rs("bigimg")%" name="mainimage"

border="0" width="%=PWidth2%" height="%=PHeight2%"

id="mainimage" //td

/tr

/tbody

/table

br /

a href="#" target="_blank"点击看大图/a/td

td valign="bottom" align="left" height="5"img height="5"

src="dot_line.gif" width="401" //td

/tr

tr

td valign="bottom" align="left" width="420" height="1"table cellspacing="0"

cellpadding="0" width="100%"

border="0"

tbody

tr

td colspan="2"img id="locatezoomim" height="1"

src="dot_1.gif" width="1"

name="locatezoomim" //td

/tr

/tbody

/table/td

/tr

tr

td valign="top" align="left" width="425"

background="bigImg.gif"

height="330"p  /p/td

/tr

tr

td align="middle"div id="highlightdiv"

style="Z-INDEX: 2; LEFT: -2000px; POSITION: absolute; TOP: -2000px;

visibility: hidden;"/div

div id="bigimageouterdiv"

style="Z-INDEX: 4; LEFT: -2000px; VISIBILITY: visible; OVERFLOW:

hidden; WIDTH: 300px; POSITION: absolute; TOP: -2000px; HEIGHT: 300px"

div id="bigimagediv"

style="Z-INDEX: 4; LEFT: -2000px; POSITION: absolute; TOP: -2000px;

visibility: hidden;"img

id="mainzoomimage" height="2400" src="" width="800" border="0"

name="mainzoomimage" //div

/div

div id="bigimagetablediv" style="Z-INDEX: 3; LEFT: -2000px; POSITION:

absolute; TOP: -2000px; visibility: hidden;"/div/td

/tr

/tbody

/table

/div

div align="right"/div/td

/tr

/table

%end if

rs.close

set rs = nothing

%

%end if

%

/td

/tr

/table/td

/tr

/table

table width="905" height="8" border="0" align="center" cellpadding="0" cellspacing="0"

tr

td/td

/tr

/table

/body

/html

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

copy运行我如下代码：

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " "

html

head

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

titlemagnifier/title

script src=" "/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(" ", 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=" " id="magnifierImg" /

/div

p

/p

form

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

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

/form

/body

/html

jquery图片放大镜代码解析注释

(function($){//定义作用域

$.fn.imagezoom=function(options){/*自定义插件imageszoom，options代表形参（属性自定义）*/

var settings={

xzoom: 350, /*放大图的宽度(默认是 350)*/

yzoom: 350, /*放大图的高度(默认是 350)*/

offset: 10, /*离原图的距离(默认是 10)*/

position: "right", /*放大图的定位(默认是 "right")*/

preload:1

};

if(options){

$.extend(settings,options);

}

var noalt='';

var self=this;

$(this).bind("mouseenter",function(ev){/*鼠标经过时添加一个事件处理程序*/

var imageLeft=$(this).offset().left;

var imageTop=$(this).offset().top;

var imageWidth=$(this).get(0).offsetWidth;

var imageHeight=$(this).get(0).offsetHeight;

var boxLeft=$(this).parent().offset().left;

var boxTop=$(this).parent().offset().top;

var boxWidth=$(this).parent().width();

var boxHeight=$(this).parent().height();

noalt=$(this).attr("alt");

var bigimage=$(this).attr("rel");

$(this).attr("alt",'');

if($("div.zoomDiv").get().length==0){

$(document.body).append("div class='zoomDiv'img class='bigimg' src='"+bigimage+"'//div"+

"div class='zoomMask' /div");

}

if(settings.position=="right"){

if(boxLeft+boxWidth+settings.offset+settings.xzoomscreen.width){

leftpos=boxLeft-settings.offset-settings.xzoom;

}else{

leftpos=boxLeft+boxWidth+settings.offset;

}

}else{

leftpos=imageLeft-settings.xzoom-settings.offset;

if(leftpos0){

leftpos=imageLeft+imageWidth+settings.offset;

}

}

$("div.zoomDiv").css({top:boxTop,left:leftpos});

$("div.zoomDiv").width(settings.xzoom);

$("div.zoomDiv").height(settings.yzoom);

$("div.zoomDiv").show();

$(this).css('cursor','crosshair');/*光标呈现十字线*/

$(document.body).mousemove(function(e){/*当移动鼠标时*/

mouse=new MouseEvent(e);

if(mouse.ximageLeft||mouse.ximageLeft+imageWidth||mouse.yimageTop||mouse.yimageTop+imageHeight){

mouseOutImage();/*判断鼠标是否超出图片范围*/

return;

}

var bigwidth=$(".bigimg").get(0).offsetWidth;/*最大宽度*/

var bigheight=$(".bigimg").get(0).offsetHeight;/*最大高度*/

var scaley='x';/*x轴比例 */

var scalex='y';/*y轴比例 */

/*随鼠标移动显示大图*/

if(isNaN(scalex)|isNaN(scaley)){/*x、y轴比例不是数字时*/

var scalex=(bigwidth/imageWidth);

var scaley=(bigheight/imageHeight);

$("div.zoomMask").width((settings.xzoom)/scalex);

$("div.zoomMask").height((settings.yzoom)/scaley);

$("div.zoomMask").css('visibility','visible');/*规定元素可见*/

}

xpos=mouse.x-$("div.zoomMask").width()/2;

ypos=mouse.y-$("div.zoomMask").height()/2;

xposs=mouse.x-$("div.zoomMask").width()/2-imageLeft;

yposs=mouse.y-$("div.zoomMask").height()/2-imageTop;

xpos=(mouse.x-$("div.zoomMask").width()/2imageLeft)

? imageLeft:(mouse.x+$(".zoomMask").width()/2imageWidth+imageLeft)

? (imageWidth+imageLeft-$("div.zoomMask").width()):xpos;

ypos=(mouse.y-$("div.zoomMask").height()/2imageTop)

? imageTop:(mouse.y+$("div.zoomMask").height()/2imageHeight+imageTop)

? (imageHeight+imageTop-$("div.zoomMask").height()):ypos;

$("div.zoomMask").css({top:ypos,left:xpos});

$("div.zoomDiv").get(0).scrollLeft=xposs*scalex;

$("div.zoomDiv").get(0).scrollTop=yposs*scaley;

});

});

function mouseOutImage(){/*定义鼠标离开图片方法*/

$(self).attr("alt",noalt);

$(document.body).unbind("mousemove");/*移除在页面中鼠标指针事件*/

$("div.zoomMask").remove();/*移除所有的div.zoomMask*/

$("div.zoomDiv").remove();/*移除所有的div.zoomDiv*/

}

count=0;

if(settings.preload){

/*在boby元素的结尾（仍然在内部）插入指定内容*/

$('body').append("div style='display:none;' class='jqPreload"+count+"'/div");

$(this).each(function(){/*规定为每个匹配元素规定运行的函数*/

var imagetopreload=$(this).attr("rel");/*图片预加载*/

var content=jQuery('.jqPreload'+count+'').html();

jQuery('.jqPreload'+count+'').html(content+'img src=\"'+imagetopreload+'\"');

});

}

}

})(jQuery);

function MouseEvent(e){/*记录鼠标x，y坐标*/

this.x=e.pageX;/*鼠标指针位置*/

this.y=e.pageY;

}

有谁能告诉我magento放大镜怎么弄啊，我弄了好多js都有冲突用不了

找到放大镜的js，并在jquery代码下添加这行

jQuery.noConflict();

此外，magento有很多放大镜的插件，一般都是集成好的。

有问题继续追问吧

JS+CSS 放大镜

Js 放大镜这个效果ls已经写了，你保存成html文件。预览下不就行了

纯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.clientWidthclip.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="nuandao.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

js放大镜代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html放大镜代码、js放大镜代码的信息别忘了在本站进行查找喔。