变大:

方法一: 利用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";
}

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

  1. css 鼠标移动到按钮图片改变;图片换层;鼠标放上透明度改变直到隐藏;

    css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...

  2. js中document.documentElement 和document.body 以及其属性 clientWidth等

    在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...

  3. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  4. document.documentElement 和document.body 以及其属性

    js中document.documentElement 和document.body 以及其属性 (原来HTML里是document.body  --XHTML里是document.documentE ...

  5. document.documentElement和document.body 与document.compatMode的关系

    首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compa ...

  6. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

  7. 【转】document.documentElement和document.body的区别

    转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...

  8. document.documentElement和document.body的区别

    网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...

  9. Vue 框架-02-事件:点击, 双击事件,鼠标移上事件

    Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({ //注意代码格式 //el:ele ...

随机推荐

  1. python的索引问题

    之前自己在python索引中一直遇到这样的问题: data = np.arange(12).reshape((3,4)) print(data[:][0]) 想要索引第一列时总是索引到第一行,后来发现 ...

  2. Linux中磁盘mbr分区——实践篇

    Linux中磁盘mbr分区——实践篇 fdisk命令 语法 fdisk(选项)(参数) 选项 -b <分区大小> 指定每个分区的大小 -l 列出分区表信息 -v 显示版本信息 参数 设备文 ...

  3. FileZilla 客户端连接 FlieZilla 服务器 连接成功读取目录列表却失败的解决办法

    解决过程: 第一步: 第二步:

  4. 『计算机视觉』Mask-RCNN_锚框生成

    Github地址:Mask_RCNN 『计算机视觉』Mask-RCNN_论文学习 『计算机视觉』Mask-RCNN_项目文档翻译 『计算机视觉』Mask-RCNN_推断网络其一:总览 『计算机视觉』M ...

  5. leetcode-algorithms-23 Merge k Sorted Lists

    leetcode-algorithms-23 Merge k Sorted Lists Merge k sorted linked lists and return it as one sorted ...

  6. 从线程模型的角度看Netty的高性能

    转载:Netty(二) 从线程模型的角度看 Netty 为什么是高性能的? 传统 IO 在 Netty 以及 NIO 出现之前,我们写 IO 应用其实用的都是用 java.io.* 下所提供的包. 比 ...

  7. Ubuntu 下安装Go语言

    https://blog.csdn.net/ceciiiilia/article/details/71483221 (一)从官网安装Go语言 1.对于64位Linux: $ wget https:// ...

  8. [IOS微信] PList文件解析,boost数据读取

    最近在解析IOS版微信数据中的 mmsetting.archive 文件时,第一次接触到PList文件. 注:mmsetting.archive  不是一个标准的PList文件,其中含有汉字,并且很多 ...

  9. QuickStart系列:docker部署之MongoDB

    MongoDB[1]  是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB[2]  是一个介于关系数据库和非关系数据库之间的产品, ...

  10. ie浏览器get url返回404问题

    昨晚同事说之前给的接口不能get方式的,直接在ie浏览器访问返回404,说明是参数有问题. 同样的接口使用curl和postman请求都正常,其他ie之外的浏览器也都正常响应. 记录下排查过程: 问题 ...