在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现）

JavaScript017

在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现）,第1张

可以用js事件“onmouseover”和“onmouseout”来实现。

1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：

2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：

3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：

一般来说图片可以随意更换，但现在JS的图片代码太多了，作者不一样，写法也不一样。

我只能这么说，大部分的JS代码里面都写有图片的尺寸，如果你自己换了大图，那么在你下载回来的JS代码里面对应的修改width和height就可以了，还有，注意所有图片尺寸做成一样，这样才美观。

（当然这只是大部分情况，不知道你手上的代码是怎样的，只能建议你试试看，希望对你有帮助）

www.SummuR.com

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