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


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学习---------图像处理,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。