北京网店建设
网站地图
RSS订阅
匿名投稿
开网店送空间和顶级域名
您的位置:北京网店建设 > 网店建设 > ecshop模板制作

ecshop模板图片局部放大效果

作者:admin 来源:未知 日期:2010-2-27 19:42:22 人气: 标签:ecshop模板定制 ecshop免费模板 ecshop模板 ecshop模板制作 ecshop模板开发 ecshop模板操作
导读:ecshop模板图片局部放大效果
<html>
<head>
<title>图片局部放大效果 by okajax.com</title>
</head>
<body>
<BR>
原图:<BR>
<a href="http://www.511sj.com/" target="_blank"><img src="http://www.511sj.com/hdp/080917/_143640360.gif" width="302" height="500" id=srcImg border="0"></a>
<BR>
局部放大图:<BR>
<div style="overflow:hidden"><img id=zoomImg></div> <SCRIPT LANGUAGE="JavaScript">
<!--
zoomImg.src = srcImg.src;
srcImg.height = srcImg.height/2;
var zoomRate = 5; //放大倍数
zoomImg.height = srcImg.height*zoomRate;
zoomImg.parentNode.style.width = srcImg.width;
zoomImg.parentNode.style.height = srcImg.height;
function zoom(){
var elm = event.srcElement;
h = elm.offsetHeight/zoomRate/2;
w = elm.offsetWidth/zoomRate/2;
var x = event.x-elm.offsetLeft;
x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
zoomImg.style.marginLeft=(w-x)*zoomRate;
var y = event.y-elm.offsetTop;
y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
zoomImg.style.marginTop=(h-y)*zoomRate;
}
//-->
</SCRIPT>
</body>
</html>
本文连接地址:http://www.511sj.com/html/wangdianjianshe/ecshop_mobanzhizuo/920.Html

编辑整理:北京网店建设 ecshop模板 ecshop模板

共有:条评论信息评论信息
发表评论
姓 名:
验证码: