<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片点击放大功能</title>
<style type="text/css" media="screen">
*{margin:0;padding:0;}
.clearfix:after{display:block;content:'';height:0;clear: both;visibility: hidden;}
.clearfix{zoom:1;}
.thumbs{width:1400px;margin:60px auto 35px;text-align:center;list-style: none;}
.thumbs li{float:left;}
.thumbs a{position:relative;display:block;width:120px;height:120px;margin: 6px 6px 40px;text-decoration:none;border:7px solid #303030;background-position:center center;background-repeat: no-repeat;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.5);background-size:cover;-moz-background-size:cover;-webkit-background-size:cover;}
.thumbs a:after{position: relative;bottom: -136px;display: block; content: attr(title);max-width: 90px;padding: 2px 10px;overflow: hidden;text-align: center;font-size: 10px;bottom: -136px; color: #FFFFFF;background-color: #303030; white-space: nowrap;border-radius: 7px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);}
#galleryOverlay{display:none;position:fixed;top:0;left:0;z-index:100;width:100%;height:100%;opacity:0;overflow:hidden;background-color:#222;background-color:rgba(0,0,0,0.8);-moz-transition:opacity 1s ease;-webkit-transition:opacity 1s ease; transition:opacity 1s ease;}
#galleryOverlay.visible{opacity:1;}
#gallerySlider{position:absolute;left:0;top:0;width:100%;height:100%;white-space: nowrap;-moz-transition:left 0.4s ease;-webkit-transition:left 0.4s ease;transition:left 0.4s ease;}
#gallerySlider .placeholder{display:inline-block;width:100%;height: 100%;line-height: 1px;text-align: center;background: url("../images/preloader.gif") no-repeat center center;}
#gallerySlider .placeholder:before{display: inline-block;content: "";height: 50%;width: 1px;margin-right:-1px;}
#gallerySlider .placeholder img{position:relative;z-index:10000;cursor:pointer;max-height: 100%;max-width: 100%;vertical-align: middle;}
#gallerySlider .placeholder:last-child img{width:400px;}
#gallerySlider.rightSpring{-moz-animation: rightSpring 0.3s;-webkit-animation: rightSpring 0.3s;}
#gallerySlider.leftSpring{-moz-animation: leftSpring 0.3s;-webkit-animation: leftSpring 0.3s;}
@-moz-keyframes rightSpring{
0%{margin-left:0px;}
50%{margin-left:-30px;}
100%{margin-left:0px;}
}
@-webkit-keyframes rightSpring{
0%{margin-left:0px;}
50%{margin-left:-30px;}
100%{margin-left:0px;}
}
@-moz-keyframes leftSpring{
0%{margin-left:0px;}
50%{margin-left:30px;}
100%{margin-left:0px;}
}
@-webkit-keyframes leftSpring{
0%{margin-left:0px;}
50%{margin-left:30px;}
100%{margin-left:0px;}
}
#prevArrow,#nextArrow{position:absolute;top:50%;width:43px;height:58px;margin-top:-29px;opacity:0.5;cursor:pointer;text-decoration:none;border:none;background:url('images/arrows.png') no-repeat;-moz-transition:opacity 0.2s ease;-webkit-transition:opacity 0.2s ease;transition:opacity 0.2s ease;}
#prevArrow:hover, #nextArrow:hover{opacity:1;}
#prevArrow{left:40px;background-position:left top;}
#nextArrow{right:40px;background-position:right top;}
</style>
</head>
<body>
<ul id="thumbs" class="thumbs clearfix">
<li><a href="images/a_z.jpg" style="background-image:url(images/a_m.jpg)" title="Lion Rock"></a></li>
<li><a href="images/b_z.jpg" style="background-image:url(images/b_m.jpg)" title="Holsten Gate"></a></li>
<li><a href="images/c_z.jpg" style="background-image:url(images/c_m.jpg)" title="Blue Hour"></a>
<li><a href="images/d_z.jpg" style="background-image:url(images/d_m.jpg)" title="Waikato Landscape"></a></li>
<li><a href="images/e_z.jpg" style="background-image:url(images/e_m.jpg)" title="Tauranga Bridge"></a></li>
<li><a href="images/f_z.jpg" style="background-image:url(images/f_m.jpg)" title="East Coast"></a></li>
<li><a href="images/g_z.jpg" style="background-image:url(images/g_m.jpg)" title="Cathedral Cove"></a></li>
<li><a href="images/h_z.jpg" style="background-image:url(images/h_m.jpg)" title="The Pond"></a></li>
<li><a href="images/i_z.jpg" style="background-image:url(images/i_m.jpg)" title="Good Night"></a></li>
<li><a href="images/j.jpg" style="background-image:url(images/j.jpg)" title="Good Night"></a></li>
</ul>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
(function(){
var overlay = $('<div id="galleryOverlay">'),
slider = $('<div id="gallerySlider">'),
prevArrow = $('<a id="prevArrow"></a>'),
nextArrow = $('<a id="nextArrow"></a>'),
overlayVisible = false;
$.fn.touchTouch = function(){
var placeholders = $([]),
index = 0,
items = this;
overlay.hide().appendTo('body');
slider.appendTo(overlay);
items.each(function(){
placeholders = placeholders.add($('<div class="placeholder">'));
});
var num = 0;
slider.append(placeholders).on('click',function(e){
if(!$(e.target).is('img')){
hideOverlay();
}else if ($(e.target).is('img')) {
num = (num + 90) % 360;
$(e.target).css({
transform : "rotate(" + num + "deg)"
})
}
});
$('body').on('touchstart', '#gallerySlider img', function(e){
var touch = e.originalEvent,
startX = touch.changedTouches[0].pageX;
slider.on('touchmove',function(e){
e.preventDefault();
touch = e.originalEvent.touches[0] ||
e.originalEvent.changedTouches[0];
if(touch.pageX - startX > 10){
slider.off('touchmove');
showPrevious();
}
else if (touch.pageX - startX < -10){
slider.off('touchmove');
showNext();
}
});
return false;
}).on('touchend',function(){
slider.off('touchmove');
});
items.on('click', function(e){
e.preventDefault();
index = items.index(this);
showOverlay(index);
showImage(index);
preload(index+1);
preload(index-1);
});
if ( !("ontouchstart" in window) ){
overlay.append(prevArrow).append(nextArrow);
prevArrow.click(function(e){
e.preventDefault();
showPrevious();
});
nextArrow.click(function(e){
e.preventDefault();
showNext();
});
}
$(window).bind('keydown', function(e){
if (e.keyCode == 37){
showPrevious();
}
else if (e.keyCode==39){
showNext();
}
});
function showOverlay(index){
if (overlayVisible){
return false;
}
overlay.show();
setTimeout(function(){
overlay.addClass('visible');
}, 100);
offsetSlider(index);
overlayVisible = true;
}
function hideOverlay(){
if(!overlayVisible){
return false;
}
overlay.hide().removeClass('visible');
overlayVisible = false;
}
function offsetSlider(index){
slider.css('left',(-index*100)+'%');
}
function preload(index){
setTimeout(function(){
showImage(index);
}, 1000);
}
function showImage(index){
if(index < 0 || index >= items.length){
return false;
}
loadImage(items.eq(index).attr('href'), function(){
placeholders.eq(index).html(this);
});
}
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
img.attr('src',src);
img.on('DOMMouseScroll',function(e){
var zoom = parseInt(this.style.zoom,10)||100;
zoom += (-(event.detail || 0) / 3);
if(zoom > 0 )
this.style.zoom=zoom+'%';
return false;
});
img.on('mousewheel',function(e){
var zoom = parseInt(this.style.zoom,10)||100;
zoom += event.wheelDelta / 120 ;
if(zoom > 0 )
this.style.zoom=zoom+'%';
return false;
});
}
function showNext(){
if(index+1 < items.length){
index++;
offsetSlider(index);
preload(index+1);
}
else{
slider.addClass('rightSpring');
setTimeout(function(){
slider.removeClass('rightSpring');
},500);
}
}
function showPrevious(){
if(index>0){
index--;
offsetSlider(index);
preload(index-1);
}
else{
slider.addClass('leftSpring');
setTimeout(function(){
slider.removeClass('leftSpring');
},500);
}
}
};
})(jQuery);
$(function(){
$('#thumbs a').touchTouch();
});
</script>
</body>
</html>
说明：
1、css中的 images/arrows.png 表示 左右箭头
2、li a 中的图片是需要展示的图片，可以替换为自己的
2153
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
