jQuery实现朋友圈查看图片
更新时间:2020年09月11日 17:08:32 作者:s2kzzZ
这篇文章主要为大家详细介绍了jQuery实现朋友圈查看图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jQuery实现朋友圈查看图片效果,供大家参考,具体内容如下
效果: 图片点击显示大图,多张图可以滑动,左右按钮点击可切换查看图片 (左右点击切换效果不需要删除样式即可)
index.html 文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui"> <title>jQuery模仿朋友圈查看图片效果</title> <link rel="stylesheet" type="text/css" href="css/css.css" > <link rel="stylesheet" type="text/css" href="touchTouch/touchTouch.css" > <script src="js/jquery-3.4.1.js"></script> <script src="js/touchTouch.jquery.js"></script> <script> $(function() { //图片事件 img-gather处为图片效果展示 $('#thumbs a').touchTouch(); }); </script> </head> <body> <!--content--> <div class="content"> <!--img-gather--> <div class="clearfix img-gather" id="thumbs"> <a href="images/img1-large.png" style="background-image:url(images/img1-large.png)" title="图片一"></a> <a href="images/img2-large.jpg" style="background-image:url(images/img2-large.jpg)" title="图片二"></a> <a href="images/img1-large.png" style="background-image:url(images/img1-large.png)" title="图片一"></a> <a href="images/img2-large.jpg" style="background-image:url(images/img2-large.jpg)" title="图片二"></a> <a href="images/img1-large.png" style="background-image:url(images/img1-large.png)" title="图片一"></a> <a href="images/img2-large.jpg" style="background-image:url(images/img2-large.jpg)" title="图片二"></a> </div> <!--img-gather end--> </div> </body> </html>
touchTouch.css 文件
预加载loading动图 preloader.gif
左右切换按钮图片 arrows.png(不需要可删除)
#galleryOverlay{ width:100%; height:100%; position:fixed; top:0; left:0; opacity:0; z-index:100000; background-color:#222; background-color:rgba(0,0,0,1); overflow:hidden; display:none; -moz-transition:opacity 1s ease; -webkit-transition:opacity 1s ease; transition:opacity 1s ease; } #galleryOverlay.visible{ opacity:1; } #gallerySlider{ height:100%; left:0; top:0; width:100%; white-space: nowrap; position:absolute; -moz-transition:left 0.4s ease; -webkit-transition:left 0.4s ease; transition:left 0.4s ease; } #gallerySlider .placeholder{ /* preloader.gif 预加载loading动图 */ background: url("preloader.gif") no-repeat center center; height: 100%; line-height: 1px; text-align: center; width:100%; display:inline-block; } #gallerySlider .placeholder:before{ content: ""; display: inline-block; height: 50%; width: 1px; margin-right:-1px; } #gallerySlider .placeholder img{ display: inline-block; max-height: 100%; max-width: 100%; vertical-align: middle; } #gallerySlider.rightSpring{ -moz-animation: rightSpring 0.3s; -webkit-animation: rightSpring 0.3s; } #gallerySlider.leftSpring{ -moz-animation: leftSpring 0.3s; -webkit-animation: leftSpring 0.3s; } /* Firefox Keyframe Animations */ @-moz-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; } } /* Safari and Chrome Keyframe Animations */ @-webkit-keyframes rightSpring{ 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; } } /* 左右切换按钮 */ /* arrows.png 左右切换按钮图片 不需要可删除 */ #prevArrow,#nextArrow{ border:none; text-decoration:none; background:url('arrows.png') no-repeat; opacity:1; cursor:pointer; position:absolute; width:43px; height:58px; top:50%; margin-top:-29px; -moz-transition:opacity 0.2s ease; -webkit-transition:opacity 0.2s ease; transition:opacity 0.2s ease; } #prevArrow:hover, #nextArrow:hover{ opacity:1; } #prevArrow{ background-position:left top; left:40px; } #nextArrow{ background-position:right top; right:40px; } /* 页码 */ #pagelimit{ position:absolute; bottom:20px; left:50%; margin-left:-18px; color:#fff; font-size:1.4rem; }
touchTouch.jquery.js 文件
(function(){ /* Private variables */ var overlay = $('<div id="galleryOverlay">'), slider = $('<div id="gallerySlider">'), prevArrow = $('<a id="prevArrow"></a>'), nextArrow = $('<a id="nextArrow"></a>'), pageSpan = $('<span id="pagelimit"></span'), overlayVisible = false; /* Creating the plugin */ $.fn.touchTouch = function(){ var placeholders = $([]), pl1=[], index = 0, items = this; // Appending the markup to the page overlay.hide().appendTo('body'); slider.appendTo(overlay); pageSpan.appendTo(overlay); // Creating a placeholder for each image items.each(function(){ placeholders = placeholders.add($('<div class="placeholder">')); }); // Hide the gallery if the background is touched / clicked slider.append(placeholders).on('click',function(e){ hideOverlay(); }); // Listen for touch events on the body and check if they // originated in #gallerySlider img - the images in the slider. $('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 to prevent image // highlighting on Android return false; }).on('touchend',function(){ slider.off('touchmove'); }); // Listening for clicks on the thumbnails //评论事件 items.on('click', function(e){ e.preventDefault(); // Find the position of this image // in the collection index = items.index(this); showOverlay(index); showImage(index); calcPages(items,index); // Preload the next image preload(index+1); // Preload the previous preload(index-1); $(document).data("overlayVisible",true); e.cancelBubble = true; //取消冒泡事件 //e.stopPropagation(); }); function calcPages(items,index){ pageSpan.text((index+1)+"/"+items.length); } // If the browser does not have support // for touch, display the arrows if ( !("ontouchstart" in window) ){ overlay.append(prevArrow).append(nextArrow); prevArrow.click(function(e){ e.preventDefault(); showPrevious(); }); nextArrow.click(function(e){ e.preventDefault(); showNext(); }); } // Listen for arrow keys $(window).bind('keydown', function(e){ if (e.keyCode == 37){ showPrevious(); } else if (e.keyCode==39){ showNext(); } }); /* Private functions */ function showOverlay(index){ // If the overlay is already shown, exit if (overlayVisible){ return false; } // Show the overlay overlay.show(); setTimeout(function(){ // Trigger the opacity CSS transition overlay.addClass('visible'); }, 100); // Move the slider to the correct image offsetSlider(index); // Raise the visible flag overlayVisible = true; } function hideOverlay(){ // If the overlay is not shown, exit if(!overlayVisible){ return false; } // Hide the overlay overlay.hide().removeClass('visible'); overlayVisible = false; $(document).data("overlayVisible",overlayVisible); } function offsetSlider(index){ // This will trigger a smooth css transition slider.css('left',(-index*100)+'%'); } // Preload an image by its index in the items array function preload(index){ setTimeout(function(){ showImage(index); }, 1000); } // Show image in the slider function showImage(index){ // If the index is outside the bonds of the array if(index < 0 || index >= items.length){ return false; } // Call the load function with the href attribute of the item loadImage(items.eq(index).attr('href'), function(){ placeholders.eq(index).html(this); }); } // Load the image and execute a callback function. // Returns a jQuery object function loadImage(src, callback){ var img = $('<img>').on('load', function(){ callback.call(img); }); img.attr('src',src); } function showNext(){ // If this is not the last image if(index+1 < items.length){ index++; offsetSlider(index); preload(index+1); calcPages(items,index); } else{ // Trigger the spring animation slider.addClass('rightSpring'); setTimeout(function(){ slider.removeClass('rightSpring'); },500); } } function showPrevious(){ // If this is not the first image if(index>0){ index--; offsetSlider(index); preload(index-1); calcPages(items,index); } else{ // Trigger the spring animation slider.addClass('leftSpring'); setTimeout(function(){ slider.removeClass('leftSpring'); },500); } } }; })(jQuery);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
这篇文章主要介绍了jQuery+HTML5实现WebGL高性能烟花绽放动画效果,可实现烟花升空爆炸的绚丽动画效果,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-08-08【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
这篇文章主要介绍了jQuery实用代码片段,包括筛选,搜索,样式,清除默认值,多选等多种功能.具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06基于JQuery和原生JavaScript实现网页定位导航特效
本文通过实例代码给大家介绍了基于JQuery和原生JavaScript实现网页定位导航特效,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下吧2017-04-04sliderToggle在写jquery的计时器setTimeouter中不生效
sliderToggle在setTimeouter中不生效,还报错说是发生了意想不到的错误2014-05-05
最新评论