点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

变大:

方法一: 利用css属性. 鼠标放上 hover放大几倍.

     .kecheng_02_cell_content img {
         /*width: 100px;
         height: 133px;*/
         width: 140px;
         height: 105px;
         margin-top: 10px;
         margin-right: 8px;
         margin-left: 10px;
         cursor: pointer;
         z-index:;
         box-shadow: 0px 0px 2px 2px #DBDBDB;

         transition: all 0.6s;
         -moz-transition: width 0.6s; /* Firefox 4 */
         -webkit-transition: width 0.6s; /* Safari 和 Chrome */
         -o-transition: width 0.6s; /* Opera */

     }

     .kecheng_02_cell_content img:hover{

            transform: scale(5);
            -ms-transform:scale(5);     /* IE 9 */
            -moz-transform:scale(5);     /* Firefox */
            -webkit-transform:scale(5); /* Safari 和 Chrome */
            -o-transform:scale(5);     /* Opera */
      }

　　14-18行;     23-27行关键代码.

　　参考:css bootstrap鼠标移到图片 放大

方法二.  鼠标点击的时候, 变大. 利用css属性

1-

如果定义的class 使用的 放大:

　　

         .transformImg {
            transform: scale(4);
             -ms-transform:scale(4);
             -moz-transform:scale(4);
             -webkit-transform:scale(4);
             -o-transform:scale(4);
             width: 600px;
             height: 450px;
             position: absolute;
             top: 30px;
             left: 30px;
       }

如果定义的class使用的是 设置 宽 和高.

            .kecheng_02_cell_content .transformImg {

             width: 600px;
             height: 450px;
             position: absolute;
             top: 30px;
             left: 30px;
       }

那么 .transformImg  前面必须指明位置.

2-:  js

         //给课程介绍中的图片 委托事件:
         $(".leftDiv2").on('click', '.kecheng_02 img', function(event) {
             // event.preventDefault();
             $(this).siblings('img').removeClass('transformImg');
             $(this).toggleClass('transformImg');

         });

方法三: 设置一个弹出的div. 进行固定定位, 然后将img的地址放入.

注意: 固定定位弹出层比较好.  对于页面超出 一个 浏览器宽度的图片,点击的话, 如果使用绝对定位,  放大后的图片就有可能被滚动条覆盖了.

------------

1. 弹出层.

 <!-- 弹出图片,放大显示 -->
         <div style="position:fixed;display:none;" id="alertImg">

         </div>

2. 给 img 绑定委托事件,  更换 弹出层中的内容.

         //给课程介绍中的图片 委托事件:
         $(".leftDiv2").on('click', '.kecheng_02 img', function(event) {
             // event.preventDefault();
             //$(this).siblings('img').removeClass('transformImg');
             //$(this).toggleClass('transformImg');
             // $(this).css()
             //
             document.getElementById("alertImg").style.display="block";
             document.getElementById("alertImg").innerHTML = "<div onclick='closePic();'><img src='"+$(this).attr("src")+"' width='800px' height='600px'/></div>";

             var w= document.documentElement.clientWidth || document.body.clientWidth;
             var pic_w = (w-800) /2;
             document.getElementById("alertImg").style.top="100px";
             document.getElementById("alertImg").style.left= pic_w+"px";

         });

var w= document.documentElement.clientWidth || document.body.clientWidth;  兼容写法,兼容多种浏览器.

参考: 浏览器窗口可视区域大小

3. 关闭弹出层div 的方法.

     function closePic(){
         document.getElementById("alertImg").style.display="none";
     }