广树
2024-10-10 19:57
@铭心:谢谢大佬夸奖,大佬的博客也很可爱。
关于友链,抱歉,希望能仔细阅读一下友链要求。
作者:广树时间:2016-03-02 19:56:23分类:JavaScript/jQuery/Vue
自己写了个类似淘宝晒图的代码,但是感觉还有些凌乱,应该还能优化。
CSS部分:
<style> .content-img-list img { height: 30px; width: 45px; vertical-align: middle; } .content-img-box .content-img-list { float: left; margin-right: 10px; border: 2px solid #fff; *zoom:1; position: relative; transition: border-color .2s ease-out; cursor: pointer; } .member-discuss .content-img-box { margin-top: 8px; } .content-img-box ul .tm-current { border: 2px solid #fab900; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; cursor: pointer; } .tm-current .tm-photos-arrow { filter: alpha(opacity=100); opacity: 1; bottom: -12px } .tm-photos-arrow { width: 0; height: 0; line-height: 0; font-size: 0; border: transparent 6px dashed; border-top: 6px solid #fab900; position: absolute; left: 15px; filter: alpha(opacity=0); opacity: 0; bottom: -8px; background: 0 0 } .content-img-box .img_zoom_box img { cursor: pointer; } .content-img-box .img_zoom_box { position: relative; margin: 10px 0; border: 1px solid #141414; background: #fff; padding: 2px; overflow: hidden; display:none; width:0px; height:0px; } .img_zoom_box .img-goleft { width: 30%; left: 0; cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/pic-prev.cur),auto; z-index: 3; position: absolute; height: 100%; top: 0; background: fixed url(about:blank); } .img_zoom_box .img-goleft-ico { background-image: url(../images/iconfont-left.png); background-repeat: no-repeat; background-position: center center; } .img_zoom_box .img-goright { width: 30%; right: 0; cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/pic-next.cur),auto; z-index: 3; position: absolute; height: 100%; top: 0; background: fixed url(about:blank); } .img_zoom_box .img-goright-ico { background-image: url(../images/iconfont-right.png); background-repeat: no-repeat; background-position: center center; } .img_zoom_box .img-gomid { width: 100%; left: 0; cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/small.cur),auto; z-index: 2; position: absolute; height: 100%; top: 0; background: fixed url(about:blank); } .img-go-box{ position: absolute; height: 100%; width: 100%; } .img-zoom-viewer{ position: relative; } .img-zoom-viewer img{ max-width:496px; } </style>
HTML部分:
<div class="content-img-box"> <ul> <li class="content-img-list"> <img src="https://www.wikimoe.com/content/uploadfile/201602/d2da1456548019.jpg" /> <b class="tm-photos-arrow"></b> </li> <li class="content-img-list"> <img src="https://www.wikimoe.com/content/uploadfile/201602/60231455544046.jpg" /> <b class="tm-photos-arrow"></b> </li> <li class="content-img-list"> <img src="https://www.wikimoe.com/content/uploadfile/tpl_options/hd1.jpg" /> <b class="tm-photos-arrow"></b> </li> </ul> <div style="clear:both;"> </div> <div class="img_zoom_box"> <div class="img-zoom-viewer"> </div> <div class="img-goleft"> </div> <div class="img-gomid"> </div> <div class="img-goright"> </div> </div> </div>
JS部分:
<script language="javascript"> $(document).ready(function () { $('.content-img-list').click(function() { if($(this).hasClass("tm-current")){ $(this).removeClass("tm-current"); $('.img_zoom_box').stop(true, false).animate({ height:'0px', width:'0px' }).hide(1); } else{ $('.img_zoom_box').stop(true, false).animate({ height:'0px', width:'0px' }).hide(1); $('.content-img-list').removeClass("tm-current"); $(".img-goleft").show(); $(".img-goright").show(); $(this).parent().parent().find('.content-img-list').removeClass("tm-current"); $(this).addClass("tm-current"); var img = $(this).find("img").clone(); var screenImage = $(this).find("img"); var theImage = new Image(); theImage.src = screenImage.attr("src"); var imageWidth = theImage.width; var imageHeight = theImage.height; /*判断原图是否超过指定宽度*/ if(imageWidth>496){ var imageHeight = 496/imageWidth*theImage.height; var imageWidth = 496; } $(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({ height:imageHeight, width:imageWidth }); $(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img) var lile = $(this).parent().parent().find('.content-img-list').length; if($(this).parent().parent().find('.content-img-list').last().hasClass("tm-current")){ $(".img-goright").hide(); $(".img-goleft").show(); } if($(this).parent().parent().find('.content-img-list').first().hasClass("tm-current")){ $(".img-goleft").hide(); $(".img-goright").show(); } if(lile <= 1){ $(".img-goleft").hide(); $(".img-goright").hide(); } } }); $('.img-gomid').click(function() { $('.content-img-list').removeClass("tm-current"); $(this).parent().parent().find('.img_zoom_box').stop(true, false).animate({ height:'0px', width:'0px' }).hide(1); }); $('.img-goright').click(function() { $('.tm-current').addClass("tm-go") var img = $('.tm-current').next(".content-img-list").find("img").clone(); var screenImage = $('.tm-current').next(".content-img-list").find("img"); var theImage = new Image(); theImage.src = screenImage.attr("src"); var imageWidth = theImage.width; var imageHeight = theImage.height; /*判断原图是否超过指定宽度*/ if(imageWidth>496){ var imageHeight = 496/imageWidth*theImage.height; var imageWidth = 496; } $(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({ height:imageHeight, width:imageWidth }); $(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img); $('.tm-current').next(".content-img-list").addClass("tm-current").prev().removeClass("tm-current"); if($(this).parent().parent().find('.content-img-list').last().hasClass("tm-current")){ $(".img-goright").hide(); $(".img-goleft").show(); } else{ $(".img-goright").show(); $(".img-goleft").show(); } }); $('.img-goleft').click(function() { var img = $('.tm-current').prev(".content-img-list").find("img").clone(); var screenImage = $('.tm-current').prev(".content-img-list").find("img"); var theImage = new Image(); theImage.src = screenImage.attr("src"); var imageWidth = theImage.width; var imageHeight = theImage.height; /*判断原图是否超过指定宽度*/ if(imageWidth>496){ var imageHeight = 496/imageWidth*theImage.height; var imageWidth = 496; } $(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({ height:imageHeight, width:imageWidth }); $(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img); $('.tm-current').prev(".content-img-list").addClass("tm-current").next().removeClass("tm-current"); if($(this).parent().parent().find('.content-img-list').first().hasClass("tm-current")){ $(".img-goleft").hide(); $(".img-goright").show(); } else{ $(".img-goright").show(); $(".img-goleft").show(); } }); }); </script>
※本代码为原创代码,如需转载请注明出处:www.wikimoe.com。