js如何让图片显示隐藏三次

JavaScript07

js如何让图片显示隐藏三次,第1张

一、案例需求

点击按钮后图片隐藏，同时按钮的文字变为显示，再次点击按钮图会显示，同时按钮的文

字变为隐藏。

二、案例分析

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)

这样就能把图片渲染出来了。