`

小图片大尺寸预览实现代码

IEJavaScriptQQ算法CSS 
阅读更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Javascript Images zoom-out view sample. Brought to you by 斩梦人.天天
QQ:22062019</title>
<script language="JavaScript">
<!--
var dshowW=450; //默认预览图宽度(可由小图的showW,showH动态指定)
var dshowH=300; //默认预览图高度
var bborder=1; //大图边框
var sborder=1; //小图边框
var vborder=1; //小预览图边框
var bigW,bigH,smallW,smallH,showW,showH,viewW,viewH;//大图,小图,预览窗,小预览窗
var nview,nflag,picstatus,tempo,abox,zoomX,zoomY;
//初始化
window.onload=function init(){
 isIE=window.event?1:0;
 picshow.style.borderWidth=bborder;
 picshow.style.width=dshowW;
 picshow.style.height=dshowH;
 bpic.style.display="";
 abox=document.body.getElementsByTagName("div"); //初始化所有小图
 for (n=0;n<abox.length;n++)
  if (abox[n].className=="picbox"){
   var o=abox[n];
   var view=getview(o);
   var img=getimg(o);
   view.style.borderWidth=vborder;
   o.style.borderWidth=sborder;
   o.style.width=img.width+sborder*2*isIE;
   o.style.height=img.height+sborder*2*isIE;
   o.setAttribute("pid",n); //小图标记,主键唯一
   if (o.getAttribute("show")=="show") loadpic(o);
   o.onmouseout=function (){setTimeout(nview.style.visibility='hidden');}
  }
}
//载入图片
function loadpic(o){
 var view=getview(o);
 var img=getimg(o);
 bpic.style.display="none";
 nview=view; //标记活动小预览窗
 nflag=o.getAttribute("pid"); //当前图片标记,用来判断切换图片
 //改变预览窗大小
 if (img.getAttribute("showW")!=null) showW=parseInt(img.getAttribute("showW"));
 else showW=dshowW;
 if (img.getAttribute("showH")!=null) showH=parseInt(img.getAttribute("showH"));
 else showH=dshowH;
 picshow.style.width=showW+isIE*bborder*2;
 picshow.style.height=showH+isIE*bborder*2;
 loading.style.marginTop=(showH-loading.offsetHeight)/2;
 if (img.getAttribute("dLeft")) bpic.style.marginLeft=-parseInt(img.getAttribute("dLeft"));
 if (img.getAttribute("dTop")) bpic.style.marginTop=-parseInt(img.getAttribute("dTop"));
 picstatus="loading";
 tempo=o;
 bpic.src=img.lowsrc;
}
//图片载入完成
function loaddone(o){
 bpic.style.display="block";
 var view=getview(o);
 var img=getimg(o);
 smallW=img.width; //改变小图,小预览窗大小
 smallH=img.height;
 bigW=bpic.width;
 bigH=bpic.height;
 if (showW>bigW){//如果预览图比大图大,则等于大图
  showW=bigW;
  picshow.style.width=showW+isIE*bborder*2;
 }
 if (showH>bigH){
  showH=bigH;
  picshow.style.height=showH+isIE*bborder*2;
 }
 zoomX=bigW/smallW;
 zoomY=bigH/smallH;
 viewW=showW*smallW/bigW;
 viewH=showH*smallH/bigH;
 nview.style.width=viewW-vborder*2*!isIE;
 nview.style.height=viewH-vborder*2*!isIE;
 nview.style.display="block";
 img.style.top=-nview.offsetHeight;
 if (!nview.style.left) nview.style.left=0;
 if (!nview.style.top) nview.style.top=0;
 picstatus="done"
}
//移动事件
function move(e,o,flag){ //flag,对象来源标记,FF下view的定位需要
 o=isIE?o.parentElement:o.parentNode;
 if (o.getAttribute("pid")!=nflag){ //判断是否切换了图片
  nview.style.visibility="hidden";
  loadpic(o); //载入新图片
 }
 if (picstatus="done"){ //如果大图载入完毕
  if (nview.style.visibility="hidden") nview.style.visibility="visible";
  var e=isIE?window.event:e;
  if (isIE==0){ //分别获取FF或IE的view位置
   if (flag==1){ //由于o的来源不同,使用不同的算法定位
    vX=e.layerX+parseInt(nview.style.left)-nview.offsetWidth/2-vborder;
    vY=e.layerY+parseInt(nview.style.top)-nview.offsetHeight/2-vborder;
   }else{
    vX=e.layerX-nview.offsetWidth/2-vborder;
    vY=e.layerY-nview.offsetHeight/2-vborder;
   }
  }
  else{
   vX=e.offsetX-nview.offsetWidth/2;
   vY=e.offsetY-nview.offsetHeight/2;
  }
  if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围
  if (vY < 0) vY = 0;
  if (vX > smallW-viewW) {vX=smallW-viewW;mX=bigW-showW}else{mX=vX * zoomX;}
  if (vY > smallH-viewH) {vY=smallH-viewH;mY=bigH-showH}else{mY=vY * zoomY;}
  nview.style.left=vX;
  nview.style.top=vY;
  bpic.style.marginLeft = - mX; //刷新预览窗口
  bpic.style.marginTop = - mY;
 }
}
//得到view
function getview(o){
 var arr=o.getElementsByTagName("div");
 var n;
 for (n=0;n<arr.length;n++)
  if (arr[n].className="view") return arr[n];
}
//得到img
function getimg(o){
 var arr=o.getElementsByTagName("img");
 var n;
 for (n=0;n<arr.length;n++)
  if (arr[n].className="spic") return arr[n];
}
//-->
</script>
<style type="text/css">
<!--
*{padding:0;margin:0}
body{color:white;background:black;font:bold 12px/18px tahoma;color:white;}
#picshow{border:1px red solid;width:200;height:150;overflow:hidden;margin:0 auto}/*width,height随便定义,为了第一次显示时能看见loading*/
#bpic{display:none}
#loading{font:bold 22px/30px tahoma;color:white;}
#loading img{vertical-align:middle;position:relative}
#loading .text{font:bold 12px/20px tahoma;color:white;}
.picbox{border:1px green dashed;overflow:hidden;float:left;width:0;height:0;text-align:left}/*注意:overflow:hidden;text-align:left不可更改,如果在IE的表格中定位会出问题*/
.spic{position:relative;}/*position:relative不可更改*/
.view{border:1px silver solid;z-index:100;font-size:1px;position:relative;visibility:hidden;display:none}/*position:relative;visibility:hidden;display:none不可更改*/
td{text-align:center;height:60px;font-size:30px;margin:0 auto}
//-->
</style>
</head>
<body>
Some text here...<br>ok.| 您需要做的仅仅是加入picshow块和picbox块,设置必要参数,剩下的就让JS去做吧! (移到小图上看更多说明)
<table cellpadding="0" cellspacing="0" border="2" width="100%">
<tr>
 <td>1</td>
 <td>2</td>
 <td>3</td>
</tr>
<tr>
 <td width="520" align="center">
<div id="picshow">
 <img id="bpic" onload="loaddone(tempo)"/>
 <div id="loading">
  <img src="http://www.jz123.cn/myjs/loading.gif" border="0"/> Loading
  <div class="text">Please wait...<br><br><br></div>
 </div>
</div>
 </td>
 <td>
<div class="picbox" show="show"><!--设置show显示默认图片-->
 <div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
 <img class="spic" lowsrc="http://www.jz123.cn/myjs/b1.jpg" src="http://www.jz123.cn/myjs/s1.jpg" onmousemove="move(event,this,0)" dLeft="700" dTop="300" title="设置标签属性show='show'显示默认图片,设置dLeft,dTop定义默认偏移量"/><!--src:小图,lowsrc:大图,showW/showH:可设置预览窗大小-->
</div>
<div class="picbox">
 <div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
 <img class="spic" lowsrc="http://www.jz123.cn/myjs/b2.jpg" src="http://www.jz123.cn/myjs/s2.jpg" onmousemove="move(event,this,0)" showW="200" showH="200" title="可自定义预览图大小"/>
</div>
<div class="picbox">
 <div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
 <img class="spic" lowsrc="http://www.jz123.cn/myjs/b4.jpg" src="http://www.jz123.cn/myjs/s4.jpg" width="302" onmousemove="move(event,this,0)" title="小图可以按比例放大"/><!--这里可以重新设置小图大小,尽量与大图比例保持一致-->
</div>
 </td>
 <td>In table
<div class="picbox">
 <div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
 <img class="spic" lowsrc="http://www.jz123.cn/myjs/b3.jpg" src="http://www.jz123.cn/myjs/s3.jpg" width="60" onmousemove="move(event,this,0)" title="也可以按比例缩小"/>
</div>
<div class="picbox">
 <div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
 <img class="spic" lowsrc="http://www.jz123.cn/myjs/b3.jpg" src="http://www.jz123.cn/myjs/s3.jpg" onmousemove="move(event,this,0)" showW="500" showH="200" title="可以嵌套在table中"/>
</div>
 </td>
</tr>
</table>
Out of table
<div class="picbox">
 <div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
 <img class="spic" lowsrc="http://www.jz123.cn/myjs/b2.jpg" src="http://www.jz123.cn/myjs/s2.jpg" onmousemove="move(event,this,0)" title="放在table外面也没有问题"/>
</div>
<div class="picbox">
 <div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
 <img class="spic" lowsrc="http://www.jz123.cn/myjs/s4.jpg" src="http://www.jz123.cn/myjs/s4.jpg" onmousemove="move(event,this,0)" showW="1000" showH="1000" title="showW='1000' showH='1000',如果指定预览图比原图大,则使用原图大小" />
</div>
<div class="picbox">
 <div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
 <img class="spic" lowsrc="http://www.jz123.cn/myjs/b5.jpg" src="http://www.jz123.cn/myjs/s5.jpg" onmousemove="move(event,this,0)" showW="160" showH="320" title="代码较上一版本健壮,能在IE,FF下稳定工作,基本支持OP,欢迎大家帮助测试!"/>
</div>
<div class="picbox">
 <div class="view" onmousemove="if (!isIE) move(event,this,1)"></div>
 <img class="spic" lowsrc="http://www.jz123.cn/myjs/b5.jpg" src="http://www.jz123.cn/myjs/s5.jpg" onmousemove="move(event,this,0)" width="500" height="112" title="即使没有按比例拉伸,也可以正常工作"/>
</div>
</body>
</html>

分享到：
| CSS 控制背景图片自动适应宽度和高度
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js 图片切换带预览小图片

    在JavaScript编程中，实现"js 图片切换带预览小图片"的功能，通常涉及到动态加载图片、事件处理、DOM操作以及可能的图像处理技术。这是一个常见的需求，例如在产品展示或者相册应用中，用户点击大图前可以先通过小...

    jQuery Lightbox图片放大预览代码是用户点击页面中的小图片时，将该图片的高清版本放大显示在页面的中间

    总的来说，jQuery Lightbox图片放大预览代码是通过结合jQuery的便利性和CSS的视觉设计，为用户提供了一种无缝且直观的图片查看方式，提升了网页的交互性和视觉吸引力。开发者可以根据需求对其进行定制，以满足特定...

    带小图片的轮换代码

    小图片通常用于预览或者缩略图，当用户点击时，可以展示全尺寸的大图。 3. **JavaScript**：JavaScript是实现图片轮换的核心语言，通过编程逻辑控制图片的显示和隐藏，实现动态切换。它可以设置轮换间隔、动画效果...

    jquery实现点击图片查看大图效果

    在网页设计中，提供图片预览功能是一种常见的用户体验优化手段，尤其当图片细节丰富时，用户可能希望在点击后查看更大、更清晰的版本。jQuery作为一个强大的JavaScript库，提供了丰富的功能来实现这样的交互效果。本...

    jQuery+css3图片墙代码，点击小图片可以查看大图，可以关闭大图.rar

    《jQuery与CSS3结合实现的图片墙及大图预览功能详解》 在网页设计中，图片墙是一种常见的展示方式，它可以将多张图片以美观、有序的方式排列，供用户浏览。而通过添加交互功能，如点击小图查看大图并能关闭大图，...

    jQuery超实用图片放大预览特效插件

    `zoom.js`就是这样一个专门针对jQuery库开发的插件，它能够实现平滑、自然的图片放大预览效果，让小图片轻松转换为大图预览，提升用户的浏览体验。 **1. jQuery库介绍** jQuery是一个快速、简洁的JavaScript库，它...

    jQuery响应式图片放大预览.zip

    "jQuery响应式图片放大预览"是一个利用jQuery库实现的高效、灵活的图片预览解决方案，专为适应不同设备和屏幕尺寸的响应式设计而设计。这款插件名为etalage，它为用户提供了鼠标悬停时的小图放大预览效果，使得用户...

    滚动下排小图片焦点图js特效

    4. 图片资源文件：实际展示的图片，可能有大图和小图两种尺寸，用于主展示区和预览导航条。 为了部署和使用这个特效，你需要将这些文件集成到你的网页项目中，通过引用JavaScript和CSS文件，然后在HTML中创建相应的...

    zoomjs是一款非常实用的jQuery图片放大预览特效插件

    在实际应用中，需要注意的是，ZoomJS默认会根据图片原始尺寸来放大，因此对于大尺寸图片，可能需要预先处理，避免加载过慢或消耗过多资源。此外，为了保持页面性能，建议只对需要预览的图片使用此插件，避免不必要的...

    Jquery实现的仿淘宝查看商品图片变大变清晰的功能

    "Jquery实现的仿淘宝查看商品图片变大变清晰的功能"就是一种提升用户体验的技术实践，它使得用户在浏览商品时可以方便地查看高清大图，从而更好地了解商品细节。下面将详细介绍这一功能的实现原理和步骤。 1. **...

    鼠标滑过图片出现大图片提示层效果js代码.rar

    总的来说，这个压缩包中的JavaScript代码实现了网页中常见的交互效果，通过鼠标滑过触发图片预览，提高了用户的浏览体验。对于想要学习JavaScript和网页交互效果的开发者来说，这是一个很好的实践案例。通过分析和...

    经典，好用的js点击小图出现大图效果

    JavaScript是实现动态网页的关键，它可以在用户与网页交互时执行代码，改变页面内容。 2. **图片元素操作**：在HTML中，图片元素`&lt;img&gt;`用于展示图片。你需要能够创建、修改和删除这些元素，以便在用户点击小图时...

    jQuery商品放大镜预览代码

    在"jQuery商品放大镜预览代码"中，jQuery的主要作用是处理用户的鼠标移动事件，实现实时放大镜效果。当用户将鼠标悬停在商品主图上时，一个放大镜窗口会出现在鼠标位置附近，展示图片的高清晰度区域，帮助用户更细致...

    html5瀑布流图片点击弹出大图片信息代码

    当用户点击小图片时，弹出大图和相关信息，这是通过JavaScript事件监听和DOM操作实现的。通常，我们会监听`click`事件，然后获取用户点击图片的详细信息，如图片URL和描述等。这些信息可以预先存储在`data-*`自定义...

    响应式图片放大预览特效代码

    2. **HTML结构**：设置合适的HTML结构，一般包括一个主图片容器和一个小图片容器，小图片容器中的每个图片代表大图的一个预览。 3. **初始化插件**：在页面加载完成后，使用JavaScript调用`etalage()`函数来初始化...

    JS实现缩略图竖向幻灯片代码

    大图容器通常包含一个图片元素，而缩略图列表则由多个表示每张大图的小图片组成。 2. **CSS样式**：通过CSS来布局这些元素，确保大图和缩略图的位置正确，以及缩略图列表可以滚动。可以使用`overflow-y: scroll`来...

    纯JS实现的批量图片预览加载功能

    实现批量图片预览加载的过程中，我们还需要考虑一些额外的问题，例如错误处理、图片尺寸适应、加载进度提示等。在实际项目中，可能需要使用更高级的技术，如Intersection Observer API来更准确地检测元素是否在视口...

    js实现的图片放大镜效果

    7. **优化性能**：在处理大量图片或大图片时，为了提高性能，可以考虑使用Canvas元素代替预览区域的小图片。通过在Canvas上绘制原始图片的缩放部分，可以避免频繁地改变背景位置。 总的来说，使用JQuery实现图片...

    实现图片的放大缩小

    最后，如果提供的压缩包"ImagePreview"包含了源代码或工具，那么它可能是一个用于预览图片并支持缩放功能的应用或库。学习和研究这个资源可以加深对图片处理的理解，同时为自己的项目提供参考。

    纯CSS实现带上下滚动和缩略预览图的相册效果(无js).zip

    3. **图片缩略预览**：CSS3的`:hover`伪类可以用来实现鼠标悬停时的特殊效果。在这里，我们可以为每个图片元素添加`:hover`样式，当鼠标悬停在图片上时，显示该图片的缩略预览图。这可以通过改变图片的`opacity`、`...

Magicbox
Global site tag (gtag.js) - Google Analytics