JS图片放大展示效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JS图片放大展示效果</title>
<style>
* {margin:0; padding:0}
body {font:12px/20px "Consolas", "Microsoft YaHei"; color:#333;background:#EFEFEF; overflow:hidden}
ul, li {list-style:none}
.cf {zoom:1}
.cf:after {clear:both; content:"."; display:block; visibility:hidden; height:0}
.wrap {width:980px; margin:0 auto; padding:100px 0 0}
#banner {width:800px; margin:0 auto; position:relative; background:#FFF; height:400px; overflow:hidden}
#banner ul {}
#banner li {float:left; width:190px; height:190px; cursor:pointer;padding:5px}
#banner li img {width:190px; height:190px; position:absolute; z-index:4; left:5px; top:5px}
#banner li span {display:block; width:170px; height:170px; border:10px solid #000; position:absolute; background:#CCC; opacity:0.5; filter:alpha(opacity=50);left:5px; top:5px; z-index:5}
#banner li span:hover {opacity:0.3; filter:alpha(opacity=30); border:10px solid #000; background:#fff;}
.btn_wrap {position:absolute; left:820px; top:150px; height:100px; width:37px}
#goUp {background:url(images/nav.png) no-repeat 4px 4px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; top:0;}
#goUp:hover {background-position:-34px 4px}
#goDown {background:url(images/nav.png) no-repeat 4px -52px; width:37px; height:22px; display:block; text-indent:-9999px;position:absolute; left:0; bottom:0;}
#goDown:hover {background-position:-34px -52px}
</style>
</head>
<body>
<div class="wrap">
	<div id="banner">
		<ul class="cf">
			<li><span></span><img src="//ku.shouce.ren/files/images/201601/56a34a17e7e03.jpg" alt="" /></li>
			<li><span></span><img src="//ku.shouce.ren/files/images/201601/56a34a1903d7e.jpg" alt="" /></li>
			<li><span></span><img src="//ku.shouce.ren/files/images/201601/56a34a1a190aa.jpg" alt="" /></li>
			<li><span></span><img src="//ku.shouce.ren/files/images/201601/56a34a1b7ecee.jpg" alt="" /></li>
			<li><span></span><img src="//ku.shouce.ren/files/images/201601/56a34a1c9caec.jpg" alt="" /></li>
			<li><span></span><img src="//ku.shouce.ren/files/images/201601/56a34a1d31cfa.jpg" alt="" /></li>
			<li><span></span><img src="//ku.shouce.ren/files/images/201601/56a34a1ed05a6.jpg" alt="" /></li>
			<li><span></span><img src="//ku.shouce.ren/files/images/201601/56a34a1f8e441.jpg" alt="" /></li>
			<li><span></span><img src="//ku.shouce.ren/files/images/201601/56a34a21806d6.jpg" alt="" /></li>
			<li><span></span><img src="//ku.shouce.ren/files/images/201601/56a34a2319dda.jpg" alt="" /></li>
		</ul>
		<div class="btn_wrap">
			<a href="javascript:;" id="goUp">向上走着</a>
			<a href="javascript:;" id="goDown">向下走着</a>
		</div>
	</div>
</div>
<script type="text/javascript">
var JSHELPER = {
	initi: function() {
},
	animate: function(obj, attrList, callback) {
		clearInterval(obj.timer);
		obj.timer = setInterval(function() {
			var isStop = true;
			for(var attr in attrList) {
				var curAttr = attr === "opacity" ? Math.round(parseFloat(JSHELPER.getStyle(obj, attr) * 100)) : parseInt(JSHELPER.getStyle(obj, attr));
				var speed = (attrList[attr] - curAttr) / 8;
				speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
				if(attr === "opacity") {
					obj.style.filter = "alpha(opacity=" + (curAttr + speed) + ")";
					obj.style.opacity = (curAttr + speed) / 100;
				} else {
					obj.style[attr] = curAttr + speed + "px";
				}
				curAttr != attrList[attr] && (isStop = false);
			}
			if(isStop) {
				clearInterval(obj.timer);
				!!callback && callback();
			}
		}, 15);
	},
	$: function(params) {
		switch (params.charAt(0)) {
			case "#":
				return document.getElementById(params.substring(1));
				break;
			case ".":
				return this.getByClass(document, params.substring(1));
			default:
				return document.getElementsByTagName(params);
		}
	},
	getStyle: function(obj, attr) {
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
	},
	getByClass: function(pn, cn) {
		var ae = pn.getElementsByTagName("*"), 
			rent = [],
			re = new RegExp('\\b' + cn + '\\b', 'i');
		for(var i = 0, len = ae.length; i < len; i++) {
			ae[i].className.search(re) != -1 && rent.push(ae[i]);
		}
		return rent;
	}
};
window.onload = function() {
	var btnDown = JSHELPER.$("#goDown"),
		btnUp = JSHELPER.$("#goUp"),
		wrap = JSHELPER.$("#banner"),
		liList = wrap.children[0].children,
		len = liList.length;
	wrap.style.overflow = "visible";
	//设置 left 和  top
	for(var i = 0; i < len; i++) {
		liList[i].style.left = liList[i].offsetLeft + "px";
		if(i >= 12) {
			liList[i].style.top = "400px";
		} else {
			liList[i].style.top = liList[i].offsetTop + "px";
		}
	}
	//添加 position:absolute
	for(var i = 0; i < len; i++) {
		liList[i].style.position = "absolute";
	}
	//把容器外的设置为透明
	for(var i = 8; i < len; i++) {
		liList[i].style.filter = "alpha(opacity=0)";
		liList[i].style.opacity = 0;
		liList[i].style.display = "none";
	}
	
	var now = 0;
	//上一个
	btnUp.onclick = function() {
		if(now == 0) {
			return;
		}
		var i = now + 8;
		i = i >= len ? (len-1) : i;
		var timerDo = setInterval(function() {
			if(i < now) {
				liList[i].style.display = "block";
				JSHELPER.animate(liList[i], {top: 0, opacity: 100});
			} else if(i < now + 4) {
				JSHELPER.animate(liList[i], {top: 200});
			} else {
				JSHELPER.animate(liList[i], {top: 400, opacity: 0});
			}
			i--;
			if( i == now - 5 ) {
				now -= 4;
				for(var m = len-1; m > now+7; m--) {
					liList[m].style.display = "none";
				}
				clearInterval(timerDo);
			}
		}, 50);
	};
	//下一个
	btnDown.onclick = function() {
		if(now >= len - 8) {
			return;
		}
		var i = now;
		var timerDo = setInterval(function() {
			if(i < now + 4) {
				JSHELPER.animate(liList[i], {top: -200, opacity: 0});
			} else if(i < now + 8) {
				JSHELPER.animate(liList[i], {top: 0});
			} else {
				liList[i].style.display = "block";
				JSHELPER.animate(liList[i], {top: 200, opacity: 100});
			}
			i++;
			if( i == now + 12 ) {
				now += 4;
				for(var m = 0; m < now; m++) {
					liList[m].style.display = "none";
				}
				clearInterval(timerDo);
			}
		}, 50);
	};
	
	//放大镜
	for(var i = 0; i < len; i++) {
		(function(i) {
			liList[i].children[0].onmouseover = function() {
				liList[i].style.zIndex = 100;
				JSHELPER.animate(liList[i].children[0], {width:280, height: 280, left: -50, top: -50});
				JSHELPER.animate(liList[i].children[1], {width:300, height: 300, left: -50, top: -50});
			};
			liList[i].children[0].onmouseout = function() {
				liList[i].style.zIndex = 10;
				JSHELPER.animate(liList[i].children[0], {width:170, height: 170, left: 5, top: 5});
				JSHELPER.animate(liList[i].children[1], {width:190, height: 190, left: 5, top: 5});
			};
		})(i);
	}
	
};
</script>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JS图片放大展示效果

分类

图片代码

描述

一个非常简洁的JS放大显示特效，测试的图片有点大了，可能会影响加载速度，一时找不到这么多尺寸大小的小图，所以大家将就一下吧。本效果在鼠标移上图片的时候生效，可看到图片向前放大显示，好像离你更近了，呵呵，代码基于Js和CSS。