位置：首页>> 网络编程>> JavaScript>> JavaScript图片放大镜效果

JavaScript图片放大镜效果

作者：campaign　来源：51js　发布时间：2009-10-19 22:15:00　

标签：图片,放大镜,JavaScript,特效

手痒痒系列之简单的放大镜

写了个放大镜功能，可以设置显示的宽高width,height

显示的位置，float ‘left’ 'right'

距离原图的偏移量

<!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=iso-8859-1" /><title>图片放大镜效果</title> <style>#zoomdiv { position: absolute; background: #ffffff; border:1px solid #CCCCCC; display:none; text-align: center; overflow: hidden; }#zoomup{position:absolute;background:#c0c0c0;display:none;filter:alpha(opacity=50);opacity:.5;cursor:move;}.zoom{ position:relative; } </style></head><body><div style="position:absolute;border:1px solid #c0c0c0;left:400px;"><img src="https://img.aspxhome.com/file/UploadPic/200910/19/shoe2_small-14.jpg" class="zoom" big="/file/UploadPic/200910/19/shoe2_big-80.jpg" /></div></body></html><script> var zoom = function(o){ var d = document,db=document.body,timgs=d.getElementsByTagName('img'),ie = !+'\v1',isStrict = d.compatMode == "CSS1Compat",opt = {width:200,height:200,offset:20,float:'rigth', minWidth:100},div = d.createElement('div'),divup = d.createElement('div'),getXY = function(el){var r={t:0,l:0},ua = navigator.userAgent.toLowerCase(),add = function(t,l){r.l+=l,r.t+=t},p = el;if(el&&el!=db){if(el.getBoundingClientRect){var b = el.getBoundingClientRect();add(b.top + Math.max(d.body.scrollTop,d.documentElement.scrollTop),b.left+Math.max(d.body.scrollLeft,d.documentElement.scrollLeft));isStrict?add(-d.documentElement.clientTop,-d.documentElement.clientLeft):add(-1,-1)}else{var dv = d.defaultView;while(p){add(p.offsetTop,p.offsetLeft);p = p.offsetParent;}p = el.parentNode;while (p && p != db) {add(-p.scrollTop,-p.scrollLeft);p = p.parentNode;}}}return r;},extend = function(t,s){for(var p in s){t[p] = s[p];};};div.id='zoomdiv',divup.id = 'zoomup';div.innerHTML = '<img id="bigimg" src="" />';db.appendChild(div);extend(opt,o);function leave(){div.style.display = divup.style.display = 'none';db.onmousemove = null;};for(var i=0,ci;ci=timgs[i++];){if(ci.className=='zoom'){ci.onmouseover = function(e){this.parentNode.appendChild(divup);var bimg=d.getElementById('bigimg'),bwidth,bheight,sx,sy,width = this.offsetWidth,height = this.height,top=getXY(this).t,left = getXY(this).l,tWidth,tLeft,sWidth;bimg.onload = function(){ div.style.display = 'block'; bwidth = bimg.width,bheight = bimg.height,sx = bwidth/width,sy = bheight/height; tLeft = opt.float=='rigth'?opt.offset+width+left:left-opt.offset-width*opt.width*sx, sWidth = window.innerWidth||(isStrict?d.documentElement.clientWidth:db.clientWidth); if(tLeft+opt.width+5>sWidth){ tWidth = sWidth - 5 - tLeft; tWidth<opt.minWidth&&(tLeft = left-opt.offset-opt.width,tWidth=0); }; extend(div.style,{left:tLeft +'px',top:top+'px',width:(tWidth||opt.width)+'px',height:opt.height+'px'});extend(divup.style,{width:(tWidth||opt.width)/sx+'px',height:opt.height/sy+'px', display:'block'})db.onmousemove = function(e){var e = e || event,x=e.pageX||(e.clientX+(d.documentElement.scrollLeft||db.scrollLeft)),y=e.pageY||(e.clientY+(d.documentElement.scrollTop||db.scrollTop)),scrolly = y - divup.offsetHeight/2 - top,scrollx = x - divup.offsetWidth/2 - left;scrolly = y - divup.offsetHeight/2 < top ? 0 : y + divup.offsetHeight/2>height+top ? height - divup.offsetHeight : scrolly;scrollx = x - divup.offsetWidth/2 < left ? 0 : x + divup.offsetWidth/2>width+left ? width - divup.offsetWidth : scrollx;div.scrollTop = scrolly*sy;div.scrollLeft = scrollx*sx;extend(divup.style,{top:scrolly+'px',left:scrollx+'px'});}} bimg.src = this.getAttribute('big');};ci.parentNode[ie?'onmouseleave':'onmouseout'] = ie?leave:function(e){!(this===e.relatedTarget||(this.contains?this.contains(e.relatedTarget):this.compareDocumentPosition(e.relatedTarget)==20))&&leave();}}}; }zoom({width:300,height:300});</script>

