<style> *{ margin: 0; padding: 0; z-index: 0; } body{ background: black; } ul{ list-style: none; margin-top: 10px; } li{ color: white; float: left; padding-left: 38px; padding-top: 25px; } #box{ width: 750px; height: 500px; border: 3px solid white; margin: 0 auto; margin-top: 100px; } ul li img{ width: 200px; height: 200px; opacity: 0.3; } .box{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background-repeat: no-repeat; background-position: center; background-size: 30%; display: none; } </style> <body> <div id="box"> <ul> <li> <img src="img/11.jpg" alt="" class="enlarge"> </li> <li> <img src="img/22.jpg" alt="" class="enlarge"> </li> <li> <img src="img/33.jpg" alt="" class="enlarge"> </li> <li> <img src="img/44.jpg" alt="" class="enlarge"> </li> <li> <img src="img/55.jpg" alt="" class="enlarge"> </li> <li> <img src="img/66.jpg" alt="" class="enlarge"> </li> </ul> <div class="box"></div><!--容器--> </div> </body> <script> $(document).ready(function () { $("li").hover( function () { var num = $(this).index(); $("#box li:eq("+num+") img").css("opacity","1") }, function () { var num = $(this).index(); $("#box li:eq("+num+") img").css("opacity","0.5") } ); $('.enlarge').click(function () { var imgSrc = $(this).attr("src"); $('.box').css("background-image","url("+imgSrc+")"); $(".box").show(); $('.box').click(function () { $(this).hide() }) }) }) </script>
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #用简短的代码实现图片的缩放
