變大:
方法一: 利用css屬性. 鼠標放上 hover放大幾倍.
1 .kecheng_02_cell_content img { 2 /*width: 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 }