百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> js图片放大效果
分享文章到:

js图片放大效果

发布时间:01/15 来源: 浏览: 关键词:

window.addEventListener?
  window.addEventListener("load",initZoomImages,false):
  window.attachEvent("onload",initZoomImages);
function initZoomImages(){
  //////////
  //by mozart0, 2007.05.29
  //////////
  var mask=document.body.appendChild(document.createElement("img"));
  var timer=null;
  //////////
  with(mask.style){
    position="absolute";
    backgroundColor="rgb(198,228,255)";
    margin="0px";
    padding="0px";
    zIndex="999";
    }
  mask.onmouseout=function(){
    if(timer){
      clearTimeout(timer);
      timer=null;
      }
    setRect(this,[-100,-100,50,50]);
    };
  mask.onmouseout();
  //////////
  for(var i=0,m=document.images;i<m.length;i++){
    if(!/^zoom/.test(m[i].getAttribute("rel")))
      continue;
    m[i].onmouseover=function(){
      var scale=this.getAttribute("rel").split("#");
      scale=scale.length>1?parseFloat(scale[1]):2;
      zoomMask(this,scale,this.getAttribute("urn"));
      };
    }
  //////////
  function zoomMask(ele,scale,url){
    var ra=getRect(ele),rb=zoomRect(ra,scale);
    var d=(rb[3]/ra[3]-1)/10,p=0;
    mask.src=url||ele.src;
    mask.onmouseout();
    (function(){
      if(++p<10){
        setRect(mask,zoomRect(ra,1+p*d));
        timer=setTimeout(arguments.callee,15);
        }
      else{
        setRect(mask,rb);
        timer=null;
        }
      })();
    }
  function zoomRect(rect,scale){
    var r=rect.slice(0,4);
    r[0]+=r[2]*(1-scale)*0.5;
    r[1]+=r[3]*(1-scale)*0.5;
    r[2]*=scale;
    r[3]*=scale;
    return r;
    }
  //////////
  var _firefox=navigator.userAgent.indexOf("Firefox")>=0;
  var _opera=navigator.userAgent.indexOf("Opera")>=0;
  var _ie=!_firefox&&!_opera;
  //////////
  function getRect(obj){
    var left=0,top=0;
    var width=obj.offsetWidth,height=obj.offsetHeight;
    var op=obj,st;
    var abs=false;
    if(_firefox)
      while((op=op.parentNode).tagName!="HTML"){
        var st=getComputedStyle(op,null);
        if(st.MozBoxSizing!="border-box"){
          left+=parseInt(st.borderLeftWidth);
          top+=parseInt(st.borderTopWidth);
          }
        }
    while(true){
      left+=obj.offsetLeft;
      top+=obj.offsetTop;
      if(!(op=obj.offsetParent))
        break;
      if(_ie){
        left+=op.clientLeft;
        top+=op.clientTop;
        if(!abs&&obj.currentStyle.position=="absolute")
          abs=true;
        }
      obj=op;
      }
    if(_ie){
      if(!document.documentElement.clientWidth){
        var t=document.body.currentStyle;
        var lx=parseInt(t.borderLeftWidth);
        var tx=parseInt(t.borderTopWidth);
        left-=isNaN(lx)?2:lx;
        top-=isNaN(tx)?2:tx;
        }
      else if(abs){
        left-=2;
        top-=2;
        }
      }
    return [left,top,width,height];
    }
  function setRect(obj,rect){
    with(obj.style){
      left=Math.round(rect[0])+"px";
      top=Math.round(rect[1])+"px";
      width=Math.round(rect[2])+"px";
      height=Math.round(rect[3])+"px";
      }
    }
  }// JavaScript Document

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有10人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板