javascript 图片放大效果函数_图象特效-js-Tutorial-php.cn

Inhaltsverzeichnis

演示示例

Heim

Web-Frontend

js-Tutorial

javascript 图片放大效果函数_图象特效

May 16, 2016 pm 06:41 PM

javascript 图片放大

<div class="test" id="div1"> 
<h3 id="演示示例">演示示例</h3> 
<dl> 
<dt>1.图片和放大使用不同的图片（大小图片要比例相同）
也可以指定放大倍数（相对于小图片计算） <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">Nach dem Login kopieren</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.使用同一图片
给小图片设定宽或高，这里指定了:style="height:300px;" ，(偷懒模式，^o^,后面几个也是这样） <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">Nach dem Login kopieren</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.放大图片显示到指定的容器中 <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">Nach dem Login kopieren</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>图片预览： 
<div id="imgshow" style="WIDTH: 534px; HEIGHT: 400px"></div> 
</dd>
</dd>
<dt>4.显示大图的div以指定倍数 <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">Nach dem Login kopieren</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">点击下载js源码 </a>
PS:为了避免ff下的出问题（在ff下如果网页加载实在太慢，可能无法获取图片大小）最好将代码放在onload中执行
update: 2009-11-15 21:40,感谢danica7773，按其建议加上 自定义显示层的样式，显示和隐藏的事件 
<script src="http://files.jb51.net/imgby/imageZoom.js" type="text/javascript"></script>

</script> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

imageZoom.js

复制代码代码如下:

/* 
*Author:sohighthesky 
*Date:2009-11-14 
*/ 
/* 
*img 指定要放大的图片或者其id 
*options:参见代码中setOptions中的注释 
*/ 
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){//取元素坐标 
        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,//默认为不放大（显示图片的原来大小） 
         bigImg:null,//指定放大的图片路径（要跟小图成比例才好） 
         viewer:null, //指定显示的位置(可以为一个div或者其id) 
         viewerCla:"",//预览的div的类样式 
         viewerMul:1,//指定显示div的放大倍数，默认为原大小,设置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"; 
            d.body.appendChild(this.viewer); 
        }         
        this.viewimg=d.createElement("img"); 
        this.viewimg.style.cssText="position:relative;left:-33%;top:-33%;"; 
        this.viewimg.src=this.options.bigImg; 
        if(this.options.mul) {//设置放大倍数 
            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); 
    } 
};

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn