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/