点击按钮后图片隐藏，同时按钮的文字变为显示，再次点击按钮图会显示，同时按钮的文
字变为隐藏。
二、案例分析
1、事件源：按钮（button）
2、事件类型：点击（onclick）
3、事件处理程序：
（1）文字内容改变用：innerText
（2）图片是否显示用：display
三、代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏图片</title>
<style>
#new {
width: 200px
margin-top: 10px
}
</style>
</head>
<body>
<button id="btn">隐藏</button><br>
<img src="images/img01.jpg" id="new">
<script>
// 1. 获取元素
var btn = document.querySelector('#btn')
var img = document.querySelector('#new')
var index = 1
// 2. 添加事件
btn.onclick = function() {
//法一：
if (index++ % 2 === 1) {
img.style.display = 'none'
this.innerText = '显示'
} else {
img.style.display = 'block'
this.innerText = '隐藏'
}
// 法二
// if (this.innerText === '隐藏') {
废话不多说了，直接给大家贴js实现点击图片显示原图片的代码，具体代码如下所示：function
DrawImage(ImgD){
var
image
=
new
Image()
image.src=ImgD.src
var
width
=
$(ImgD).attr("width")
var
height
=
$(ImgD).attr("height")
if(width
>100
&&
height>80){
ImgD.width=100
ImgD.height=80
ImgD.alt=image.width+"×"+image.height
}else{
if(image.width>0
&&
image.height>0){
flag=true
if(image.width>300
||
image.height>200){
ImgD.width=image.width/2
ImgD.height=image.height/2
ImgD.alt=image.width+"×"+image.height
}else{
ImgD.width=image.width
ImgD.height=image.height
ImgD.alt=image.width+"×"+image.height
}
}
}
}
下面分享一段关于js实现上传图片及时预览
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
>
<head>
<meta
http-equiv="Content-Type"
content="text/html
charset=utf-8"
/>
<title>图片上传本地预览</title>
<style
type="text/css">
#preview{width:260pxheight:190pxborder:1px
solid
#000overflow:hidden}
#imghead
{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)}
</style>
<script
type="text/javascript">
//图片上传预览
IE是用了滤镜。
function
previewImage(file)
{
var
MAXWIDTH
=
260
var
MAXHEIGHT
=
180
var
div
=
document.getElementById('preview')
if
(file.files
&&
file.files[0])
{
div.innerHTML
='<img
id=imghead>'
var
img
=
document.getElementById('imghead')
img.onload
=
function(){
var
rect
=
clacImgZoomParam(MAXWIDTH,
MAXHEIGHT,
img.offsetWidth,
img.offsetHeight)
img.width
=
rect.width
img.height
=
rect.height
//
img.style.marginLeft
=
rect.left+'px'
img.style.marginTop
=
rect.top+'px'
}
var
reader
=
new
FileReader()
reader.onload
=
function(evt){img.src
=
evt.target.result}
reader.readAsDataURL(file.files[0])
}
else
//兼容IE
{
var
sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'
file.select()
var
src
=
document.selection.createRange().text
div.innerHTML
=
'<img
id=imghead>'
var
img
=
document.getElementById('imghead')
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src
=
src
var
rect
=
clacImgZoomParam(MAXWIDTH,
MAXHEIGHT,
img.offsetWidth,
img.offsetHeight)
status
=('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height)
div.innerHTML
=
"<div
id=divhead
style='width:"+rect.width+"pxheight:"+rect.height+"pxmargin-top:"+rect.top+"px"+sFilter+src+"\"'></div>"
}
}
function
clacImgZoomParam(
maxWidth,
maxHeight,
width,
height
){
var
param
=
{top:0,
left:0,
width:width,
height:height}
if(
width>maxWidth
||
height>maxHeight
)
{
rateWidth
=
width
/
maxWidth
rateHeight
=
height
/
maxHeight
if(
rateWidth
>
rateHeight
)
{
param.width
=
maxWidth
param.height
=
Math.round(height
/
rateWidth)
}else
{
param.width
=
Math.round(width
/
rateHeight)
param.height
=
maxHeight
}
}
param.left
=
Math.round((maxWidth
-
param.width)
/
2)
param.top
=
Math.round((maxHeight
-
param.height)
/
2)
return
param
}
</script>
</head>
<body>
<div
id="preview">
<img
id="imghead"
width=100
height=100
border=0
src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>
<input
type="file"
onchange="previewImage(this)"
/>
</body>
</html>
很显然从后端返回的是一个图片路径，那么你要做的就是把这个路径塞进img的src里面，如：<img src="路径"/>实现步骤：1.先在html里面定义一个img标签<img src=""/>
2.一般情况下图片地址是一个变量，也就是说首先将后端返回的地址保存在一个变量中，如：var imgsrc = res.data.otherImg(根据接口实际情况获取，我这里只是举例)
2.通过js把地址塞进img里面，如： $('img').attr('src', imgsrc)
这样就能把图片渲染出来了。
