图片点击放大，并显示浮层

<!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 中的图片是需要展示的图片，可以替换为自己的

图片点击放大，并显示浮层相关推荐

图片点击放大java_Eova列表显示图片并点击放大
eova3.3.0支持新的上传文件姿势:设置元字段配置 {"filename":"ORIGINAL_TIME"} 在原先保存原文件名的基础上动态增加了时间戳,在 ...
layui 怎么设置点击图片放大_layui实现一个图片点击放大
layui实现一个图片点击放大 2019-10-27 01:58:45 卢浮宫版权声明:本文为站长原创文章,转载请写明出处 QQ分享一.背景业务需求,实现一个图片点击放大功能.之前有说个一个 ...
jQuery实现图片点击放大缩小（小案例）
我们不废话,直接上例子.首先利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图 ...
前端jquery实现图片点击放大缩小
利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度 ...
ionic图片点击放大，双指缩放
对于这个功能,也是查找了好多的资料,到现在其中的代码也需要好好研究研究,这个方法的缺点就是每次只能显示一张图片,并对其进行放大~至于多张图片,以后再研究~ 1.写好模板页(comImageBox.ht ...
给页面添加图片点击放大效果
网站图片前端显示可能较小,添加一个点击放大效果方便图片的查看.采用zoom.js 地址:https://fat.github.io/zoom.js GitHub:https://github.com/ ...
在WordPress网站上添加图片点击放大效果
WordPress 博客中图片显示太小?想点击放大?除去安装 WordPress 现有插件,我们还可以直接添加代码实现点击博客中的图片之前是这样的点击博客中的图片之后,图片放大并呈现在灯箱中,且右 ...
简单实现图片点击放大功能
需要引用jQuery的js 插件 CSS的代码 /*使图片在浏览器中居中显示*/.bigImg {position: absolute;top: 50%;left: 50%;/*图片向左移动自身宽度的 ...
layui表格图片点击放大功能
这里要加个图片样式,确保图片在表格中显示适合大小 <style type="text/css">.layui-table-cell{text-align:center; ...

图片点击放大，并显示浮层

图片点击放大，并显示浮层相关推荐

最新文章

热门文章