js放大镜效果

最新推荐文章于 2023-08-23 15:31:17 发布

LMAOhuaNL

最新推荐文章于 2023-08-23 15:31:17 发布

阅读量4.8k

点赞数

分类专栏： asp.Net css js 文章标签： function div opera 浏览器 float null

asp.Net 同时被 3 个专栏收录

75 篇文章 0 订阅

订阅专栏

28 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

   <style type="text/css">
        #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; width:300px;  vertical-align:bottom;/*处理IE bug*/} 


    </style>
    <script src="JS/ImageScrool.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            zoom({ width: 200, height: 200 });
        }
    </script>

</head>
<body>
<div>
<div style="position:relative;border:5px solid #FFF; float:left; margin-left:400px;">
     <img src="images/pr14.gif" class="zoom" big="images/pr14.gif" /> 
</div> 
</div>
</body>
</html>

//js

        //定义所有的变量，方法
        var zoom = function (o) {
            var d = document,
	db = document.body,
	timgs = d.getElementsByTagName('img'),
	opt = {
	    width: 200,
	    height: 200,
	    offset: 20,
	    float: 'right',
	    minWidth: 100
	},
   	div = d.createElement('div'),
   	divup = d.createElement('div'),
            //获取元素的定位,x,y
   	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) {
   	        //el.getBoundingClientRect,获得元素的左，上，右和下分别相对浏览器视窗的位置
   	        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));
   	            add(-d.documentElement.clientTop, -d.documentElement.clientLeft);
   	        } else {
   	            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;
   	},
            //重新设置div的宽高
   	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="" _mce_src="http://www.cnblogs.com/babyzone2004/admin/" />';
            db.appendChild(div);
            extend(opt, o);
            function leave(obj, e) {
                var e = e || event;
                /*alert(obj);
                alert(e.currentTarget);*/
                //火狐，opera专用，e.currentTarget是火狐，opera专用的属性
                if (e.currentTarget) {
                    //relatedTarget对于 mouseout 事件来说，该属性是离开目标时，鼠标指针进入的节点。
                    //e.relatedTarget != obj，当移入子元素的时候，会出现相等
                    if (e.relatedTarget != obj) {
                        if (obj != e.relatedTarget.parentNode) {
                            div.style.display = divup.style.display = 'none';
                            db.onmousemove = null;
                        }
                    }
                } else {//ie专用
                    if (e.toElement != obj) {
                        if (obj != e.toElement.parentNode) {
                            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.offsetHeight,
				top = getXY(this).t,
				left = getXY(this).l,
				tWidth, tLeft, sWidth;
                        //当鼠标移过的时候，开始载入大图
                        bimg.src = this.getAttribute('big');

                        if (!bimg.complete) {
                            bimg.onload = showBimg;
                        } else {
                            showBimg();
                        }
                        function showBimg() {
                            div.style.display = 'block';
                            bwidth = bimg.width,
					bheight = bimg.height,
       				sx = bwidth / width, sy = bheight / height;
                            tLeft = opt.float == 'right' ? opt.offset + width + left : left - opt.offset - opt.width,
                    sWidth = window.innerWidth || (d.documentElement.clientWidth);
                            //如果浏览器宽度不够，则自动适应显示div的宽度
                            if (tLeft + opt.width + 5 > sWidth) {
                                tWidth = sWidth - 5 - tLeft;
                                //此句式比较特殊
                                tWidth < opt.minWidth && (tLeft = left - opt.offset - opt.width, tWidth = 0);
                            };
                            //设置div,divup的宽高和位置
                            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,
                                //显示非IE的鼠标位置，然后是IE的
						x = e.pageX || (e.clientX + (d.documentElement.scrollLeft || db.scrollLeft)),
						y = e.pageY || (e.clientY + (d.documentElement.scrollTop || db.scrollTop)),
                                //X,Y相对于原始图片的位置
						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' });
                            }
                        };
                    };
                    ci.parentNode.onmouseout = function (event) { leave(this, event) };
                }
            };
        }

//效果图

LMAOhuaNL

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
js放大镜效果

#zoomdiv{position: absolute;background: #ffffff;border:1px solid #CCCCCC;display:none;text-align: center; overflow: hidden;} #zoomup{position:absolute; background:#c0c0c0;display:none;filter:
复制链接

扫一扫

专栏目录