javascript image enlargement effect function_image special effects

<style type="text/css"> /*pre css reset*/ body,th,td { font-size:12px;font-family:Tahoma,Helvetica,Arial,'5b8b4f53','5FAE8F6F96C59ED1',sans-serif; } body,th,td,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p { margin:0;padding:0; } fieldset,img { border:none; } a {color:#3366CC; text-decoration:none;outline:none;} a:hover {color:#FF6600;text-decoration:underline;} /************************************************************/ .test { } .test h3{ margin:10px auto;} .test dt {line-height:25px;margin-top:5px;} .cla {border:solid 1px #09c;} </style> <div class="test" id="div1"> <h3 id="Demonstration-example">Demonstration example</h3> <dl> <dt>1. Use different images for pictures and zooming in (big and small pictures should have the same proportions) You can also specify the magnification factor (calculated relative to the small image) <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new imageZoom("img1",{ //mul:6,//指定放大的倍数 onShow:function() { document.title="show,you are moving on the image."; }, onHide:function() { document.title="you mouse move out the image"; }, bigImg:"../images/tong.jpg"//指定放大图片路径 }); </pre><div class="contentsignin">Copy after login</div></div> </dt> <dd> <img src="/static/imghw/default1.png" data-src="http://www.jb51.net/upload/2009-11/20091115231842561.jpg" class="lazy" id="img1" alt="彤"> </dd> <dt>2. Use the same picture Set the width or height of the small image. Here we specify: style="height:300px;" (lazy mode, ^o^, the same is true for the following ones) <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new imageZoom("dd2",{//第一个参数指定一个图片或者其id（也可以为图片的容器或者id,容器中第一个子元素要为图片） //mul:3 }); </pre><div class="contentsignin">Copy after login</div></div> </dt> <dd id="dd2"> <img src="/static/imghw/default1.png" data-src="http://www.jb51.net/upload/2009-11/20091115231842599.jpg" class="lazy" id="img2" style="max-width:90%" alt="avril"> <dd id="info"> </dd> </dd> <dt>3. Enlarge the image and display it in the specified container <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new imageZoom("img3",{ viewer:"imgshow"//指定要显示的div或者其id }) </pre><div class="contentsignin">Copy after login</div></div> </dt> <dd> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/demoimg/200911/o_wanx.jpg" class="lazy" id="img3" style="max-width:90%" alt="王心凌"> <dd>Picture preview: <div id="imgshow" style="WIDTH: 534px; HEIGHT: 400px"></div> </dd> </dd> <dt>4. Display the div of the large image to specify the multiple <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new imageZoom("img4",{ mul:5,//放大5倍 viewerCla:"cla",//指定显示层的样式 viewerMul:1.2//展示层以小图片的1.2倍大小 }); </pre><div class="contentsignin">Copy after login</div></div> </dt> <dd> <img src="/static/imghw/default1.png" data-src="http://www.jb51.net/upload/2009-11/20091115231842981.jpg" class="lazy" id="img4" style="max-width:90%" alt=""> </dd> </dl> <a href="http://files.jb51.net/imgby/imageZoom.js" target="_blank">Click to download js source code </a> PS: In order to avoid problems under ff (if the web page loads too slowly under ff, the image size may not be obtained) it is best to execute the code in onload. update: 2009-11-15 21:40, thanks to danica7773, according to his suggestion, add custom display layer style, show and hide events </div>
[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);
    }
};