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

 

变大:

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

    .kecheng_02_cell_content img {
        /* 100px;
        height: 133px;*/
        width: 140px;
        height: 105px;
        margin-top: 10px;
        margin-right: 8px;
        margin-left: 10px;
        cursor: pointer;
        z-index: 100;
        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";
    }