JavaScript 图像对象

最新推荐文章于 2025-04-02 14:53:00 发布

lesileqin

最新推荐文章于 2025-04-02 14:53:00 发布

阅读量3.3k

点赞数 5

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/lesileqin/article/details/103938370

版权

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

文章目录

一、图像对象概述
二、图像对象的应用

一、图像对象概述

1、图像对象介绍

文档（Document）对象的images属性返回的是一个数组，数组中的每一个元素都是一个Images对象，该对象就是图像对象。

在加载文档的时候，JS会自动创建一个images[]数组，数组中的元素个数是由<img>标签的个数决定的。

在操作图像的时候，首先应该确定要引用的图片，以下是三种JS引用图像的方式：

通过document.images[]按编号访问
通过dockumet.images[imageName]按名称访问
在支持DOM的浏览器中，使用document.getElementById("imgID")来定位要访问的图片

例如，在页面中有一张图片：

<img name="flower" id="mypic" src="flower.png">

对应以上三种引用方式，分别是：

document.images[0]
document.images["flower"]
document.getElementById("mypic")

2、图像对象属性

图像对象的属性主要描述图片的宽度、高度和边框等信息，如下表所示：

属性	说明
`border`	返回或设置图片边框宽度，以像素为单位
`height`	返回或设置图片高度，以像素为单位
`hspace`	返回或设置图片左边和右边的文字与图片之间的间距，以像素为单位
`lowsrc`	返回或设置图片的低分辨率图片的URL
`name`	返回或设置图片名称
`src`	返回或设置图片URL
`vspace`	返回或设置图片上面和下面的文字与图片之间的间距，以像素为单位
`width`	返回或设置图片宽度
`alt`	返回或设置图片经过图片时显示的文字
`complete`	判断图像是不是完全被加载，如果被完全加载，返回`true`

例子：输出图片的基本信息

怼一个<img>标签，弄一张照片，然后输出照片的基本信息（名称、高度、宽度、等等）

代码如下：

<img src="1.jpg" width="240" height="240" name="wukong" border="3px">
<br><br>
<script type="text/javascript">
    document.write("图片名称："+document.images[0].name+"<br>");
    document.write("图片高度："+document.images[0].height+"<br>");
    document.write("图片宽度："+document.images[0].width+"<br>");
    document.write("图片边框："+document.images[0].border+"<br>");
    document.write("图片URL:"+document.images[0].src);
</script>

效果展示：
在这里插入图片描述

3、图像对象的事件

Images对象没有可以使用的方法，但是他支持事件，下表列出了Images对象常用事件：

事件	说明
`abort`	当用户放弃加载图片时触发该事件
`load`	成功加载图片时触发该事件
`error`	在加载图片的过程中产生错误时触发该事件
`click`	在图片上单击鼠标时可触发该事件
`dbclick`	在图片上双击鼠标时可触发该事件
`mouseover`	当鼠标移动到图片上发生的事件
`mouseout`	当鼠标移出图片时发生的事件
`mousedown`	在图片上按下鼠标时发生的事件
`mouseup`	在图片上释放鼠标时触发的事件
`mousemove`	在图片上移动鼠标时触发该事件

例子：当鼠标指向图片时实现图片置换

代码如下：

<script type="text/javascript">
    function changImage(imgName) {
        document.images[imgName].src="2.jpg";
    }
    function resetImage(imgName) {
        document.images[imgName].src="1.jpg";
    }
</script>
<img src="1.jpg " width="240" height="240" name="wu1" onmouseover="changImage('wu1')" onmouseout="resetImage('wu1')">

效果如下：
在这里插入图片描述

二、图像对象的应用

1、图片的随机显示

为了可以实现图片随机显示的功能，可以使用Math对象的random()函数和floor()函数，例如下面的例子：

例子：实现网站背景的随机变化

十张图片选了我最喜欢的柯基，通过数学随机数函数，获取图片的src，然后展示在网页上，并且通过：

setTimeout("函数名()",时间ms);

来设置函数执行的时间，在下面的gif图中，我调了一下，可以明显的看得出，图片变得很快，代码如下：

<body onload="bianhua()">
<img name="num" id="num1">
<script type="text/javascript">
    function bianhua() {
        var src="img/";
        var i = Math.floor(Math.random()*10);
        src+=i;
        src+=".jpg";
        document.images["num"].src = src;
        setTimeout("bianhua()",1000);
    }
</script>
</body>