JS图片放大展示的效果代码
发布时间：2015-02-19 编辑：jiaochengji.com
本文分享一例js实现的图片放大展示效果的代码，一个非常简洁的JS放大显示特效，效果很炫的，有需要的朋友参考学习下。
说明：
一个非常简洁的JS放大显示特效，本效果在鼠标移上图片的时候生效，可看到图片向前放大显示，好像离你更近了，代码基于Js和CSS。
代码：
复制代码 代码示例:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JS图片放大展示效果--www.jiaochengji.com</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="/jscss/demoimg/wall1.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall2.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall3.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall4.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall5.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall6.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall7.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall8.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall9.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall10.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>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>JS图片放大展示效果--www.jiaochengji.com</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="/jscss/demoimg/wall1.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall2.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall3.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall4.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall5.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall6.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall7.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall8.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall9.jpg" alt="" /></li>
<li><span></span><img src="/jscss/demoimg/wall10.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>
您可能感兴趣的文章：
jQuery弹出窗口插件 FancyBox
jQuery循环滚动展示代码 可应用到文字和图片上
jQuery图片放大插件 hoverpluse
js实现鼠标滑到图片上则产生放大浮出的效果
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
jQuery实现图片放大预览实现原理及代码
一个随机显示图片的JS代码
JS鼠标移动到缩略图显示大图 js图片放大效果一例
jQuery图片展示插件 Lytebox
jQuery幻灯片播放 Slideshow2!
[关闭]