修正了在ff/chrome下第一次触发时，没效果，要再次触发的问题。

添加了根据页面的宽度自动调整显示的宽度，如果算出的最大可显示的宽度小于minWidth(默认是100）自动在左边显示。

测试可调整页面右边的边变大变小页面，在显示时效果不同。

支持
ie 6-8
ff3.5 -3.6
chrome

修正图片加载慢时的问题,支持多个图放大

<!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=gbk" /> <title>放大镜</title> <style>.zoomdiv{position: absolute;background: #ffffff;border:1px solid #CCCCCC;display:none;text-align: center; overflow: hidden; }.zoomup{background:#c0c0c0;display:none;filter:alpha(opacity=50);opacity:.5;cursor:move;position:absolute;top:0;left:0;} </style></head><body><div style="position:absolute;border:1px solid #c0c0c0;left:50px;"><img src="https://img.aspxhome.com/file/UploadPic/20108/2/shoe2_small-69.jpg" id="small"/></div><div style="position:absolute;border:1px solid #c0c0c0;left:600px;"><img src="https://img.aspxhome.com/file/UploadPic/20108/2/small-84.jpg" id="small1"/></div></body></html><script> function zoom(o){var d = document,db = document.body,dd = d.documentElement,ie = !+'\v1',div,divup,img = d.getElementById(o.id),loaded=0,timer, imgTL=getTL(img),top=imgTL.t,left = imgTL.l,sx,sy,opt = {width:200,height:200,offset:20};//创建元素function creElm(o,pN,t){var tmp = d.createElement(t||'div');for(var p in o){tmp[p] = o[p];}return pN?pN.appendChild(tmp):db.appendChild(tmp);};//得带元素偏移量function getTL(el){var b = el.getBoundingClientRect();//html4.01解析用dbreturn {'l': b.left + dd.scrollLeft - dd.clientLeft,'t': b.top + dd.scrollTop - dd.clientTop}};function extend(t,s){for(var p in s){t[p] = s[p];};};//离开时清掉function leave(){//清理mouseover上的时间戳clearTimeout(timer);div.style.display = divup.style.display = 'none';ie?db.detachEvent('onmousemove',move):db.removeEventListener('mousemove',move,false)};function move(e){var e = e || event,x=e.pageX||e.clientX+dd.scrollLeft,y=e.pageY||e.clientY+dd.scrollTop,scrolly = y - divup.offsetHeight/2 - top,scrollx = x - divup.offsetWidth/2 - left;scrolly = y - divup.offsetHeight/2 < top ? 0 : y + divup.offsetHeight/2>img.height+top ? img.height - divup.offsetHeight : scrolly;scrollx = x - divup.offsetWidth/2 < left ? 0 : x + divup.offsetWidth/2>img.width+left ? img.width - divup.offsetWidth : scrollx;div.scrollTop = scrolly*sy;div.scrollLeft = scrollx*sx;extend(divup.style,{top:scrolly+'px',left:scrollx+'px'});}if(img){extend(opt,o);//创建大图的容器div = creElm({className:'zoomdiv'});//创建在小图上的浮层divup = creElm({className:'zoomup'},img.parentNode);creElm({onload:function(){//ie下隐藏时width/height看不到问题div.style.display = 'block'var bwidth = this.width,bheight = this.height;//大图和小图的比例sx = bwidth/img.width,sy = bheight/img.height;extend(divup.style,{width:opt.width/sx+'px',height:opt.height/sy+'px'})extend(div.style,{left:(!opt.float?opt.offset+img.width+left:left-opt.offset-opt.width) +'px',top:top+'px',width:opt.width+'px',height:opt.height+'px',display:'none'});loaded = 1;},src:opt.bigUrl},div,'img');img.onmouseover = function(){if(loaded){div.style.display = divup.style.display = 'block';ie?db.attachEvent('onmousemove',move):db.addEventListener('mousemove',move,false);}else{timer = setTimeout(arguments.callee,100);}};img.parentNode[ie?'onmouseleave':'onmouseout'] = ie?leave:function(e){!(this===e.relatedTarget||(this.contains?this.contains(e.relatedTarget):this.compareDocumentPosition(e.relatedTarget)==20))&&leave();}} } /* width 大图的宽可选默认200 height 大图的高可选默认200 bigUrl 大图的url 必须的 id 小图的id 必须的 float 左边还是右边显示可选默认的是右边 'right' or 'left' offset 大图距离小图的偏移量可选默认20 */zoom({id:'small',bigUrl:'/file/UploadPic/20108/2/shoe2_big-99.jpg',offset:50});zoom({id:'small1',bigUrl:'/file/UploadPic/20108/2/big-28.jpg',float:'left',width:300,height:300});</script>

投稿

JavaScript图片放大镜效果

猜你喜欢