变大:
方法一: 利用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 bootstrap鼠标移到图片 放大
方法二. 鼠标点击的时候, 变大. 利用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
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 = "
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 }