仿淘宝图片放大预览效果
2012-11-07 15:44
197 查看
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title></title> </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 = srcX / 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.event){ 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; }else{ smallbox.style.width=smallpic.offsetWidth; smallbox.style.height=smallpic.offsetHeight; bigbox.style.width=bigX; bigbox.style.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; }else{ var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border; var vY = e.pageY - viewY/2 - smallbox.offsetTop - border; iebug = 2; } if (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.offsetLeft + 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="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 type="text/css"> <!-- *{padding:0;margin:0;} img{display:block;} #smallbox{border:1px #EBEBEB solid;overflow:hidden; width:350px; position:relative;} #bigbox{border:1px #EBEBEB solid;overflow:hidden; position:absolute; left:500px; top:0px; display:none} #view{position:absolute;} //--> </style> <body> <div id="smallbox" onMouseOver="bb()" onMouseOut="aa()"> <img src="落花.jpg" name="smallpic" border="0" id="smallpic" onMouseMove="move(event)"> <div id="view" onMouseMove="move(event)" onMouseOver="bb()" onMouseOut="aa()" > </div> </div> <div id="bigbox"> <div id="bigpico"> <img src="落花.jpg" name="bigpic"border="0" id="bigpic"> </div> </div> </body> </html>
相关文章推荐
- js放大镜效果。类似于淘宝产品内页多图展示代码,鼠标移到图片上有放大效果,方便查看产品细节,此代码适合网店产品展示,
- 仿淘宝商品图片放大镜效果(鼠标移动上去会出现放大的图片,并且可以移动)
- 仿淘宝鼠标移动商品图片放大效果
- 图片由小图放大裁剪至全屏显示大图,Google Photos 点击图片预览的效果
- Android 图片预览模仿朋友圈查看图片效果放大图片,左右滑动 - transferee
- JavaScript + CSS 实现图片放大预览效果
- javascript实现input file上传图片预览效果
- Android 手势检测实战 打造支持缩放平移的图片预览效果(上)
- 一款基于jQuery可放大预览的图片滑块插件
- UITableView头部带有图片并且下拉图片放大效果
- javascript 简单的图片放大效果(一)
- 图片放大效果
- jquery实现上传图片及图片大小验证、图片预览效果代码
- 比Magic Zoom 和jQZoom更好的图片轮换和图片放大效果
- jquery实现图片放大效果应用jqeury插件
- iOS点击button放大后缩小效果,类似QQ、微信选择图片时的特效。
- 使用iframe实现图片上传预览效果
- 图片上传实时预览效果
- 图片上传,有预览效果