js实现单击图片放大图片的方法

JavaScript023

js实现单击图片放大图片的方法,第1张

这篇文章主要介绍了js实现单击图片放大图片的方法,涉及javascript操作图片的技巧与onclick事件的用法,需要的朋友可以参考下

本文实例讲述了js实现单击图片放大图片的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<html>

<title>单击图片即可放大图片</title>

<body>

点击图片预览效果。<br>

<img

src="/images/m01.jpg"

onclick="this.width+=50this.height+=50"

onclick="javascript:window.open(this.src)"

style="cursor:pointer"/>

<img

src="/images/m02.jpg"

onclick="this.style.zoom='2'"

onclick="javascript:window.open(this.src)"

style="cursor:pointer"/>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

<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弹出图片可自定义定制丰富的图片效果