javaScript應用之點擊圖片后放大
在我們瀏覽圖片的時候，會碰到這樣一個問題，由於我們在瀏覽很多圖片的時候突然想有個很喜歡的圖片，很想仔細看看，但是圖片卻非常的小，無法看清楚，而我們一點擊，圖片就放大了，很清除的展現在了我們的面前。
這是網絡前端中，我們應用javaScript來寫出來的，先來看看我做好的效果是什么樣子的
比如這就是我們的瀏覽的眾多的圖片中其中一個，而我們在看到這個阿童木圖片的時候，我們會想放大來看看。我們來點擊一下試試，看看效果是什么樣子的！
就是這樣我們就可近距離的清楚的，仔細的，爽爽的觀看這個圖片了。
現在來看看源代碼，這個動態的效果的是如何做出來的，在代碼的步驟中，在行內做了一些解釋代碼如下：
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>阿童木與小丸子的博客</title> 6 <style type="text/css"> 7 //下面的是設置放大后圖片的后面的那個背景div，就是設置它的透明度，還有背景顏色，這個可以根據的自己的喜好，隨心所欲的自己你想要的效果，在這里，我設置的黑色的背景，並且把統設置為55%; 8 div#gray{ 9 //背景顏色 10 background : black; 11 //設置透明度 12 opacity : 0.55; 13 filter : alpha(opacity=55); 14 position : absolute; 15 top : 0px; 16 left : 0px; 17 } 18 </style> 19 </head> 20 <script type="text/javascript">//javaScript標簽，這里面的是javaScript語言編寫的的動態的效果， 21 function show(pic){ 22 //獲取圖片的寬和高 23 iw = pic.width; 24 ih = pic.height; 25 //獲取屏幕的寬和高 26 sw = document.documentElement.clientWidth; 27 sh = document.documentElement.clientHeight; 28 //動態的創建一個灰色的背景div，就是那個我們帶點擊后，大圖后面的那個灰色的那個背景，當然灰色是可以自由設置的 29 gdiv = document.createElement('div'); 30 gdiv.id = 'gray'; 31 gdiv.style.height = sh+'px'; 32 gdiv.style.width = sw+'px'; 33 document.body.appendChild(gdiv); 34 //刪除動態的圖片和對象，就是我們點擊放大后，再次點擊的時候，放大的圖片會被刪除，並且后面的那個背景也會隨之刪除，這個方法就是為了完成這個效果 35 gdiv.onclick = function(){ 36 document.body.removeChild(this); 37 document.body.removeChild(oimg); 38 } 39 //創建動態的圖片對象，將該對象的src賦值為原圖的src,這就是來創建我們放大后看大的那個圖片 40 oimg = document.createElement('img'); 41 oimg.src = pic.src; 42 oimg.width=400; 43 oimg.height=400; 44 oimg.style.position = 'absolute'; 45 oimg.style.top = (sh-ih)/2+'px'; 46 oimg.style.left= (sw-ih)/2+'px'; 47 document.body.appendChild(oimg); 48 } 49 //設置圖片的位置來適應窗口的大小 50 window.onresize=function(){ 51 sh = document.documentElement.clientHeight; 52 sw = document.documentElement.clientWidth; 53 gdiv.style.width = sw + 'px'; 54 gdiv.style.height = sh + 'px'; 55 //更改圖片的位置 56 oimg.style.top = (sh-ih)/2 + 'px'; 57 oimg.style.left = (sw-iw)/2 + 'px'; 58 } 59 </script> 60 <body> 61 <img src="./b.jpg" width='300' onclick='show(this)' /> 62 </body> 63 </html>
這樣，我們想要的效果就出來的，是不是很簡單，其實在做這個效果的時候，先把思路想想清楚了就可以了！
我們要的效果是點擊圖片的時候會放大，這樣我們就寫一個點擊事件，點擊的時候觸發事件，然后我們再一次點擊的時候，圖片就會消失，這樣我們再寫一個方法，讓他再次點擊的時候就會消失，這樣思路清楚清晰后，我們這樣就可以寫了，但是其他的就是細節了！
謝謝觀看！ http://www.cnblogs.com/atongmyuxiaowanzi/