<div class="show-box" ref="rotate" @mousedown="moveImg" @mousewheel.prevent="rollImg($event,)">
<img :src="singleList.fileImgUrl" class="uploadimg" ref="img" :style="{transform:'scale('+multiples/100+') rotate('+rotate +'deg)'}"/>
</div>
<div class="img-plus" @click="toBIgChange()"><span class="tip">放大</span></div>
<div class="img-minus" @click="toSmallChange()"><span class="tip">缩小</span></div>
<div class="img-rotate" @click="toRotate()"><span class="tip">旋转</span></div>
</div>
<html><head>
<title>emu</title>
</head>
<body>
<BR>
原图:<BR>
<img
src=[pp.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>
这个是随鼠标移动查看放大图片响应的是onmousemove事件
你可以改下
第二种方法:
可自定义CSS样式，控制jQuery插件jQuery
Image
Flyout提示小图片显示效果。
代码
一，包含文件
<script
src="jquery.js"
type="text/javascript"></script>
<script
src="jquery.flyout.js"
type="text/javascript"></script>
<script
src="jquery.easing.js"
type="text/javascript"></script>
二，HTML部分(DIV层内所用图片链接)
<div>jQuery插件flyout弹出图片</div>
<div
id="biuuu">
<a
href="iphone.jpg"
title="jquery.flyout"><img
src="iphone_small.jpg"
alt="iphone"
/></a>
</div>
三，Javascript部分(jQuery插件jQuery
Image
Flyout弹出图片调用)
<script
type="text/javascript">
<!--
$(function()
{
$(#biuuu
a).flyout()
-->
</script>
实例中将ID为biuuu的DIV内所有链接元素<a>增加javascript弹出放大图片功能，其中链接href部分为表示弹出的
大图片路径。使用jQuery插件jQuery
Image
Flyout弹出图片，实现javascript弹出放大图片功能只需要一行代码即可实现。
一，自定义预加载提示图片
$(#biuuu
a).flyout({loadingSrc:thumb-loading.gif,outEase:easeInCirc,inEase:easeOutBounce})
loadingSrc表示预加载提示图片路径
outEase表示弹出图片放大过程使用的jQuery插件Easing
Plugin特效，如:easeInCirc
inEase表示弹出图片缩小过程使用的jQuery插件Easing
Plugin特效，如:easeOutBounce
二，自定义弹出图片后图片显示样式
$(#biuuu
a).flyout({loadingSrc:thumb-loading.gif,outEase:easeOutQuad,inEase:easeInBack,loader:loader2,widthMargin:300,heightMargin:300})
loader表示弹出图片后调用的CSS样式
widthMargin表示弹出图片后显示的margin宽度
heightMargin表示弹出图片后显示的margin高度
jQuery插件jQuery
Image
Flyout弹出图片可自定义定制丰富的图片效果
<img src="12345.jpg" onclick="newwindow(this) /><script type="text/javascript>
function newwindow(img)
{
window.open(img.src,"新窗口","height="+img.style.height,width="+img.style.width)
}
</script>
