JS实现图片局部放大的效果,超级推荐_第1页
JS实现图片局部放大的效果,超级推荐_第2页
JS实现图片局部放大的效果,超级推荐_第3页
JS实现图片局部放大的效果,超级推荐_第4页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、JS实现图片局部放大的效果,超级推荐<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>H程序员家园</title><meta name="Keywords" content="H程序员家园" /><meta name="Description" content="H程序员家园"

2、/></head><script language="JavaScript"><!-var srcX = 2592; /原图大小,可以任意设置var srcY = 1944;var bigX = 500; /预览窗大小,可以任意设置var bigY = 375;var smallX = 500; /缩略图宽度var smallY = srcY * smallX / srcX;var viewX = bigX / srcX * smallX; /预览范围var viewY = bigY / srcY * smallY;var bl = sr

3、cX / smallX;/缩小比例var border = 1; /边框window.onload=function ()/head.innerHTML="图片载入"smallpic.width=smallX;smallpic.height=smallY;bigpic.width=srcX;bigpic.height=srcY;view.style.width=viewX;view.style.height=viewY;smallbox.style.borderWidth=border;bigbox.style.borderWidth=border;if (window.e

4、vent)smallbox.style.width=smallpic.offsetWidth+border*2;smallbox.style.height=smallpic.offsetHeight+border*2;bigbox.style.width=bigX+border*2;bigbox.style.height=bigY+border*2;elsesmallbox.style.width=smallpic.offsetWidth;smallbox.style.height=smallpic.offsetHeight;bigbox.style.width=bigX;bigbox.sty

5、le.height=bigY;move(event);function move(e)var e = window.event?window.event:e;var iebug = 0;if (window.event)var vX = e.offsetX - viewX/2;var vY = e.offsetY - viewY/2;elsevar vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;iebug = 2;if

6、(vX  < 0) vX = 0;if (vY  < 0) vY = 0;if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;bigpico.style.marginLeft = - vX * bl bigpico.style.marginTop = - vY * bl view.style.left = vX + smallbox.offs

7、etLeft + border;view.style.top = vY + smallbox.offsetTop + border;function aa()document.getElementById('bigbox').style.display="none"document.getElementById('view').style.border="none"function bb() document.getElementById('bigbox').style.display="

8、;block" document.getElementById('view').style.border="1px solid #FF9900" /document.getElementById('view').style.background="#009999"/ document.getElementById('view').style.filter="alpha(opacity=40)"/-></script><style ty

9、pe="text/css"><!-*padding:0;margin:0;imgdisplay:block;#smallboxborder:1px #EBEBEB solid;overflow:hidden; width:338px; position:relative;#bigboxborder:1px #EBEBEB solid;overflow:hidden; position:absolute; left:370px; top:0px; display:none#viewposition:absolute;/-></style><

10、body><div id="smallbox"  onMouseOver="bb()" onMouseOut="aa()"> <img src=" name="smallpic" border="0" id="smallpic" onMouseMove="move(event)"><div id="view" onMouseMove="move(event)" onMouseOver="bb()" onMouseOut="aa()" > </div></div>xzczxc<div id="bigbox"&g

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论