JavaScript+CSS技術實現能覆蓋SELECT的圖片放大(放大鏡)示例代碼

 
代碼簡介:
  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.aiwalls.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,    //裝載原始圖像的p
              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('p')[0].offsetWidth –
 
 m.cont.getElementsByTagName('p')[0].clientWidth;        //獲取border的寬
       
          css(m.cont.getElementsByTagName('p')[0],{         
 
 //m.cont.getElementsByTagName('p')[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('p')[0].style.display = '';
       
          css(this.getElementsByTagName('p')[0],{
              'top' : Math.min(Math.max(pos.y – this.offsetTop – parseInt
 
 (this.getElementsByTagName('p')[0].style.height) / 2,0),this.clientHeight –
 
 this.getElementsByTagName('p')[0].offsetHeight) + 'px',
              'left' : Math.min(Math.max(pos.x – this.offsetLeft – parseInt
 
 (this.getElementsByTagName('p')[0].style.width) / 2,0),this.clientWidth –
 
 this.getElementsByTagName('p')[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('p')[0].style.top) *
 
 magnifier.m.scale) + 'px',
              'left' : – (parseInt(this.getElementsByTagName('p')[0].style.left) *
 
 magnifier.m.scale) + 'px'
              })
       
      },
   
      end:function(e){
          this.getElementsByTagName('p')[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>
  <p id="magnifier">
  <img src=/wp-content/images1/20180920/2012030909595179031.jpg" id="img" />
  <p id="Browser"></p>
  </p>
  <p id="mag"><img id="magnifierImg" /></p>
  <select style="position:absolute;top:200px;left:650px;width:100px;">
  <option>select測試</option>
  <option>是否能覆蓋</option>
  </select>
  </body>
  </html>
  <br />
  <p><a href=" ">網頁代碼站</a> – 最專業的網頁代碼下載網站- 致力為中國站長提供有
 
 質量的網頁代碼!</p>
 
 
  代碼來自:/kf/201203/122441.html
 
  摘自  網頁代碼站

 

 

發佈留言