标签：
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/
标签：
原文地址：http://www.cnblogs.com/atongmyuxiaowanzi/p/4770100.html
