js实现图片滚轮、按钮缩放大小，图片旋转，图片拖拽

JavaScript022

js实现图片滚轮、按钮缩放大小，图片旋转，图片拖拽,第1张

<div class="upload-img-box" ref="moveWrap">

<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>