点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大:
方法一: 利用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属性
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的更多相关文章
- css 鼠标移动到按钮图片改变;图片换层;鼠标放上透明度改变直到隐藏;
css 鼠标移动到按钮图片改变: 方法一: <style> .pp a { width:575px; height:157px; background:url(1.jpg);/*图片地址* ...
- js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
- document.documentElement 和document.body 以及其属性
js中document.documentElement 和document.body 以及其属性 (原来HTML里是document.body --XHTML里是document.documentE ...
- document.documentElement和document.body 与document.compatMode的关系
首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compa ...
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...
- 【转】document.documentElement和document.body的区别
转自:http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 网页中获取滚动条卷去部分的高度,可以通过 document.body ...
- document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...
- Vue 框架-02-事件:点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({ //注意代码格式 //el:ele ...
随机推荐
- python的索引问题
之前自己在python索引中一直遇到这样的问题: data = np.arange(12).reshape((3,4)) print(data[:][0]) 想要索引第一列时总是索引到第一行,后来发现 ...
- Linux中磁盘mbr分区——实践篇
Linux中磁盘mbr分区——实践篇 fdisk命令 语法 fdisk(选项)(参数) 选项 -b <分区大小> 指定每个分区的大小 -l 列出分区表信息 -v 显示版本信息 参数 设备文 ...
- FileZilla 客户端连接 FlieZilla 服务器 连接成功读取目录列表却失败的解决办法
解决过程: 第一步: 第二步:
- 『计算机视觉』Mask-RCNN_锚框生成
Github地址:Mask_RCNN 『计算机视觉』Mask-RCNN_论文学习 『计算机视觉』Mask-RCNN_项目文档翻译 『计算机视觉』Mask-RCNN_推断网络其一:总览 『计算机视觉』M ...
- 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 ...
- 从线程模型的角度看Netty的高性能
转载:Netty(二) 从线程模型的角度看 Netty 为什么是高性能的? 传统 IO 在 Netty 以及 NIO 出现之前,我们写 IO 应用其实用的都是用 java.io.* 下所提供的包. 比 ...
- Ubuntu 下安装Go语言
https://blog.csdn.net/ceciiiilia/article/details/71483221 (一)从官网安装Go语言 1.对于64位Linux: $ wget https:// ...
- [IOS微信] PList文件解析,boost数据读取
最近在解析IOS版微信数据中的 mmsetting.archive 文件时,第一次接触到PList文件. 注:mmsetting.archive 不是一个标准的PList文件,其中含有汉字,并且很多 ...
- QuickStart系列:docker部署之MongoDB
MongoDB[1] 是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. MongoDB[2] 是一个介于关系数据库和非关系数据库之间的产品, ...
- ie浏览器get url返回404问题
昨晚同事说之前给的接口不能get方式的,直接在ie浏览器访问返回404,说明是参数有问题. 同样的接口使用curl和postman请求都正常,其他ie之外的浏览器也都正常响应. 记录下排查过程: 问题 ...