今天继续我们那项目,今天收获了点新知识,写下来和大家分享一下: 图片的放大: <script type="text/javascript"> function getEventObject(W3CEvent) { //¼ return W3CEvent || window.event; } function getPointerPosition(e) { //x,yú e = e || getEventObject(e); var x = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var y = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); return { 'x':x,'y':y }; } function setOpacity(elem,level) { //ֵ if(elem.filters) { elem.style.filter = 'alpha(opacity=' + level * 100 + ')'; } else { elem.style.opacity = level; } } function css(elem,prop) { //cssú,Էcssֵ,Ҽֵ for(var i in prop) { if(i == 'opacity') { setOpacity(elem,prop[i]); } else { elem.style[i] = prop[i]; } } return elem; } var magnifier = { m : null, init:function(magni){ var m = this.m = magni || { cont : null, //װԭʼͼdiv img : null, //Ŵͼ mag : null, //Ŵ scale : 15 //ֵ,õֵԽŴԽ,иʱ,ЩСİױ,Ŀǰ֪ν } css(m.img,{ 'position' : 'absolute', 'width' : (m.cont.clientWidth * m.scale) + 'px', //ԭʼͼĿ*ֵ 'height' : (m.cont.clientHeight * m.scale) + 'px' //ԭʼͼĸ*ֵ }) css(m.mag,{ 'display' : 'none', 'width' : m.cont.clientWidth +90 + 'px', //m.contΪԭʼͼ,ԭʼͼȿ 'height' : m.cont.clientHeight + 'px', 'position' : 'absolute', 'left' : m.cont.offsetLeft + m.cont.offsetWidth + 10 + 'px', //ŴλΪԭʼͼҷԶ10px 'top' : m.cont.offsetTop + 'px' }) var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth; //ȡborderĿ css(m.cont.getElementsByTagName('div')[0],{ //m.cont.getElementsByTagName('div')[0]Ϊ 'display' : 'none', //ʼΪɼ 'width' : m.cont.clientWidth / m.scale - borderWid + 'px', //ԭʼͼƬĿ/ֵ – borderĿ 'height' : m.cont.clientHeight / m.scale - borderWid + 'px', //ԭʼͼƬĸ/ֵ - borderĿ 'opacity' : 0.5 // }) m.img.src = m.cont.getElementsByTagName('img')[0].src; //ԭʼͼsrcֵŴͼ m.cont.style.cursor = 'crosshair'; m.cont.onmouseover = magnifier.start; }, start:function(e){ if(document.all){ //ֻIEִ,ҪIE6select magnifier.createIframe(magnifier.m.img); } this.onmousemove = magnifier.move; //thisָm.cont this.onmouseout = magnifier.end; }, move:function(e){ var pos = getPointerPosition(e); //¼ this.getElementsByTagName('div')[0].style.display = ''; css(this.getElementsByTagName('div')[0],{ 'top' : Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2,0),this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) + 'px', 'left' : Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2,0),this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px' //left=x - this.offsetLeft - /2,Math.maxMath.min
用JS做图片的放大
最新推荐文章于 2022-06-28 17:30:08 发布