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