程序演示Demo:http://www.babesun.com/code/autoresize.html
程序演示Demo v1.1:http://www.babesun.com/code/autoresize_v1.1.html
代码查看网页源代码即可。
通过document.readyState属性判断网页加载状态,该属性有一下几个值:
uninitialized:对象已产生,但没有任何文件被加载。
loading:加载程序进行中,但文件尚未开始解析。
loaded:部分的文件已经加载且进行解析,但对象模型尚未生效。
interactive:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。
complete:文件已完全加载,代表加载成功
代码讲解:
一、图片缩放
1、默认样式中将img的visibility属性设为hidden,即,在JS未操作时,不现实图片加载的进度;
dl背景图片为loading的GIF图。
2、网页打开时,若文档加载状态未完成,即window.document.readyState!==”complete”,则通过setInterval函数来自动检查文档的加载状态;
当window.document.readyState == “complete” 时,代表页面完全加载,调用函数reSize(),遍历id=”IMG”下的图片,用ImgSize()进行缩放和相应样式修改;
设置style.visibility为visible,显示缩放后的图片;
将缩放完成的图片所在的dl背景图片清空:style.backgroundImage=”none”;
clearInterval()清空定时器。
二、ImgSize()函数讲解
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
if(imgObj.height/imgObj.width>378/308) { //若图片比dl框“窄” if(imgObj.height>378) //只判断高度不超过dl框即可,若高度超出 { imgObj.height=378 //缩放图片高度。此时宽度必定小于dl框,不进行操作。 } } else //若图片比dl框“宽” { if(imgObj.width>308) //只判断宽度不超过dl框即可,若宽度超出 { imgObj.width=308 //缩放图片宽度。此时高度必定小于dl框,不进行操作。 } imgObj.style.visibility="visible"; imgObj.style.marginLeft=(308 - imgObj.width)/2+"px"; imgObj.style.marginTop=(378 - imgObj.height)/2+"px"; }; |
三、设置图片的dl框中水平、垂直局中
imgObj.style.marginLeft=(308 – imgObj.width)/2+”px”;
imgObj.style.marginTop=(378 – imgObj.height)/2+”px”;
通过以上两个语句,设定图片的左、上间距,为dl宽高减去图片宽高的一半;此时图片将在dl框中水平、垂直局中。
2 Comments
老大,你的博客产量很高啊!不过又是让我头昏的代码,呵呵!
专业的人做专业的事,支持!
老不写东西多对不起来看的童鞋啊,呵呵~我也会写点生活类的东西的,只是昨天刚好要用到这样的JS,就写了一段。还在学习中。