js圖片放大鏡特效源代碼下載（js放大鏡的實現原理）

• 1、求幫我添加一個JS放大鏡效果
• 2、javascript放大鏡代碼
• 3、求一個簡單的點擊圖片放大縮小的JS代碼

JS放大鏡效果，lz注意下編碼問題，圖片自己替換 !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ” ” html xmlns=” ” head title超逼真的JS圖片放大鏡/title meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ / style type=”text/css” .zoomPan{width:570px;left:100px;position:relative; } .sh{zoom:1;background:#eee;filter:progid:DXImageTransform.Microsoft.dropShadow(color=’#54000000′, OffX=2,OffY=2);-webkit-box-shadow:4px 4px 4px #666;-moz-box-shadow:4px 4px 4px #666;} #zoom{position:absolute;width:254px;height:254px;border:3px solid #fff;left:-9999px;top:0;overflow:hidden;background:#fff;} #zoom img{position:relative;} h1{color:#FF0080;border-bottom:5px solid #ddd;padding:10px;} h4{text-align:right;padding:20px;border-top:1px solid #ddd;color:#ccc;} /style /head body h1zoom/h1 div class=”zoomPan” id=”zoomPan” img src=”/jscss/demoimg/201008/s.jpg” alt=”” / div id=”zoom” class=”sh”img src=”/jscss/demoimg/201008/b.jpg” alt=”” //div /div h4code.js.cn/h4 /body script type=”text/javascript” //![CDATA[ function zoomBox() {this.index.apply(this, arguments)} zoomBox.prototype = { index: function(win,zoom) { var win=document.getElementById(win); var box=document.getElementById(zoom); var img=box.getElementsByTagName(‘IMG’)[0]; var zoom=img.width/win.getElementsByTagName(‘IMG’)[0].width; var z=Math.round(box.offsetWidth/2); win.onmousemove=function (e){ e = e || window.event; var x=e.clientX,y=e.clientY, ori=win.getBoundingClientRect(); if (xori.right+20||yori.bottom+20||xori.left-20||yori.top-20)box.style.display=’none’; x-=ori.left; y-=ori.top; box.style.left=x-z+’px’; box.style.top=y-z+’px’; img.style.left=-x*zoom+z+’px’; img.style.top=-y*zoom+z+’px’; } win.onmouseover=function (){box.style.display=”} } }; window.onload=function (){ x=new zoomBox(‘zoomPan’,’zoom’) } //]] /script /html

同命相連，我也在找這個效果，失望啊！

發現有教程，可是運行不起來，看你會嗎？

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

1、準備好需要用到的圖標。

2、新建html文檔。

3、書寫hmtl代碼。div id=allbox    div id=boxhome        img style=”WIDTH: 107px; BOTTOM: 5px; HEIGHT: 176px; LEFT: 10px” id=imgSmallLeft class=imgBorder onClick=”clearInterval(autoplay);moveD(‘l’);”    。

4、書寫並添加js代碼。script src=”js/ntes_jslib_1.x.js”/scriptscript src=”js/zzsc.js”/script。

5、代碼整體結構。

6、查看效果。