1个JS写的图片预览程序
一段JS写的图片预览程序，简单实用。
这是基础版本，可以改进出很多版本。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME=”Generator” CONTENT=”EditPlus”>
<META NAME=”Author” CONTENT=”">
<META NAME=”Keywords” CONTENT=”">
<META NAME=”Description” CONTENT=”">
<script>
/*获取属性值*/
function getAttr(o, v){
return o.v || o.getAttribute(v);
}
/*等比缩放，并在原图上设置图片实际尺寸*/
function autoImgSizes(t){
if(t.offsetWidth == 0 || t.offsetHeight == 0){
t.src = t.src + “?time=” + +new Date();
return;
}
//记录图片是实际高宽
t.w = t.offsetWidth;
t.h = t.offsetHeight;
var param = {width:t.offsetWidth, height:t.offsetHeight};
if(param.width > getAttr(t, “maxWidth”) || param.height > getAttr(t, “maxHeight”)){
rateWidth = param.width / getAttr(t, “maxWidth”);
rateHeight = param.height / getAttr(t, “maxHeight”);
if(rateWidth > rateHeight){
param.width = getAttr(t, “maxWidth”);
param.height = param.height / rateWidth;
}else{
param.width = param.width / rateHeight;
param.height = getAttr(t, “maxHeight”);
}
}
if(param.width == 0) param.width = getAttr(t, “maxWidth”);
if(param.height == 0) param.height = getAttr(t, “maxHeight”);
t.style.width = param.width;
t.style.height = param.height;
}
</script>
</HEAD>
<BODY>
<img src=”imags/1.jpg” class=”show” onload=”autoImgSizes(this)” maxWidth=”100″ maxHeight=”100″/>
<img src=”imags/2.jpg” class=”show” onload=”autoImgSizes(this)” maxWidth=”100″ maxHeight=”100″/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<img src=”imags/3.jpg” class=”show” onload=”autoImgSizes(this)” maxWidth=”100″ maxHeight=”100″/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<img src=”imags/4.jpg” class=”show” onload=”autoImgSizes(this)” maxWidth=”100″ maxHeight=”100″/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<img src=”imags/5.jpg” class=”show” onload=”autoImgSizes(this)” maxWidth=”100″ maxHeight=”100″/>
</BODY>
</HTML>
<script>
function invokeClick(element) {
if(element.click)element.click();
else if(element.fireEvent)element.fireEvent(‘onclick’);
else if(document.createEvent){
var evt = document.createEvent(“MouseEvents”);
evt.initEvent(“click”, true, true);
element.dispatchEvent(evt);
}
}
var showImg = function(){
var imgs = document.getElementsByTagName(“img”), simg = new Array(),
//等比缩放展示图片
autoImgSize = function (t){
//根据原图片实际尺寸计算缩放后的高宽
var param = {width:t.w, height:t.h};
if(param.width > 500 || param.height >500){
rateWidth = param.width / 500;
rateHeight = param.height / 500;
if(rateWidth > rateHeight){
param.width = 500;
param.height = param.height / rateWidth;
}else{
param.width = param.width / rateHeight;
param.height = 500;
}
}
return param;
},
//展示
show = function(){
var t = this, time = 0, addw = 10, addh = 10,
masks = document.getElementById(“mask”),
nd = document.createElement(“div”),
sm = document.createElement(“img”),
closeDiv = document.createElement(“div”),
bsw = document.body.clientWidth, //可视窗口宽度
bsh = document.body.clientHeight, //可视窗口高度
bsl = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft), //浏览器卷曲左边距宽度
bst = Math.max(document.body.scrollTop, document.documentElement.scrollTop); //浏览器卷曲高度
if(!masks) mask();
nd.appendChild(sm);
document.body.appendChild(nd);
sm.width = 0;
sm.height = 0;
sm.src = t.src;
//div样式大小
nd.id = “_new_div”;
nd.style.position = “absolute”;
nd.style.zIndex = “9999″;
nd.style.display = “”;
nd.style.background = “#fff”;
var param = autoImgSize(t);
//动画效果
var enlargeImg = function(){
//图片大小
sm.width = addw;
sm.height = addh;
addw += 30;
addh += 30;
//div大小
nd.width = sm.offsetWidth + 20;
nd.height = sm.offsetHeight + 20;
//图片位置
sm.style.left = (nd.width – sm.width)/2;
sm.style.top = (nd.height – sm.height)/2;
//div位置始终在窗口中间
nd.style.left = (bsw – nd.offsetWidth)/2 + bsl ;
nd.style.top = (bsh – nd.offsetHeight)/2 + bst;
if(addw >= param.width || addh >= param.height){
clearInterval(time);
addw = 10;
addh = 10;
nd.appendChild(closeDiv)
closeDiv.innerHTML = “关闭”;
}
}
time = setInterval(enlargeImg, 40);
sm.style.cursor = “pointer”;
sm.onclick = function(){next(t)}
closeDiv.onclick = function(){closeD(true)};
},
//下一张
next = function(t){
for(var i=0, ci; ci=simg[i]; i++){
if(t.count == ci.count){
if(i == simg.length – 1){
alert(“最后一张了”);
return;
}else{
closeD();
invokeClick(simg[i+1]);
return;
}
}
}
},
//关闭
closeD = function(t){
var mm = document.getElementById(“mask”), dd = document.getElementById(“_new_div”), time = 0;
dd.parentNode.removeChild(dd);
if(t) mm.parentNode.removeChild(mm);
},
//mask遮罩层
mask = function(){
var newMask = document.createElement(“div”);
newMask.id = “mask”;
newMask.style.position = “absolute”;
newMask.style.zIndex = “1″;
var _scrollWidth = Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);
var _scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth + “px”;
newMask.style.height = _scrollHeight + “px”;
newMask.style.top = “0px”;
newMask.style.left = “0px”;
newMask.style.background = “#33393C”;
newMask.style.filter = “alpha(opacity=40)”;
newMask.style.opacity = “0.40″;
document.body.appendChild(newMask);
return newMask;
};
var count = 0;
for(var i=0, ci; ci=imgs[i]; i++){
if(ci.className == “show”){
simg.push(ci);
ci.style.cursor = “pointer”;
ci.count = count;
count++;
ci.onclick = show;
}
}
}
!+’\v1′ ? window.attachEvent(‘onload’, showImg) : window.addEventListener(‘load’, showImg, false);
</script>
你可以试一下。
