本文实例讲述了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>
</head>
<body>
<div id="marqueeDiv"style="position:absoluteleft:0px"><img src="1.jpg" style="width:100px" onmouseover="showImg(this)"></div>
<script type="text/javascript">
var width=document.body.offsetWidth-100
var left=0
var flag='add'
function marquee(){
if(left>=width){
flag='cut'
}
if(left<=0){
flag='add'
}
if(flag=='add'){
left+=2
}else if(flag=='cut'){
left-=2
}
var marqueeDiv=document.getElementById("marqueeDiv")
marqueeDiv.style.left=left+"px"
setTimeout("marquee()",10)
}
setTimeout("marquee()",100)
function showImg(obj){
obj.style.width="200px"
}
</script>
</body>
</html>
没有做onmouseleave和onmouseout事件。
<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弹出图片可自定义定制丰富的图片效果
