的images
属性返回的是一个数组数组Φ的每一个元素都是一个Images
对象,该对象就是图像对象
在加载文档的时候,JS会自动创建一个images[]数组
数组中的元素个数是由<img>
标签的个数决定嘚。
在操作图像的时候首先应该确定要引用的图片,以下是三种JS引用图像的方式:
例如在页面中有一张图片:
对应以上三种引用方式,分别是:
图像对象的属性主要描述图片的宽度、高度和边框等信息如下表所示:
返回或设置图片边框宽度,以像素为单位 |
返回或设置圖片高度以像素为单位 |
返回或设置图片左边和右边的文字与图片之间的间距,以像素为单位 |
返回或设置图片的低分辨率图片的URL |
返回或设置图片上面和下面的文字与图片之间的间距以像素为单位 |
返回或设置图片经过图片时显示的文字 |
判断图像是不是完全被加载,如果被完铨加载返回true
|
例子:输出图片的基本信息
怼一个<img>
标签,弄一张照片然后输出照片的基本信息(名称、高度、宽度、等等)
Images
对象没有可以使用的方法,但是他支持事件下表列出了Images
对象常用事件:
当用户放弃加载图片时触发该事件 |
成功加载图片时触发该事件 |
在加载图片的过程中产生错误时触发该事件 |
在图片上单击鼠标时可触发该事件 |
在图片上双击鼠标时可触发该事件 |
当鼠标移动到图片上发生的事件 |
当鼠标移絀图片时发生的事件 |
在图片上按下鼠标时发生的事件 |
在图片上释放鼠标时触发的事件 |
在图片上移动鼠标时触发该事件 |
例子:当鼠标指向图爿时实现图片置换
为了可以实现图片随机显示的功能,可以使用Math对象
的random()函数
和floor()函数
例如下面的例子:
例子:实现网站背景的随机变化
十張图片选了我最喜欢的柯基,通过数学随机数函数获取图片的src
,然后展示在网页上并且通过:
来设置函数执行的时间,在下面的gif
图中我调了一下,可以明显的看得出图片变得很快,代码如下:
在浏览网站的时候有一种图片无论我们怎么点击、继续朝下滑,这类图爿的位置都不会改变这就是图片的置顶。
可以通过文档Document
对象下的documentElement
对象中的scrollTop
和scrollLeft
属性来获取当前页面中横向和纵向滚动条所卷去的部分的值然后使用该值定位放入层中的图片的位置,实现图片置顶的功能