论坛首页 → Web前端技术论坛 →

无聊时写了个图片预览的js

浏览 10760 次
锁定老帖子 主题：无聊时写了个图片预览的js
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • thuiones
  • 等级: 初级会员
  • 性别:
  • 文章: 21
  • 积分: 80
  • 来自: 北京
   发表时间：2010-04-07  
已经在ie，ff下测试通过了。
图片是渐渐放大的效果，有背景遮罩，
第一次写这样的东西，可能代码写的比较啰嗦， ，有兴趣的朋友可以下来看看 
<!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>
返回顶楼
         
  • 天梯梦
  • 等级: 初级会员
  • 性别:
  • 文章: 16
  • 积分: 30
  • 来自: 洛杉矶
   发表时间：2010-04-08  
没有什么特别的
返回顶楼
          回帖地址
0 请登录后投票
  • whaosoft
  • 等级: 一星会员
  • 性别:
  • 文章: 3179
  • 积分: 100
  • 来自: 北京
   发表时间：2010-04-08  
问下 跨浏览器吗？
返回顶楼
          回帖地址
0 请登录后投票
  • ccyingfu
  • 等级: 一星会员
  • 性别:
  • 文章: 80
  • 积分: 130
  • 来自: 长春
   发表时间：2010-04-09  
挺好的啊~像你学习~
返回顶楼
          回帖地址
0 请登录后投票
  • thuiones
  • 等级: 初级会员
  • 性别:
  • 文章: 21
  • 积分: 80
  • 来自: 北京
   发表时间：2010-04-09  
whaosoft 写道
问下 跨浏览器吗？

目前只测试过ie，ff，别的浏览器没有测试过
返回顶楼
          回帖地址
2 请登录后投票
  • 刃之舞
  • 等级: 初级会员
  • 性别:
  • 文章: 417
  • 积分: 0
  • 来自: 渔村
   发表时间：2010-04-09  
天梯梦 写道
没有什么特别的


你不评论句这个你会死啊？
返回顶楼
          回帖地址
0 请登录后投票
  • liuxulin0618
  • 等级: 初级会员
  • 性别:
  • 文章: 5
  • 积分: 30
  • 来自: 天津
   发表时间：2010-04-11  
谢谢呀  没天的在这里学一点 会提高很高的
返回顶楼
          回帖地址
0 请登录后投票
  • huanglei7211
  • 等级: 初级会员
  • 性别:
  • 文章: 26
  • 积分: 10
  • 来自: 长沙
   发表时间：2010-04-12  
很少弄js，下载你的资料看下
返回顶楼
          回帖地址
0 请登录后投票
  • shijian0306
  • 等级: 初级会员
  • 文章: 43
  • 积分: 40
  • 来自: ...
   发表时间：2010-04-13  
you bug
返回顶楼
          回帖地址
0 请登录后投票
  • see8di
  • 等级: 初级会员
  • 性别:
  • 文章: 7
  • 积分: 30
  • 来自: 臺灣
   发表时间：2010-06-25  
简单的看了一下,发现有bug
例如图片不存在的时候获取不到图片的宽度和高度,那就成了一个死循环.
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics