javascript实现查看html网页放大图片功能

来源：互联网发布：hiteach软件在哪买编辑：程序博客网时间：2024/05/15 23:53

本程序实现了放大查看网页中的图片的功能，效果如下：
这里写图片描述
作用：可用于模仿淘宝，查看物品细节的功能，也可用于嵌入网页的视频的放大查看。

测试方法：直接拷贝本程序到新建的html文件，建好后，在同一文件夹下，新建文件夹命名为“image”，再放入一张图片，然后修改代码中两处图片名，即可使用。

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">/*左边小图的样式*/.small_pic {  top: 50px; left:100px; width: 420px;  height: 400px;  background: #eee;  position: absolute;  }/*鼠标跟随浮动方块的样式*/.float_layer {  width: 50px;  height: 50px;  border: 1px solid #000;  background: #fff;  filter: alpha(opacity: 30);  opacity: 0.3;  position: absolute;  margin-top: 50;  margin-left: 50;  display:none;  }/*标记要放大的区域的位置*/.mark {    width:100%;    height:100%;    position:absolute;    z-index:2;    left:1px;    top:1px;    background:red;        filter:alpha(opacity:0);     opacity:0; }/*右边被放大的图片的区域，其中overflow为重点*/.big_pic {  position: absolute;  margin-top: 50px;  margin-left: 600px;  width:450px;  height:400px;  overflow:hidden;  border:2px solid #CCC;   } /*被放大的内容*/.big_pic img {  position:absolute;  top: -30px;  left: -80px;  }.pforimg{  width:100%;  height:100%;}</style><script type="text/javascript"> /*获得父元素下相应名称的子元素*/function getByClass(oParent, sClass){ var aEle=oParent.getElementsByTagName('*'); var aTmp=[]; var i=0; for(i=0;i<aEle.length;i++) {      if(aEle[i].className==sClass)      {           aTmp.push(aEle[i]);      } } return aTmp;}window.onload=function (){        /*按类型获取每个要控制的对象*/     var oDiv=document.getElementById('div1');       var oMark=getByClass(oDiv, 'mark')[0];      var oFloat=getByClass(oDiv, 'float_layer')[0];      var oBig=getByClass(oDiv, 'big_pic')[0];        var oSmall=getByClass(oDiv, 'small_pic')[0];        var oImg=oBig.getElementsByTagName('img')[0];/*当鼠标移动到小图上面时，浮动块显示，大图显示*/    oMark.onmouseover=function () {      oFloat.style.display='block';      oBig.style.display='block'; };/*当鼠标移出小图，浮动块消失，大图消失*/ oMark.onmouseout=function () {      oFloat.style.display='none';      oBig.style.display='none';  /*删除这句大图可一直显示*/ }; /*鼠标在小图上移动的函数，都是计算块的边界的运算*/ oMark.onmousemove=function (ev) {      /*鼠标的位置（event.clientX、event.clientY）*/      var oEvent=ev||event;      /*offsetHeight获取元素的高度,其余offset**开头的同理*/      var l=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;      var t=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;      if(l<0)      {            l=0;      }      else if(l>oMark.offsetWidth-oFloat.offsetWidth)      {            l=oMark.offsetWidth-oFloat.offsetWidth;      }      if(t<0)      {            t=0;      }      else if(t>oMark.offsetHeight-oFloat.offsetHeight)      {            t=oMark.offsetHeight-oFloat.offsetHeight;      }     /*获得的l和t用于更新浮动块当前位置*/     oFloat.style.left=l+'px';     oFloat.style.top=t+'px';    var percentX=l/(oMark.offsetWidth-oFloat.offsetWidth);    var percentY=t/(oMark.offsetHeight-oFloat.offsetHeight);     oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';     oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px'; };};</script></head><body>  <div id="div1" >      <div class="small_pic">        <span class="mark"></span>        <span class="float_layer"></span>        <!--在img的src里改为你自己的图片的路径-->        <img class="pforimg" src="image\20121129211433_BMfnw.jpeg"/>                </div>    <div class="big_pic">        <!--在这里的width，height可以调整放大倍数-->        <img src="image\20121129211433_BMfnw.jpeg"  width="2000" height="2000"/>                </div></div> </body></html>

0 0