`
bubaiyouyun
  • 浏览: 29073 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

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

    博客分类:
  • Java
阅读更多
这种方法的思路是:图片超出限制尺寸时,自动缩小到适当的大小,单击图片后,直接使元素浮上来并按原始尺寸显示,再创建一个大小和小图片一样的空盒子填到原位置。这样的好处就是在IE6中,图片放大时不必再重复加载一次。再次单击后图片归位。
此方法适合在网站或论坛的正文页使用。我在制作网站时一直使用这种方式,发上来和大家分享,欢迎提出保贵意见。

应用实例:http://www.shidi.org/sf_3E94BBAAD8E44BD983A1B39BEED4D3D9_151_hzyxj.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 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="http://bbs.blueidea.com/attachment.php?aid=108794&k=228984dae419e286a9e6cc7af266f232&t=1230472970&noupdate=yes&nothumb=yes" />
<p>此方法适合在网站或论坛的正文页使用。</p>
<p>应用实例:<a href="http://www.shidi.org/sf_3E94BBAAD8E44BD983A1B39BEED4D3D9_151_hzyxj.html" target="_blank">http://www.shidi.org/sf_3E94BBAAD8E44BD983A1B39BEED4D3D9_151_hzyxj.html</a></p>
</div>
</div>
<script>reImg();</script>
</body>
</html>
分享到:
评论

相关推荐

    Excel表格内容直接转换成图片

    要将Excel的表格内容复制成图片插在Word文档中,我们除了使用抓图H软件H就是按键盘上的PrintScreen键来抓 取,这两种方法中前者要借助第三方软件来实现,后者虽然简单,但抓取的图片也要经过裁剪、缩放等方式处理。...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    119. 非常不错jQuery网页内容图片分类插件带特效 120. 非常实用的jquery幻灯切换广告源码 121. 非常帅的jQeruy图片切换拖影变清淅的神奇特效 1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图...

    python 修改图片大小比例

    提供一种简单、快捷的方式调整图片尺寸比例,满足用户在不同场景下的图片处理需求,同时保持图片的清晰度和质量。 其他说明: 1. 该程序支持常见的图片格式,如JPG、PNG等。 2. 在调整图片尺寸时,程序会根据用户...

    基于PHP实现的WEB图片共享系统(源代码+论文)

    一种是JPEG一种是PNG,现在大多数的数码相机都是使用JPEG格式保存图片,但是考虑到版权问题,也应提供PNG格式图片的支持。 3.1.3 分类 图片上传后,根据图片的标签以及图片所在任务自动将图片按照标签以及任务进行...

    基于PHP的图片共享系统的设计与实现源码和文档

    一种是JPEG一种是PNG,现在大多数的数码相机都是使用JPEG格式保存图片,但是考虑到版权问题,也应提供PNG格式图片的支持。 3.1.3分类 图片上传后,根据图片的标签以及图片所在任务自动将图片按照标签以及任务进行分类...

    基于PHP的图片共享系统的设计与实现源码和文档分享

    一种是JPEG一种是PNG,现在大多数的数码相机都是使用JPEG格式保存图片,但是考虑到版权问题,也应提供PNG格式图片的支持。 3.1.3分类 图片上传后,根据图片的标签以及图片所在任务自动将图片按照标签以及任务进行分类...

    php图片共享系统(源代码+LW).zip

    一种是JPEG一种是PNG,现在大多数的数码相机都是使用JPEG格式保存图片,但是考虑到版权问题,也应提供PNG格式图片的支持。 分类 图片上传后,根据图片的标签以及图片所在任务自动将图片按照标签以及任务进行分类 图片...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    82. 几种简单实用jQuery焦点图片自动切换效果 83. 分享jquery仿LightBox动感多样式图片放大插件zoomimage下载 84. 分享jquery仿当当网店铺图片轮番切换(同时显示图片说明)代码下载 85. 分享一款jQuery thumbnail...

    快速看图 WPS 图片 3.8.0.5 中文版.zip

    WPS 图片是一款永久无广告的图片处理软件,强劲图片引擎加持,流畅查看大图;完美兼容超过17种图片格式。内含30余种图片工具,智能抠图、表情包DIY、拼图等功能助你一秒变身p图大师;更有批量处理、高级图片打印、...

    图片批量裁剪器(精华版) v6.0.rar

    图片批量裁剪器(精华版)是 一款功能丰富、实用、应有尽有的图片/视频批量裁剪、水印、转换、更名,以及其他处理的专业工具!批量处理时不低于5万个文件。 以管理员身份和兼容xp3模式下运行,可支持win7,win8,win10,...

    我的ABC软件工具箱 一款离线免费图片处理工具

    我的ABC软件工具箱是一款简单小巧,却非常实用的批量处理办公助手,支持免费使用,界面清爽,无弹屏广告,助你开启高效办公的大门。 集成近百种批量处理文件的功能,如:批量查找替换 Word、Excel、PPT、PDF 和文本...

    图片相似度识别

    这种算法的优点是简单快速,不受图片大小缩放的影响,缺点是图片的内容不能变更。如果在图片上加几个文字,它就认不出来了。所以,它的最佳用途是根据缩略图,找出原图。 实际应用中,往往采用更强大的pHash算法...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    6.jquery一页多用的飞飞图片幻灯插件演示 7.jquery仿flash产品图片多角度展示特效代码 8.jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 9.jquery仿flash的图片幻灯片播放特效实例完整版 10....

    100多个JQuery效果示例(实例)div+css+javascrpit

    82. 几种简单实用jQuery焦点图片自动切换效果 83. 分享jquery仿LightBox动感多样式图片放大插件zoomimage下载 84. 分享jquery仿当当网店铺图片轮番切换(同时显示图片说明)代码下载 85. 分享一款jQuery thumbnail...

    计算机毕业设计:Python实现的图片批量处理器应用(源码+详细说明),保证可靠运行,附赠计算机答辩PPT模板

    该应用具备图片格式转换、尺寸调整、裁剪、滤镜应用等丰富的批量处理功能,用户只需简单设置参数,即可一次性处理大量图片,大大提高了图片处理的效率。同时,应用界面简洁明了,操作便捷,即使对于初学者也能快速...

    jquery 动态示例

    82. 几种简单实用jQuery焦点图片自动切换效果 83. 分享jquery仿LightBox动感多样式图片放大插件zoomimage下载 84. 分享jquery仿当当网店铺图片轮番切换(同时显示图片说明)代码下载 85. 分享一款jQuery thumbnail...

    批量处理图片工具 ImBatch 7.1.0 中文多语版.zip

    ”ImBatch让你使用那些具有强大的格式转换技术,让你真正从一种格式转换图像文件到另一台正常工作。另外,ImBatch包括三个不同的插件(Dcraw执行,ImageMagick的,和JBIG),该服务,极大地扩展的格式的数量也能够...

    HitPawWatermarkRemover2.0.0.20x64一款人工智能AI图像及视频物体移除去水印软件.exe

    软件的操作也非常简单,用户只需要选择好图片中的水印区域,然后选择自定义选择平滑填充、纹理修补和边缘补充这三种移除方式即可一键点击移除,轻松的去除掉图片中的水印,不会有任何的残留,也不会对图像上的内容...

    iRoundPic圆角方角图片快速制作

    零操作多用途制作,快速自动生成圆角图片、多边形图片、为图片加水印、转换图片格式、压缩图片尺寸,全部支持批量操作。完全本地化的软件操作使用,不用上传到网络制作以避免原始图片素材的流失,保证你原始图片的...

    如何将PPT转word

    一、把PPT转WORD形式的方法  1.利用"大纲"视图 打开PPT演示文稿,单击"大纲",在左侧"幻灯片/大纲”任务窗格的“大纲”选项卡里单击一下鼠标,按"Ctrl+A"组合健全选内容,然后使用"Ctrl+C"组合键或右键单击在快捷...

Global site tag (gtag.js) - Google Analytics