js 图片放大镜效果代码

时间：2022-07-02 14:50:22 编辑：袖梨来源：一聚教程网

method="post" name="delpost" >

提示：您可以先修改部分代码再运行

#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></p>
<div style="border-right: #c0c0c0 1px solid; border-top: #c0c0c0 1px solid; left: 400px; border-left: #c0c0c0 1px solid; border-bottom: #c0c0c0 1px solid; position: absolute"></div>
<script>
    var zoom = function(o){
        var d = document,db=document.body,timgs=d.getElementsByTagName('img'),ie = !+'1',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  alt="js 图片放大镜效果代码"  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,t);
                            };
                            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>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js 图片放大镜效果代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程