您的位置:

js图片放大镜特效源代码下载(js放大镜的实现原理)

js图片放大镜特效源代码下载(js放大镜的实现原理)

更新:

本文目录一览:

求帮我添加一个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

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代码

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、查看效果。

js图片放大镜特效源代码下载(js放大镜的实现原理)

本文目录一览: 1、求帮我添加一个JS放大镜效果 2、javascript放大镜代码 3、求一个简单的点击图片放大缩小的JS代码 求帮我添加一个JS放大镜效果 JS放大镜效果,lz注意下编码问题,图片

2023-12-08
放大镜js源码,js京东放大镜

本文目录一览: 1、JS脚本实现开关网页放大镜 2、javascript放大镜代码 3、求帮我添加一个JS放大镜效果 4、JS图片放大扩展,按钮开关放大镜 5、怎么用javascript代码实现淘宝宝

2023-12-08
js幻灯片轮番代码案例,js幻灯片轮播原理

本文目录一览: 1、网页轮显幻灯片是怎么做的 2、在javascript中图片的轮番播放怎么做 3、求js轮番图片代码 网页轮显幻灯片是怎么做的 用JS(JavaScript)+CSS或Applet做

2023-12-08
js优秀代码图片,js好玩的代码

本文目录一览: 1、js代码控制图片移动 2、图片自动切换的JS代码 3、JS 显示 上传 图片 ,,高手帮我解释一下这段代码 4、求一个图片自动切换的JS代码。 5、如何用JS实现简单的图片替换 6

2023-12-08
12款超酷图片展示js代码下载(炫酷代码图片)

本文目录一览: 1、跪求JS完整代码 点击图片,弹出这个图片,然后可以关闭弹出的窗口 图片文件或文字用(……)代替即可 2、求--超酷超绚精美图片展示效果代码(二) - 网页特效观止-网页特效代码|

2023-12-08
图片大小自动缩放js代码(图片大小自动缩放js代码是什么)

本文目录一览: 1、怎么用js实现图片的缩小? 2、jS控制图片的放大和缩小? 3、求一个简单的点击图片放大缩小的JS代码 4、如何利用JS或者CSS样式来自动调整图片大小 5、js实现图片滚轮、按钮

2023-12-08
js好看效果源代码大全下载,js特效素材网

本文目录一览: 1、关于Javascript 特效代码 2、求js代码,效果是“点击图片缓慢消失,然后进入网站” 3、网页制作:谁给我发个js实现图片横向滚动的源代码? 4、请问怎么下载网页中的js,

2023-12-08
执行js代码大全,执行js代码大全下载

本文目录一览: 1、编写一段代码,如何用JS来实现插入几行几列的表格的功能,希望好心人能帮帮忙呢 2、求个简单javascript代码 谢谢,网站菜单功能 3、求C# winform中点击按钮执行网页

2023-12-08
鼠标悬停显示图片的js代码(js鼠标悬停放大图片)

本文目录一览: 1、鼠标悬停在小图上,自动出现大图的代码是什么? 2、鼠标悬停特效代码怎么写,鼠标放在小图片上旁边显示一张大图片? 3、鼠标悬停显示图片的js代码 高手帮我看看 位置问题 鼠标悬停在小

2023-12-08
js播放视频代码(js播放视频代码大全)

本文目录一览: 1、如何用JS控制多个视频的连续播放 2、js 代码实现视频进度条点到哪个位置就播放那个位置的视频。进度条是用css样式另做的。 3、js控制视频播放 4、如何用html和js写视频播

2023-12-08
js效果源码集合下载(js特效代码下载)

本文目录一览: 1、求js读取数据库数据显示在页面上的表中的功能源码 2、怎么把一个网页的js代码下载 下来啊 3、如何使用js实现页面下载功能 4、如何下载js文件 5、怎么样下载js 6、下载的j

2023-12-08
7栏js焦点图代码(js焦点图特效)

本文目录一览: 1、Jquery.SuperSlide扩展效果里的实用焦点图效果代码,求大神,谢谢 2、js焦点图代码怎么用啊? 3、什么是焦点图 4、js焦点图切换图片的数字按钮代码怎么写?要有鼠标

2023-12-08
js噪点细胞代码下载的简单介绍

本文目录一览: 1、哪位介绍一下数码相机的一些知识,谢谢! 2、买数码相机时怎么样验货,要注意什么? 3、半导体激光为什么看起来有噪点? 4、买数码相机要注意的问题有哪些? 5、眼睛看东西的时候有噪点

2023-12-08
简单实用的js库免费源代码下载(js资源库)

本文目录一览: 1、求个简单javascript代码 谢谢,网站菜单功能 2、求《代码逆袭:超实用的Node.js代码段》全文免费下载百度网盘资源,谢谢~ 3、哪些JavaScript 框架的源代码最

2023-12-08
js代码大全(js基础代码大全)

本文目录一览: 1、JS鼠标事件大全 JS鼠标事件有哪些 2、什么地JS?什么是JSP? 3、我的世界地狱门js代码大全 4、求javascript表单验证大全 5、求个简单javascript代码

2023-12-08
2017js代码大全(js新手代码大全)

本文目录一览: 1、关于JS的代码 2、下面是一段Js语言代码。我是初学者,大神,花括号里的各个代码如何理解? 3、JS鼠标事件大全 JS鼠标事件有哪些 4、什么地JS?什么是JSP? 5、JS 代码

2023-12-08
php图片裁剪与缩放,php压缩图片大小

2022-11-28
js图片转动代码(图片切换js特效代码)

本文目录一览: 1、javascript让图片移动的函数 2、JS控制图片向左向右移动的代码 3、js实现图片旋转效果 4、js 怎么实现点击一次图片旋转90度,再点击再转90度呢 5、JavaScr

2023-12-08
js代码技术大全(js代码技术大全教程)

本文目录一览: 1、什么地JS?什么是JSP? 2、求个简单javascript代码 谢谢,网站菜单功能 3、JS技术是什么技术? 4、js实现网页 高度和宽度成比例的代码 5、怎么快速的学习基本JS

2023-12-08
jscode网页特效大全下载(精美网页js特效)

本文目录一览: 1、怎么将下载的JS网页特效用在自己的网页中 2、什么是网页脚本特效 3、求个简单javascript代码 谢谢,网站菜单功能 4、点击弹出窗口 5、http://www.jscode

2023-12-08