javaScript应用之点击图片后放大

时间:2024-02-25 15:18:09

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/