Image对象的存储和获取
web页面中所有的<img>元素存储在一个document.images[]数组中
通过document.images[index]
document.images["name"]访问
注意：name是<img>标签的属性name的值
图片的预装载
缓解图片装载缓慢的问题。
原理：预装载实在HTTP请求图像之前将其下载到缓存的一种方式，
当页面需要图像时，图像可以立即从缓存中取出，从而将图像立即显示在页面上。
图片的随机显示
使用Math对象中的random函数 和 floor函数
random函数：返回0-1之间的数
floor函数：返回小于或等于指定数字的最大整数
也可以利用图片的随机显示制作图片验证码
图片的滚动效果
使用scrollWidth和clientWidth以及offsetWidth等相关属性来制作
参见：http://7613943.blog.51cto.com/7603943/1438635
图片的渐变效果
使用alpha的opacity属性来实现。
还可以利用控制width的值来实现滚动条
使用visibility来实现图片闪烁效果
图片的时钟显示
使用Data对象来获取时间
然后用获取的时间值与相应的图片对应
图片的翻转效果：
使用滤镜filter来实现
图片总置于顶端的效果：
通过获取body元素的scrollTop属性来设置图片的位置
<html>
<body style="height:1000px;width:2000px">
<div >
<img src="1.jpg" width="20%" style="position:absolute;top:10px;left:1050px;">
</div>
<script type="text/javascript">
function setLocation(){
var x = document.body.scrollTop;
var y = document.body.scrollLeft;
var ele = document.images[0]
ele.style.top = 10+x+"px";
ele.style.left = 1050+y+"px"
console.log(y)
}
setInterval(setLocation,1)
</script>
</body>
</html>
javascript学习---------图像处理,布布扣,bubuko.com
时间： 2025-01-12 23:22:39