变大:
方法一: 利用css属性. 鼠标放上 hover放大几倍.
1 .kecheng_02_cell_content img { 2 /* 100px; 3 height: 133px;*/ 4 width: 140px; 5 height: 105px; 6 margin-top: 10px; 7 margin-right: 8px; 8 margin-left: 10px; 9 cursor: pointer; 10 z-index: 100; 11 box-shadow: 0px 0px 2px 2px #DBDBDB; 12 13 14 transition: all 0.6s; 15 -moz-transition: width 0.6s; /* Firefox 4 */ 16 -webkit-transition: width 0.6s; /* Safari 和 Chrome */ 17 -o-transition: width 0.6s; /* Opera */ 18 19 } 20 21 .kecheng_02_cell_content img:hover{ 22 23 transform: scale(5); 24 -ms-transform:scale(5); /* IE 9 */ 25 -moz-transform:scale(5); /* Firefox */ 26 -webkit-transform:scale(5); /* Safari 和 Chrome */ 27 -o-transform:scale(5); /* Opera */ 28 }
14-18行; 23-27行关键代码.
方法二. 鼠标点击的时候, 变大. 利用css属性
1-
如果定义的class 使用的 放大:
1 .transformImg { 2 transform: scale(4); 3 -ms-transform:scale(4); 4 -moz-transform:scale(4); 5 -webkit-transform:scale(4); 6 -o-transform:scale(4); 7 width: 600px; 8 height: 450px; 9 position: absolute; 10 top: 30px; 11 left: 30px; 12 }
如果定义的class使用的是 设置 宽 和高.
1 .kecheng_02_cell_content .transformImg { 2 3 width: 600px; 4 height: 450px; 5 position: absolute; 6 top: 30px; 7 left: 30px; 8 }
那么 .transformImg 前面必须指明位置.
2-: js
1 2 //给课程介绍中的图片 委托事件: 3 $(".leftDiv2").on('click', '.kecheng_02 img', function(event) { 4 // event.preventDefault(); 5 $(this).siblings('img').removeClass('transformImg'); 6 $(this).toggleClass('transformImg'); 7 8 9 10 11 });
方法三: 设置一个弹出的div. 进行固定定位, 然后将img的地址放入.
注意: 固定定位弹出层比较好. 对于页面超出 一个 浏览器宽度的图片,点击的话, 如果使用绝对定位, 放大后的图片就有可能被滚动条覆盖了.
------------
1. 弹出层.
1 <!-- 弹出图片,放大显示 --> 2 <div style="position:fixed;display:none;" id="alertImg"> 3 4 </div>
2. 给 img 绑定委托事件, 更换 弹出层中的内容.
1 2 //给课程介绍中的图片 委托事件: 3 $(".leftDiv2").on('click', '.kecheng_02 img', function(event) { 4 // event.preventDefault(); 5 //$(this).siblings('img').removeClass('transformImg'); 6 //$(this).toggleClass('transformImg'); 7 // $(this).css() 8 // 9 document.getElementById("alertImg").style.display="block"; 10 document.getElementById("alertImg").innerHTML = "<div onclick='closePic();'><img src='"+$(this).attr("src")+"' width='800px' height='600px'/></div>"; 11 12 var w= document.documentElement.clientWidth || document.body.clientWidth; 13 var pic_w = (w-800) /2; 14 document.getElementById("alertImg").style.top="100px"; 15 document.getElementById("alertImg").style.left= pic_w+"px"; 16 17 18 });
var w= document.documentElement.clientWidth || document.body.clientWidth; 兼容写法,兼容多种浏览器.
参考: 浏览器窗口可视区域大小
3. 关闭弹出层div 的方法.
1 function closePic(){ 2 document.getElementById("alertImg").style.display="none"; 3 }