<div class="codetitle"> <span><a style="CURSOR: pointer" data="21928" class="copybut" id="copybut21928" onclick="doCopy('code21928')"><u>コードをコピー</u></a></span> コードは次のとおりです:</div> <div class="codebody" id="code21928"> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <BR><html xmlns="http://www.w3.org/1999/xhtml"> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>JavaScript图片放大技术(放大镜)实现代码分享 - www.jb51.net</title> <br><style type="text/css"> <br>#magnifier{ <br> width:342px; <br> 高さ:420px; <br> 位置: 絶対; <br> トップ:100ピクセル; <br> 左:250px; <br> font-size:0; <br> border:1px ソリッド #000; <br>} <br>#img{ <br> width:342px; <br> 高さ:420px; <br>} <br>#Browser{ <br> border:1px Solid #000; <br> z-index:100; <br> 位置: 絶対; <br> 背景:#555; <br>} <br>#mag{ <br> border:1px Solid #000; <br> オーバーフロー:非表示; <br> z-index:100; <br>} <br></style> <br><script type="text/javascript"> <br>function getEventObject(W3CEvent) {// イベント标標準化関数数 <br> return W3CEvent ||ウィンドウ.イベント; <br>} <br>function getPointerPosition(e) {///兼容浏览器のネズミ标x,y获得関数数 <br> e = e || getEventObject(e); <br> var x = e.pageX || (e.clientX (document.documentElement.scrollLeft || document.body.scrollLeft)); <br> var y = e.pageY || (e.clientY (document.documentElement.scrollTop || document.body.scrollTop)); <br><br> return { 'x':x,'y':y }; <br>} <br>function setOpacity(elem,level) {//兼容浏览器设置透明值 <br> if(elem.filters) { <br> elem.style.filter = 'alpha(opacity=' level * 100 ')'; <br> } else { <br> elem.style.opacity = レベル; <br> } <br>} <br>function css(elem,prop) { //css设置関数数,可以方便设置css值,并および兼容设置透明值 <br> for(var i in prop) { <br> if(i == '不透明度') { <br> setOpacity(elem,prop[i]); <br> } else { <br> elem.style[i] = prop[i]; <br> } <br> } <br> 要素を返します。 <br>} <br>var magnifier = { <br> m : null, <br><br> init:function(magni){ <br> var m = this.m = magni || { <br> cont : null, //装填原始画像的div <br> img : null, //放大な画像 <br> mag : null, // 放大框 <br> scale : 15 // 比率、配置的值越大放出大越大,但是此里有个问题就是如果不可整除時,会生これら很小的白边,目前不知道如何解决 <br> } <br><br> css(m.img, { <br> 'position' : 'absolute', <br> 'width' : (m.cont.clientWidth * m.scale) 'px', //原始画像の宽* 比值 <br> 「高さ」: (m.cont.clientHeight * m.scale) 'px' //原始画像の高*比值 <br> }) <br><br> css(m.mag,{ <br> 'display' : 'none', <br> 'width' : m.cont.clientWidth 'px', //m.cont は元の画像です, 元の画像と同じ幅 <br> 'height' : m.cont.clientHeight 'px', <br> 'position' : 'absolute', <br> 'left' : m.cont.offsetLeft m.cont. offsetWidth 10 'px', //拡大ボックスの位置は元の画像の 10 ピクセル右です <br> 'top' : m.cont.offsetTop 'px'<br> }) <br><br> var borderWid = m.cont .getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth // 境界線の幅を取得 <br><br> css( m.cont.getElementsByTagName(' div')[0],{ //m.cont.getElementsByTagName('div')[0] はブラウジング ボックス<br> 番目' : m.cont.clientWidth / m.scale - borderWid 'px', アウト アウト』 s'' out together out together'' out'' through''''''''''''''''''''''ceisece togethercececece together's 「セル一緒にアウト、クリーンアウト、アウト、クリーンアウト、クリーンアウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト、アウト」 be-besss's--to be to trespasses to be t , // 元の画像の高さ - 境界線の幅 <br> 'Opacity': 0.5 // 透明度を設定 <br>}) <br> <br> m.img.src = m.cont.getelementsbytagname ('' '' ' img')[0].src;//元画像のsrc値を拡大画像に与える <br> m.cont. style.cursor = 'crosshair'; <br><br> m.cont.onmouseover = magnifier.start ; <br><br> }, <br><br> start:function(e){ <br><br> if(document.all){//主に IE6 の選択が上書きできないのを避けるために、IE でのみ実行されます。 <br> magnifier.createIframe(magnifier.m.img); <br><br> } <br><br> this.onmousemove = magnifier.move;//this は m.cont を指します <br> this.onmouseout = magnifier.end; <br> }, <br><br> move:function(e){ <br> var pos = getPointerPosition(e); //イベントの正規化<br><br> this.getElementsByTagName('div')[0] .style.display = ''; <br><br> css(' div')[0],{ <br> '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', <br> '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=mouse x - this.offsetLeft - ブラウジング ボックスの幅/2、Math.max および Math.min は、ブラウジング ボックスが画像を超えないようにします<br> }) <br><br> magnifier.m.mag.style.display = '' ; <br><br> css(magnifier.m.img,{ <br> 'top' : - (parseInt(this.getElementsByTagName ('div')[0].style.top) * magnifier.m.scale) 'px'、<br> 'left'： - （parseint（this.getelementsbytagname（ 'div'）[0] .style.left） * magnifier.m.scale） 'px' <br>>, <br><br> end:function(e){ <br> this.getElementsByTagName('div')[0].style.display = 'none'; <br> magnifier.removeIframe(magnifier.m.img); //销毁iframe <br><br> magnifier.m.mag.style.display = 'none'; <br> }, <br><br> createIframe:function(elem){ <br> varlayer = document.createElement('iframe'); <br> layer.tabIndex = '-1'; <br> layer.src = 'javascript:false;'; <br> elem.parentNode.appendChild(layer); <br><br> layer.style.width = elem.offsetWidth 'px'; <br> layer.style.height = elem.offsetHeight 'px'; <br> }, <br><br> removeIframe:function(elem){ <br> varlayers = elem.parentNode.getElementsByTagName('iframe'); <br> while(layers.length >0){ <br> Layer[0].parentNode.removeChild(layers[0]); <br> } <br> } <br>} <br>window.onload = function(){ <br> magnifier.init({ <br> cont : document.getElementById('magnifier'), <br>画像 : document.getElementById('magnifierImg'), <br> mag : document.getElementById('mag'), <br> スケール : 3 <br> }); <br>} <br></script> <br></head> <br> <br><div id="拡大鏡"> <br><img src="http://www.jb51.net/images/20091107/fangda.jpg" id="img" /> <br><div id="ブラウザ"></div> <br> </div> <br><div id="mag"><img id="magnifierImg" /></div> <br><select style="position:absolute;top:200px;left:650px;width:100px;"> <br><option>测试を選択</option> <br><option> をカバーできるかどうか</option> <br></select> <br></body> <br></html> <br><br>
