图片局部放大--放大镜效果

最新推荐文章于 2023-06-08 17:08:54 发布

qichunren

最新推荐文章于 2023-06-08 17:08:54 发布

阅读量1.1k

点赞数

文章标签： CSS XHTML HTML

本文链接：https://blog.csdn.net/qichunren/article/details/83359296

版权

我是在http://www.space007.com/200809/imgzoom/看到这个的，感觉很不错的效果。

效果: [url]http://www.space007.com/lab/pic/
[/url]


<!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=utf-8"/>
        <title>图片局部放大</title>
        <style>
            body {
                font-size: 12px;
            }

            #origin {
                float: left;
                width: 400px;
                height: 300px;
                margin-right: 16px;
                overflow: hidden;
				cursor:url(point.ico), auto; 
            }

			#origin img{
				display:none;
			}

            #zoom {
                float: left;
                width: 400px;
                height: 300px;
                overflow: hidden;
                border: 1px solid #ccc;
				display: none;
            }

			#detail {
                float: left;
                width: 400px;
                height: 300px;
                overflow: hidden;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div id="origin"><img src="big.jpg" id="srcImg"></div>

        <div id="zoom"><img id="zoomImg"></div>
		<div id="detail">详细说明</div>

        <script type="text/javascript" src="jquery-1.2.6.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
				//获取两个图片对象
            	var oImg = $('#srcImg');
				var nImg = $('#zoomImg');

				//获取原始图片的宽,高以及宽/高比
				var oW = oImg.width();
				var oH = oImg.height();
				var bal = oW/oH;

				//获取图片展示区的宽度和高度
				var originW = $('#origin').width();
				var originH = $('#origin').height();

				//获取将被缩小的系数zoomRate
				if(bal >= 4/3 && oW>originW){	//如果图片比较宽并且过界的话
					var zoomRate = oW/originW; 
					oImg.width(originW);
					oImg.height(originW/bal);
					oImg.show();
				}else if(oH>originH){			//如果图片比较高并且过界
					var zoomRate = oH/originH;
					oImg.height(originH);
					oImg.width(originH*bal);
					oImg.show();
				}else{
					oImg.show();
					$('#origin').css('cursor','default');
					return
				}
				//设置放大图片的url地址
				nImg.attr('src',oImg.attr('src'));

				//获取原始图片的位置
				var oPos = oImg.offset();
				var w = oImg.width()/zoomRate/2;
				var h = oImg.height()/zoomRate/2;

				oImg.bind('mouseover',function(){
					$('#detail').hide();
					$('#zoom').show();
				});

				oImg.bind('mouseout',function(){
					$('#detail').show();
					$('#zoom').hide();
				});

				oImg.bind('mousemove',function(event){
					var x = event.pageX - oPos.left;
					x=x<(oImg.width()-w)?x<w?w:x:oImg.width()-w;
					nImg.css('marginLeft',(w-x)*zoomRate);
					var y = event.pageY - oPos.top;
					y=y<(oImg.height()-h)?y<h?h:y:oImg.height()-h;
					nImg.css('marginTop',(h-y)*zoomRate);
				});
            });
        </script>
    </body>
</html>

qichunren

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片局部放大--放大镜效果

我是在http://www.space007.com/200809/imgzoom/看到这个的，感觉很不错的效果。效果: [url]http://www.space007.com/lab/pic/[/url][code="html"] 图片局部放大 body { ...
复制链接

扫一扫