首页 > 代码库 > javascript学习---------图像处理

javascript学习---------图像处理

2024-07-12 10:32:33   224人阅读


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="http://www.mamicode.com/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>


联系
我们