CSS：图片放大效果（类似淘宝商品）

效果：
CSS：图片放大效果（类似淘宝商品）
前提：准备两张图片，一大一小，原理就是跟随鼠标打开指定位置的图片，注释详细。
代码：
<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>图片放大展示</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#show_bigger_pic {
				position: absolute;
				width: 500px;
				height: 400px;
				top: 200px;
				left: 200px;
			}
			
			.small_pic_div {
				width: 240px;
				height: 240px;
				border: 1px solid;
				float: left;
				position: relative;
				/*  cover:absolute定位使用*/
			}
			
			.big_pic_div {
				width: 240px;
				height: 240px;
				border: 1px solid;
				float: left;
				margin-left: 10px;
				display: none;
				overflow: hidden;
			}
			
			.big_pic_div>img {
				position: relative;
			}
			
			.cover {
				width: 240px;
				height: 240px;
				position: absolute;
				border: 1px solid;
				z-index: 2;
				left: 0;
				top: 0;
			}
			
			.float_span {
				width: 165px;
				height: 165px;
				position: absolute;
				z-index: 1;
				background: #B2DFEE;
				opacity: 0.5;
				display: none;
				border: 1px solid;
				left: 0;
				top: 0;
			}
		</style>
		<script type="text/javascript">
			function gbc(tparent, tclass) { //获取指定父元素的指定类的子元素的函数
				var allclass = tparent.getElementsByTagName('*');
				var result = [];
				for(var i = 0; i < allclass.length; i++) {
					if(allclass[i].className == tclass)
						result.push(allclass[i]);
				}
				return result; //返回的是数组
			}
			window.onload = function() {
				var sbp = document.getElementById('show_bigger_pic'); //获取最外层div
				var c = gbc(sbp, 'cover')[0]; //获取cover层
				var fs = gbc(sbp, 'float_span')[0]; //获取浮动层
				var spd = gbc(sbp, 'small_pic_div')[0]; //获取小图div
				var sp = spd.getElementsByTagName('img')[0]; //获取小图
				var bpd = gbc(sbp, 'big_pic_div')[0]; //获取大图div
				var bp = bpd.getElementsByTagName('img')[0]; //获取大图
				var spw; //比例计算暂存参数变量
				var sph;
				var bpw;
				var bph;
				var btn = true; //开关，因参数只需获取一次 
				c.onmouseover = function() { //鼠标移入小图
					fs.style.display = "block";
					bpd.style.display = "block";
					c.style.cursor = "pointer";
					if(btn) { //获取大小图片的参数以便浮动层大小的计算，仅获取一次即可
						spw = sp.offsetWidth;
						sph = sp.offsetHeight;
						bpw = bp.offsetWidth;
						bpw = bp.offsetHeight;
						spdw = spd.offsetWidth;
						spdh = spd.offsetHeight;
						var fsw = Math.ceil(spw / bpw * spdw); //比例计算
						var fsh = Math.ceil(sph / bph * spdh);
						fs.style.width = fsw + 'px'; //浮动层大小设置，以便使左图浮动层遮盖符合右边放大区
						fs.style.height = fsh + 'px';
						btn = false; //获取完关闭开关
					}
				};
				c.onmouseout = function() { //鼠标移出
					fs.style.display = "none";
					bpd.style.display = "none";
				};
				c.onmousemove = function(ev) { //鼠标移动
					var pos = ev || event;
					var left = pos.clientX - sbp.offsetLeft - fs.offsetWidth / 2; //计算left
					var top = pos.clientY - sbp.offsetTop - fs.offsetHeight / 2; //计算top
					//  document.title=left+" "+top+" "+pos.clientX+" "+sbp.offsetLeft+" "+fs.offsetWidth/2;
					if(left < 0) {
						left = 0; //当小于0强制固定
					} else if(left > c.offsetWidth - fs.offsetWidth) { //大于某一参数也固定，以防浮动层移出图片区
						left = c.offsetWidth - fs.offsetWidth;
					}
					if(top < 0) {
						top = 0;
					} else if(top > c.offsetHeight - fs.offsetHeight) {
						top = c.offsetHeight - fs.offsetHeight;
					}
					fs.style.left = left + "px"; //浮动层位置改变
					fs.style.top = top + 'px';
					var percentX = left / c.offsetWidth; //比例计算
					var percentY = top / c.offsetHeight;
					bp.style.left = -percentX * (bp.offsetWidth) + "px"; //右边大图位置的改变，表现在实际中是放大区改变
					bp.style.top = -percentY * (bp.offsetHeight) + "px";
				}
			}
		</script>
	</head>

	<body>
		<div id="show_bigger_pic">
			<span class="cover"></span>
			<span class="float_span"></span>
			<div class="small_pic_div">
				<img src="img/small.jpg" alt="" />
			</div>
			<div class="big_pic_div">
				<img src="img/big.jpg" alt="" />
			</div>
		</div>
	</body>

</html>
CSS：图片放大效果（类似淘宝商品）

相关推荐
