首页 > 安全资讯 >

JavaScript+CSS技术实现能覆盖SELECT的图片放大(放大镜)示例代码

12-03-09

代码简介:JavaScript图片放大技术(放大镜)示例代码,一个比较热的话题,如何用最简单、最兼容的方法写出图片放大技术,代码中的大量注释有助于我们对Js的图片放大技术做一个更深层次的了解。许多商城都用了放...

 
代码简介:
  JavaScript图片放大技术(放大镜)示例代码,一个比较热的话题,如何用最简单、最兼容的方法写出图片放大技术,代码中的大量注释有助于我们对Js的图片放大技术做一个更深层次的了解。许多商城都用了放大镜,这里给大家一个实例。
  代码内容:
    View Code
  <!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>【荐】JavaScript+CSS技术实现能覆盖SELECT的图片放大(放大镜)示例代码- www.2cto.com </title>
  <style type="text/css">
  #magnifier{
      width:342px;
      height:420px;
      position:absolute;
      top:100px;
      left:250px;
      font-size:0;
      border:1px solid #000;
  }
  #img{
      width:342px;
      height:420px;
  }
  #Browser{
      border:1px solid #000;
      z-index:100;
      position:absolute;
      background:#555;
  }
  #mag{
      border:1px solid #000;
      overflow:hidden;
      z-index:100;
  }
  </style>
  <script type="text/javascript">
  function getEventObject(W3CEvent) {//事件标准化函数
  return W3CEvent || window.event;
  }
  function getPointerPosition(e) {//兼容浏览器的鼠标x,y获得函数
      e = e || getEventObject(e);
      var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft ||
 
 document.body.scrollLeft));
      var y = e.pageY || (e.clientY + (document.documentElement.scrollTop ||
 
 document.body.scrollTop));
   
      return { 'x':x,'y':y };
  }
  function setOpacity(elem,level) {//兼容浏览器设置透明值
  if(elem.filters) {
          elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
      } else {
          elem.style.opacity = level;
      }
  }
  function css(elem,prop) {    //css设置函数,可以方便设置css值,并且兼容设置透明值
  for(var i in prop) {
          if(i == 'opacity') {
              setOpacity(elem,prop[i]);
          } else {
              elem.style[i] = prop[i];
          }
      }
      return elem;
  }
  var magnifier = {
      m : null,
   
      init:function(magni){
          var m = this.m = magni || {
              cont : null,    //装载原始图像的div
              img : null,    //放大的图像
              mag : null,    //放大框
              scale : 15//比例值,设置的值越大放大越大,但是这里有个问题就是如果不可
 
 以整除时,会产生些很小的白边,目前不知道如何解决
          }
       
          css(m.img,{ 
              'position' : 'absolute',
              'width' : (m.cont.clientWidth * m.scale) + 'px',             
 
 //原始图像的宽*比例值 
  'height' : (m.cont.clientHeight * m.scale) + 'px'             
 
 //原始图像的高*比例值
              })
       
          css(m.mag,{
              'display' : 'none',
              'width' : m.cont.clientWidth + 'px',    //m.cont为原始图像,与原始图像等宽
  'height' : m.cont.clientHeight + 'px',
              'position' : 'absolute',
              'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px',//放大框的位置
 
 为原始图像的右方远10px
              'top' : m.cont.offsetTop + 'px'
              })
       
          var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth -
 
 m.cont.getElementsByTagName('div')[0].clientWidth;        //获取border的宽
       
          css(m.cont.getElementsByTagName('div')[0],{         
 
 //m.cont.getElementsByTagName('div')[0]为浏览框
  'display' : 'none',                             
 
 //开始设置为不可见
  'width' : m.cont.clientWidth / m.scale - borderWid + 'px',         
 
 //原始图片的宽/比例值- border的宽度
  'height' : m.cont.clientHeight / m.scale - borderWid + 'px',//原始图片的高
 
 /比例值- border的宽度
  'opacity' : 0.5//设置透明度
              })
       
          m.img.src = m.cont.getElementsByTagName('img')[0].src;//让原始图像的src值给予放大
 
 图像
          m.cont.style.cursor = 'crosshair';
       
          m.cont.onmouseover = magnifier.start;
       
      },
   
      start:function(e){
       
          if(document.all){//只在IE下执行,主要避免IE6的select无法覆盖
              magnifier.createIframe(magnifier.m.img);
          }
       
          this.onmousemove = magnifier.move;//this指向m.cont
  this.onmouseout = magnifier.end;
      },
   
      move:function(e){
          var pos = getPointerPosition(e);        //事件标准化
       
          this.getElementsByTagName('div')[0].style.display = '';
       
          css(this.getElementsByTagName('div')[0],{
              'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt
 
 (this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight -
 
 this.getElementsByTagName('div')[0].offsetHeight) + 'px',
              'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt
 
 (this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth -
 
 this.getElementsByTagName('div')[0].offsetWidth) + 'px'//left=鼠标x -
 
 this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
              })
       
          magnifier.m.mag.style.display = '';
       
          css(magnifier.m.img,{
              'top' : - (parseInt(this.getElementsByTagName('div')[0].style.top) *
 
 magnifier.m.scale) + 'px',
              'left' : - (parseInt(this.getElementsByTagName('div')[0].style.left) *
 
 magnifier.m.scale) + 'px'
              })
       
      },
   
      end:function(e){
          this.getElementsByTagName('div')[0].style.display = 'none';
          magnifier.removeIframe(magnifier.m.img);        //销毁iframe
       
          magnifier.m.mag.style.display = 'none';
      },
   
      createIframe:function(elem){
          var layer = document.createElement('iframe');
          layer.tabIndex = '-1';
          layer.src = 'javascript:false;';
          elem.parentNode.appendChild(layer);
       
          layer.style.width = elem.offsetWidth + 'px';
          layer.style.height = elem.offsetHeight + 'px';
      },
   
      removeIframe:function(elem){
          var layers = elem.parentNode.getElementsByTagName('iframe');
          while(layers.length >0){
              layers[0].parentNode.removeChild(layers[0]);
          }
      }
  }
  window.onload = function(){
      magnifier.init({
                     cont : document.getElementById('magnifier'),
                     img : document.getElementById('magnifierImg'),
                     mag : document.getElementById('mag'),
                     scale : 3
                     });
  }
  </script>
  </head>
  <body>
  <div id="magnifier">
  <img src=http://up.2cto.com/2012/0309/20120309095951790.jpg" id="img" />
  <div id="Browser"></div>
  </div>
  <div id="mag"><img id="magnifierImg" /></div>
  <select style="position:absolute;top:200px;left:650px;width:100px;">
  <option>select测试</option>
  <option>是否能覆盖</option>
  </select>
  </body>
  </html>
  <br />
  <p><a href="http://www.2cto.com ">网页代码站</a> - 最专业的网页代码下载网站- 致力为中国站长提供有
 
 质量的网页代码!</p>
 
 
  代码来自:http://www.2cto.com/kf/201203/122441.html
 
  摘自  网页代码站

 

 

相关文章
最新文章
热点推荐