javascript 图片放大效果函数_图象特效-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:41 PM

javascript图片放大

<div class="test" id="div1"> 
<h3 id="演示示例">演示示例</h3> 
<dl> 
<dt>1.图片和放大使用不同的图片（大小图片要比例相同）
也可以指定放大倍数（相对于小图片计算） <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> 
</dt>
<dd>
<img src="/static/imghwm/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^,后面几个也是这样） <pre class="brush:php;toolbar:false">new imageZoom("dd2",{//第一个参数指定一个图片或者其id（也可以为图片的容器或者id,容器中第一个子元素要为图片） 
//mul:3 
}); 
</pre> 
</dt>
<dd id="dd2">
<img src="/static/imghwm/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.放大图片显示到指定的容器中 <pre class="brush:php;toolbar:false">new imageZoom("img3",{ 
viewer:"imgshow"//指定要显示的div或者其id 
}) 
</pre> 
</dt>
<dd>
<img src="/static/imghwm/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以指定倍数 <pre class="brush:php;toolbar:false">new imageZoom("img4",{ 
mul:5,//放大5倍 
viewerCla:"cla",//指定显示层的样式 
viewerMul:1.2//展示层以小图片的1.2倍大小 
}); 
</pre> 
</dt>
<dd>
<img src="/static/imghwm/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); 
    } 
};

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

See all articles