<html>
<head>
<title>emu</title>
</head>
<body>
<BR>
<BR>
<img src="http://img.pconline.com.cn/images/photo2/839980/1118509777696.JPG" onmousemove="zoom()" id=srcImg>
<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>
分享到:
相关推荐
javascript实现图片局部放大效果
javascript对图片局部放大效果相当不错!
NULL 博文链接:https://zwhc.iteye.com/blog/1682780
JS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片放大代码.rarJS放大镜,JavaScript图片...
javascript商城详细页商品图片局部放大效果 切换图片自动缩放 可左右分页 完整版
jquery实现类似楼层模拟图片局部放大特效.rarjquery实现类似楼层模拟图片局部放大特效.rarjquery实现类似楼层模拟图片局部放大特效.rarjquery实现类似楼层模拟图片局部放大特效.rarjquery实现类似楼层模拟图片局部...
JAVASCRIPT鼠标放上去局部放大特效,是多个图片组合的图片集;由WWW.CHE2.COM整理
CSS+JAVASCRIPT 实现图片的局部放大功能
JS局部可放大相册代码是javascript特效相册局部放大的脚本代码。 JS局部可放大相册代码特效图:
jquery四款不同的局部图片放大镜效果.rarjquery四款不同的局部图片放大镜效果.rarjquery四款不同的局部图片放大镜效果.rarjquery四款不同的局部图片放大镜效果.rarjquery四款不同的局部图片放大镜效果.rarjquery四款...
jQuery图片局部放大特效.zip
JS产品图片局部放大代码.zip
JavaScript 实现类似淘宝的图片跟随鼠标局部放大的效果
JavaScript图片炫酷展示特效,悬空浮动,点击图片放大,可根据鼠标移动位置放大局部效果。再点击缩小会原来大小。
jQuery局部图片放大显示.zip
js特效脚本含源码和说明JS产品图片局部放大效果本资源系百度网盘分享地址
jQuery支持局部缩放图片放大镜插件.zip
js常见的购物网站商品详情页,鼠标滑到商品图片上局部放大效果
京东商城产品展示页多图切换并放大代码,放大功能的核心代码为jQzoom,当把鼠标移到下边的小图上的时候,上边显示大图片,当把鼠标放到大图片上,右侧则出现鼠标对应地方的大图片,方便查看产品细节,比较适合网店...