search

Home  >  Article  >  Web Front-end  >  javascript image enlargement effect function_image special effects

javascript image enlargement effect function_image special effects

WBOY
WBOYOriginal
2016-05-16 18:41:331083browse

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]
imageZoom.js Copy code
The code is as follows:

/*
*Author:sohighthesky
*Date:2009-11-14
*/
/*
*img specifies the image to be enlarged or its id
*options: See the comments in setOptions in the code
*/
var imageZoom = function(img,options) {
this.img=this.g(img);
if(this .img.nodeName!="IMG") {
If(this.img && this.img.children[0].nodeName=="IMG")this.img=this.img.children[0];
else throw Error("Invalid argument [img] !");
}
this.setOptions(options);
this.init();
}
imageZoom.prototype= {
g:function(id) {return typeof(id)=="string"?document.getElementById(id):id;},
ae:function(el,type,call) {
if(el.addEventListener)el.addEventListener(type,call,false);
else el.attachEvent("on" type,call);
},
getPos:function(o){// Get element coordinates
var x = 0, y = 0;
do{x = o.offsetLeft; y = o.offsetTop;}
while(o=o.offsetParent);
return { 'x':x,'y':y};
},
setOptions:function(options) {
this.options={
mul:0,//The default is not to enlarge ( Display the original size of the image)
bigImg:null, //Specify the enlarged image path (it must be proportional to the small image)
viewer:null, //Specify the display position (can be a div or other id)
viewerCla: "", // Class style of the previewed div
viewerMul:1, // Specify the magnification of the displayed div, the default is the original size, this parameter is invalid when setting the viewer
onShow: function(){},
onHide:function(){}
};
for(var o in options) {this.options[o]=options[o];}
this. options.bigImg =this.options.bigImg ||this.img.src;
},
getSize:function(o) {
                    return {w:o.offsetWidth,h:o.offsetHeight};
},
createView:function() {
var _is=this.getSize(this.img);
var d=document;
if(this.options.viewer){
this.viewer=this.g(this.options.viewer);
this.viewer.style.overflow="hidden";
this.viewer.style.position="relative";
} else {
this.viewer=d.createElement("div");
this.viewer.className=this.options.viewerCla;
var pos=this.getPos(this.img);
This.viewer.style.cssText="display:none;overflow:hidden;position:absolute;top:" pos.y "px;left:" (pos.x _is.w 10) "px;height:" _is.h*this.options.viewerMul "px;width:" _is.w*this.options.viewerMul "px"; .viewimg=d.createElement("img");
this.viewimg.style.cssText="position:relative;left:-33%;top:-33%;";
this.viewimg.src =this.options.bigImg;
If(this.options.mul) {//Set the magnification factor
this.viewimg.style.width=_is.w*this.options.mul "px";
This.viewimg.style.height=_is.h*this.options.mul "px";
}
        this.viewer.appendChild(this.viewimg);
    },
    move:function(e) {
        if(!this.options.mul)
         this.options.mul=this.viewimg.offsetHeight/this.img.offsetHeight;
        var pos=this.getPos(this.img);
        var l=e.clientX-pos.x (document.documentElement.scrollLeft || document.body.scrollLeft);//鼠标位置相对于图片左上角的偏移
        var t=e.clientY-pos.y (document.documentElement.scrollTop || document.body.scrollTop);
        var zs=this.getSize(this.viewer);
        var pl=-l*this.options.mul zs.w/2;
        var pt=-t*this.options.mul zs.h/2;
        pl=pl>0?0:pl;
        pt=pt>0?0:pt;

var vs=this.getSize(this.viewimg);
pl=Math.max(pl,zs.w-vs.w);
pt=Math.max(pt,zs.h-vs.h);

        this.viewimg.style.left=pl "px";
        this.viewimg.style.top=pt "px";
    },
    init:function() {
     var o=this;
     var load=function(a) {//图片加载
     o.createView.call(o);
     o.img.setAttribute("alt","");
     o.ae(o.img,"mousemove",function(event){o.move.call(o,event);});
         if(!o.options.viewer) {
         o.ae(o.img,"mouseover",function(){o.options.onShow();o.viewer.style.display=""});
         o.ae(o.img,"mouseout",function(){o.options.onHide();o.viewer.style.display="none"});
         }
     };
     if(typeof(document.readyState)=="undefined" || window.opera) {
            var de=document.documentElement || document.body;
            var h=de.scrollHeight;
            var t=setInterval(function() {
                if(h==de.scrollHeight){
                    clearInterval(t);
                    load();                    
                } else h=de.scrollHeight;
            },500);
     } else if(document.readyState=="complete")
     load();
     else
     o.ae(window,"load",load);
    }
};
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：The solution to the Chinese garbled value passed in js url_javascript skillsNext article：The solution to the Chinese garbled value passed in js url_javascript skills

Related articles

See more