jQuery實現簡單的圖片點擊放大效果

做了幾天的多媒體軟體，現在終於是閑下來了，多媒體軟體其實我們的前端代碼也是可以做的，使用的框架是nw.js很好用。

下面來說下，最近自己做的圖片點擊放大效果的實現。

<div class="content"> <img src="images/img1.png" alt="" class="img1"> <img src="images/img2.png" alt="" class="img2"> <img src="images/img3.png" alt="" class="img3"> <img src="images/img4.png" alt="" class="img4"> <img src="images/img5.png" alt="" class="img5"> <img src="images/img6.png" alt="" class="img6"> <img src="images/img7.png" alt="" class="img7"> </div> <div class="p1"> <center><img src="" alt="" class="p"></center> </div>

代碼分為兩部分，第一個部分是要載入的圖片框架，第二個部分主要是要讓代碼呈現的位置，這裡我用了居中顯示，下面是jquery部分，主要用了jq的基本方法，要知道jq操作的是什麼，是DOM的對象，所以有必要好好理解一些底層的東西，知道了這個，我么接著來看代碼。

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script><script type="text/javascript"> $(function () { var imgs = $(".content img"); console.log(imgs); for(var i=0;i<imgs.length;i++){ console.log(i); //獲取i console.log(imgs[i]); //獲取數組下標對應的內容 $(imgs[i]).click(function() { console.log($(this)); var imgUrl = $(this).attr("src"); //獲取圖片的地址 // console.log(imgUrl); $(".content").addClass(blur); $(".p1").fadeIn("400"); $(".p").show(400).attr("src",imgUrl);//將圖片的地址載入到新的地方放大 console.log($(".big_img").attr("src")); }); } $(".p1").click(function() { $(this).hide(400); $(".content").removeClass(blur); //這裡是添加的模糊效果 }); })</script>

這個效果是我用了好多種方法總結出來比較好用，適合大眾的方法，我也是小白一枚正在學習。

當然還有一種方式要放大的效果，相對來說很複雜！

下面是方法：這個是因為要放大的圖片和原圖不一樣的效果

html代碼：

<div class="bg_black"> <img class="img" alt="" > </div> <div id="container"> <div class="button1" ></div> <div class="button2"></div> <div class="button3"></div> <div class="button4"></div> <div class="button5"></div> <div class="button6"></div> <div class="button7"></div> <div class="button8"></div> <div class="button9"></div> </div> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function(){ var num = [1,2,3,4,5,6,7,8,9]; for(var i= 0 ;i<num.length;i++){ $(".button"+num[i]).click(function(){ var className = $(this).attr("class"); //獲取當前元素的css名稱 var int = className.slice(-1); //slice 截取倒數第一位 $(this).css("background","url(./images/button+int+_on.png)");// 改變點擊圖片的背景圖片 $(".bg_black").show(); //大div顯示 if(int == 8 || int == 9){ $(".img").css({ "left":"258px", "top" :"97px"}); $(".img").attr("src","./images/img"+int+".png"); //div裡面的圖片設置路徑 $(".img").show(); //圖片顯示 }else{ $(".img").css({ "left":"602px", "top" :"97px"}) $(".img").attr("src","./images/img"+int+".png"); //div裡面的圖片設置路徑 $(".img").show(); //圖片顯示 } }); $(".bg_black").click(function(){ $(this).hide(); $(".button"+num[i]).css("background","url(./images/button+int+.png)"); $(".img").hide(); }) } }) </script>

這個方法可能是比較複雜的有好方法的大神可以指點一二，虛心學習！