Js图片放大镜代码（面向对象技术）

发布时间：2018-08-19 00:41:11 所属栏目：Asp教程来源：站长网

导读：一款 Java Script图片放大镜代码，基于面向对象的编程思想实现，本放大镜效果属于局部放大，放大的区域要比原图的选定区域还要大，如果效果不是你想要的，可根据你的需要，自己可以修改。示例： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional

　　一款JavaScript图片放大镜代码，基于面向对象的编程思想实现，本放大镜效果属于局部放大，放大的区域要比原图的选定区域还要大，如果效果不是你想要的，可根据你的需要，自己可以修改。

　　示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>·Å´ó¾µÐ§¹û</title> <style type="text/css"> body { margin:0px; padding:0px; } .box { width:434px; height:292px; margin:10px auto; } .left { width:202px; height:282px; float:left; padding:2px; position:relative; border:3px solid #ccc; } .left img { float:left; border:1px solid #7b7b7b; } .left .move { width:50px; height:50px; background:#666; opacity:0.3; top:3px; left:3px; position:absolute; z-index:1; display:none; filter: alpha(opacity: 30); border:1px solid #000; } .left .mask { width:100%; height:100%; opacity:0; top:0px; left:0px; position:absolute; z-index:2; background:#000; cursor:move; filter:alpha(opacity: 0); } .right { width:202px; height:282px; float:left; padding:2px; overflow:hidden; display:inline; position:relative; margin:0 0 0 10px; display:none; border:3px solid #ccc; } .right img { position:absolute; top:0px; left:0px; } </style> <script type="text/javascript"> //获取id function $(id){ return typeof id === "string" ? document.getElementById(id) : id; } //获取tagName function $$(oParent, elem){ return (oParent || document).getElementsByTagName(elem); } //获取className function $$$(oParent, sClass){ var aElem = $$(oParent, '*'); var aClass = []; var i = 0; for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]); return aClass; } //初始化对象 function magnifier(){ this.initialize.apply(this, arguments); } magnifier.prototype = { initialize : function(){ var _this = this; if($('box')){ this.oBox = $('box'); this.oLeft = $$$(this.oBox, 'left')[0]; this.oMove = $$$(this.oBox, 'move')[0]; this.oMask = $$$(this.oBox, 'mask')[0]; this.oLimg = $$(this.oLeft, 'img')[0]; this.oRight = $$$(this.oBox, 'right')[0]; this.oRimg = $$(this.oRight, 'img')[0]; this.oMask.onmouseover = function(){ _this.mouseover(); }; this.oMask.onmousemove = function(e){ _this.mousemove(e); }; this.oMask.onmouseout = function(){ _this.mouseout(); }; } }, mouseover : function(){ this.oMove.style.display = 'block'; this.oRight.style.display = 'block'; }, mousemove : function(e){ this.oEvent = e || event; this.left = (this.oEvent.clientX - this.oBox.offsetLeft) - this.oMove.offsetWidth / 2; this.top = (this.oEvent.clientY - this.oBox.offsetTop) - this.oMove.offsetHeight / 2; this.margin(); this.oMove.style.left = this.left + 'px'; this.oMove.style.top = this.top + 'px'; this.bigImg(); }, mouseout : function(){ this.oMove.style.display = 'none'; this.oRight.style.display = 'none'; }, margin : function(){ this.marightW = this.oMask.offsetWidth - this.oMove.offsetWidth; this.marightH = this.oMask.offsetHeight - this.oMove.offsetHeight; if(this.left < 3){ this.left = 3; }else if(this.left > this.marightW - 3){ this.left = this.marightW - 3; } if(this.top < 3){ this.top = 3; }else if(this.top > this.marightH - 3){ this.top = this.marightH - 3; } }, bigImg : function(){ this.bigW = this.oMask.offsetWidth - this.oMove.offsetWidth; this.bigH = this.oMask.offsetHeight - this.oMove.offsetHeight; this.bigX = this.left / (this.bigW); this.bigY = this.top / (this.bigH); this.oRimg.style.left = -this.bigX * (this.bigW) +'px' this.oRimg.style.top = -this.bigY * (this.bigH) +'px' } }; </script> <script type="text/javascript"> window.onload = function(){ new magnifier(); }; </script> </head> <body> <div class="box" id="box"> <div class="left"> <span class="move"></span> <span class="mask"></span> <img src="/uploads/allimg/1109/small.jpg" /> </div> <div class="right"><img src="/uploads/allimg/1109/big.jpg" /></div> </div> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：92站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

asp里如何循环输出26个	asp.net Ext grid 显示
浅谈ASP.NET的Postbac	Aspx/Asp.net 防注入程