jsp中，当鼠标移动到图片上时，显示该图片的大图

最新推荐文章于 2024-01-25 12:27:20 发布

iastro

最新推荐文章于 2024-01-25 12:27:20 发布

阅读量6.7k

点赞数

分类专栏： js css html 文章标签： css html jquery插件

js 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>emu</title>
</head>
<body>
<BR>
原图：<BR>
<img src=[pp.jpg οnmοusemοve="zoom()" id=srcImg>
<BR>
局部放大图：<BR>
<div style="overflow:hidden"><img id=zoomImg></div>
<SCRIPT LANGUAGE="javascript">

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

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