一种简单实用的内容页大图片处理方式

作者:cmscn 日期:2009-01-16

字体大小: 小中大

这种方法的思路是：图片超出限制尺寸时，自动缩小到适当的大小，单击图片后，直接使元素浮上来并按原始尺寸显示，再创建一个大小和小图片一样的空盒子填到原位置。这样的好处就是在IE6中，图片放大时不必再重复加载一次。再次单击后图片归位。

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>一种简单的内容页大图片处理方式</title>
<script type="text/javascript">
function $(){
return document.getElementById($.arguments[0])
}
var arkMaxWidth=500;//限定最大宽度
var arkMaxHeight=10000;//限定最大高度
var tempW,tempH;//存放原图尺寸
var zoomImg;
var arkTop;
function reloadimg(imgobj){
  imgobj.title="单击放大";
/*当图片超出限定尺寸时，缩小到适当大小。*/
  if(imgobj.width>arkMaxWidth){tempW=imgobj.width;tempH=imgobj.height;imgobj.width=arkMaxWidth;}
  if(imgobj.height>arkMaxHeight){
    tempH=imgobj.height;
    imgobj.height=arkMaxHeight;
    imgobj.width=imgobj.width*(arkMaxHeight/tempH);}
  try{imgobj.style.cursor="pointer";}catch(e){imgobj.style.cursor="hand";}
/*定义单击事件*/
  imgobj.onclick=function(){
	  if(imgobj.style.position!="absolute"){ //当图片还没有上浮
		 arkTop=document.documentElement.scrollTop; 
	  try{
		 if(arkTop<document.body.scrollTop)
		 	arkTop=document.body.scrollTop;
		  }catch(e2){}
  //创建填充盒子
	  var oNewNode = document.createElement("DIV");
	  oNewNode.style.height=imgobj.height+"px";
	  oNewNode.style.overflow="hidden";
	  imgobj.parentNode.insertBefore(oNewNode,imgobj.nextSibling);
  //图片上浮
	  imgobj.style.position="absolute";
	  imgobj.style.border="3px solid #333333";
	  imgobj.width=tempW;
	  imgobj.title="单击关闭";
	  imgobj.style.top=Math.max(arkTop+Math.max((document.documentElement.clientHeight-imgobj.height-4)/2,0),0)+"px";
	  imgobj.style.left=Math.max(document.documentElement.scrollLeft+Math.max((document.documentElement.clientWidth-imgobj.width-4)/2,0),0)+"px";
	  imgobj.style.zIndex=99;
  //创建背景层
	  var oNewNode1 = document.createElement("DIV");
	  oNewNode1.style.cssText="filter:alpha(opacity=50);opacity:0.5;background:#000;";
	  oNewNode1.style.height=Math.max(document.documentElement.clientHeight,tempH+6)+"px";
	  oNewNode1.style.width=Math.max(document.documentElement.clientWidth,tempW+6)+"px";
	  oNewNode1.style.overflow="hidden";
	  oNewNode1.style.left=0;
	  oNewNode1.style.top=arkTop+"px";
	  oNewNode1.style.position="absolute";
	  oNewNode1.style.zIndex=3;
	  imgobj.parentNode.insertBefore(oNewNode1,imgobj.nextSibling);
	  }
	  else{ //当图片已经上浮
	  imgobj.parentNode.removeChild(imgobj.nextSibling); //删除背景层
	  imgobj.parentNode.removeChild(imgobj.nextSibling); //删除填充盒子
	  imgobj.style.position="relative"; //图片规位
	  imgobj.style.border="0px solid #333333";
	  imgobj.width=arkMaxWidth;
	  imgobj.title="单击放大";
	  imgobj.style.top=0;
	  imgobj.style.left=0;
	  imgobj.style.zIndex=0;
		  }
  }
}
 /*判断正文区域中的图片是否超出限定尺寸*/
function reImg(){
zoomImg=$("endText").getElementsByTagName('img');
for(var i=0;i<zoomImg.length;i++){
  if(zoomImg[i].width>arkMaxWidth||zoomImg[i].height>arkMaxHeight)reloadimg(zoomImg[i]);
  zoomImg[i].onload=function(){if(this.width>arkMaxWidth||this.height>arkMaxHeight)reloadimg(this);}
}
}
</script>
<style type="text/css">
#endText{width:600px;overflow:hidden;border:1px solid #666;padding:}
.eT-in{padding:6px;}
</style>
</head>
<body>
<div id="endText">
  <div class="eT-in">
    <p>一种简单的内容页大图片处理方式</p>
    <p>图片超出限制尺寸时，自动缩小到适当的大小，单击图片后，直接使元素浮上来并按原始尺寸显示，再创建一个大小和小图片一样的空盒子填到原位置。再次单击后图片归位。</p>
    <img src="<a href="http://bbs.blueidea.com/attachment.php?aid=108794" target="_blank" rel="external">http://bbs.blueidea.com/attachment.php?aid=108794</a>&k=228984dae419e286a9e6cc7af266f232&t=1230472970&noupdate=yes¬humb=yes" />
    <p>此方法适合在网站或论坛的正文页使用。</p>
    <p>应用实例：<a href="<a href="http://www.shidi.org/sf_3E94BBAAD8E44BD983A1B39BEED4D3D9_151_hzyxj.html" target="_blank" rel="external">http://www.shidi.org/sf_3E94BBAAD8E44BD983A1B39BEED4D3D9_151_hzyxj.html</a>" target="_blank"><a href="http://www.shidi.org/sf_3E94BBAAD8E44BD983A1B39BEED4D3D9_151_hzyxj.html" target="_blank" rel="external">http://www.shidi.org/sf_3E94BBAAD8E44BD983A1B39BEED4D3D9_151_hzyxj.html</a></a></p>
  </div>
</div>
<script>reImg();</script>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: 大图

相关日志:

评论: 0 | 引用: 0 | 查看次数: 701

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字记住我的信息,以便下次评论时不用输入用户名.

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号. 字数限制 20 字 \| UBB代码关闭 \| [img]标签关闭

一种简单实用的内容页大图片处理方式

作者:cmscn 日期:2009-01-16

feed

User Panel

Archive

Search