javascript--淘宝页面的放大镜效果
放大镜效果需求：
鼠标放入原图中，会出现一个黄色的遮盖层和一个放大的图片，鼠标移动时候，遮盖层会跟着鼠标一起移动，同时放大的图片会跟着一起移动。
实现过程：
1.鼠标移入，遮盖层和大图片显示
2.鼠标离开，遮盖层和大图片隐藏
3.鼠标移动的时候，遮盖层和鼠标对应移动
4.遮盖层移动时候，大图片跟着移动
效果图：
原图 放大镜效果图
实现思路：
一、通过设置display属性，让遮盖层和大图片显示（block）和隐藏（none）。
二、获取鼠标在装有的小图片的盒子中的位置，并将该值赋给遮盖层的style.top和style.left属性，即让遮盖层和鼠标移动中位置相等。
三、注意设置遮盖层不能超过小盒子边框。
四、遮盖层移动，让大盒子中的图片跟着移动，大盒子移动位置需要利用数学方法计算。遮盖层移动距离/遮盖层最大移动距离=大图片移动位置/大图片最大移动距离
注意知识点：
一、样式设置
①装大图片的盒子必须设置长宽，如果不设置，大图片不会显示。
②装大图片盒子必须设置overflow：hidden，如果不设置，大图片位置不会固定，在网页总乱动。
③相对定位和绝对定位设置，遵循子绝父相
二、兼容性设置
①事件对象e的兼容性
②位置坐标的兼容性
③鼠标移入和鼠标移出兼容性
onmouseover \ onmouseout 和 onmouseenter \ onmouseleave，前一组对谷歌浏览器放心使用，但是在IE浏览器中会出现bug，起因是事件冒泡，所以选择后面一组。
上述两组事件在不触发事件冒泡的情况下表现是一样的，但是前一组会触发事件冒泡，后一组不会触发事件冒泡。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝放大镜效果</title> <style type="text/css">
*{
padding: 0px;
margin: 0px;
} .box{
margin: 100px;
width: 350px;
height: 350px;
position: relative;
border: solid 1px gray;
} .cover{
width: 150px;
height: 150px;
opacity: 0.3;
background-color: yellow;
position: absolute;
top: 0px;
left: 0px;
display: none;
} .big{
position: absolute;
top: 0px;
left: 360px;
display: none;
overflow: hidden;
height: 400px;
width: 400px;
} .big img{
position: absolute;
}
</style>
</head>
<body>
<!-- 一个大盒子，用以控制位置 -->
<div id="box" class="box">
<!-- 小图片盒子 -->
<div class="small">
<img src="data:images/small.jpg" width="350px">
<!-- 遮盖层 -->
<div class="cover"></div>
</div>
<!-- 大图片 -->
<div class="big">
<img src="data:images/big.jpg" width="600px">
</div>
</div> <script type="text/javascript">
// 1.获取需要操作的元素
var box=document.getElementById('box');
var smallBox=box.children[0];
var bigBox=box.children[1];
var cover=smallBox.children[1];
var bigImage=bigBox.children[0];
//2.鼠标移动进入小盒子,遮盖层和大图片出现
box.onmouseenter=function(){
cover.style.display="block";
bigBox.style.display="block";
}
//3.鼠标离开小盒子,遮盖层和大图片隐藏
box.onmouseleave=function(){
cover.style.display="none";
bigBox.style.display="none";
} //4.鼠标移动,遮盖层跟着移动,并且鼠标点位于遮盖层的中心位置
box.onmousemove=function(e){
e = e || window.event;
//实现思路:鼠标在盒子中的位置=鼠标在文档中位置-盒子位置
var mouse_in_documentX=e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);
var mouse_in_documentY=e.pageY || e.clientY+(document.documentElement.scrollTop || document.body.scrollTop);
//鼠标在盒子中的位置,就是遮盖层的位置
var mouse_in_boxX=mouse_in_documentX-box.offsetLeft;
var mouse_in_boxY=mouse_in_documentY-box.offsetTop;
//让鼠标位于遮盖层的中央
var coverX=mouse_in_boxX - cover.offsetWidth/2 ;
var coverY=mouse_in_boxY - cover.offsetHeight/2;
//遮盖层不能超过小盒子范围
coverX= ( coverX < 0 ) ? 0 : coverX;
coverY= ( coverY < 0 ) ? 0 : coverY;
coverX=( coverX > ( box.offsetWidth - cover.offsetWidth)) ? ( box.offsetWidth - cover.offsetWidth) : coverX;
coverY=( coverY > ( box.offsetHeight - cover.offsetHeight)) ? ( box.offsetHeight - cover.offsetHeight) : coverY;
cover.style.top=coverY + 'px';
cover.style.left=coverX + 'px';
//当遮盖层移动的时候,大图片跟着遮盖层移动(比例关系换算问题)
//公式：遮盖层移动距离/遮盖层最大移动距离=大图片移动距离/大图片最大移动距离
//故:大图片移动距离=遮盖层移动距离/遮盖层最大移动距离*大图片最大移动距离 //遮盖层最大距离
var coverMax=box.offsetWidth-cover.offsetWidth;
//大图片最大移动距离
var bigImageMax=bigImage.offsetWidth-bigBox.offsetWidth; var bigImageX=coverX*bigImageMax/coverMax;
var bigImageY=coverY*bigImageMax/coverMax; bigImage.style.top=-bigImageY+'px';
bigImage.style.left=-bigImageX+'px';
}
</script>
</body>
</html>
javascript--淘宝页面的放大镜效果的更多相关文章
- js原生淘宝京东宝贝放大镜效果
js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...
- jquery仿淘宝规格颜色选择效果
jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...
- selenium+python自动化84-chrome手机wap模式（登录淘宝页面）
前言 chrome手机wap模式登录淘宝页面,点击验证码无效问题解决. 切换到wap模式,使用TouchActions模块用tap方法触摸 我的环境 chrome 62 chromedriver 2. ...
- 基于jQuery仿淘宝产品图片放大镜代码
今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...
- 使用CURL抓取淘宝页面
/** * 根据地址抓取淘宝页面html代码 * @param type $url 地址 * @return boolean */ public function getTaoBaoHtml($url ...
- Android：实现仿 美团/淘宝 多级分类菜单效果
本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量许多时能够考虑採用两级分类.而诸如美团这样的表现方式是一个不错的选择. 首先上效果图: 主要代码: 1. PopupWin ...
- C#编写Windows服务程序 (服务端),client使用 消息队列 实现淘宝 订单全链路效果
需求: 针对 淘宝提出的 订单全链路 产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...
- JavaScript图形实例：图形放大镜效果
1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...
- 用HTML编写淘宝页面
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
随机推荐
- setTimeout的实现原理以及setTimeout(0)的使用场景
先看一段代码: var start = new Date(); setTimeout(function(){ var end = new Date(); console.log("Tim ...
- 视觉库—OpenCV
视频会议软件的视频质量除了与外置设备.编码器相关外,还与视频的后处理技术相关,视频图像通过后处理技术,如图像增强.图像去噪等,图像质量会得到主观上较大的提高.而我们通常的视频后处理技术会采用开源的项目 ...
- mongodb 3.4 学习 (五）备份&恢复
备份恢复命令 mongodump -h 127.0.0.1 -p 27017 -o /opt/backup -u app -p '@app' --collection demo --db app -- ...
- SQL Server ->> 存储过程sp_rename重命名数据对象
1) 表转移Schema和重命名表 ALTER SCHEMA Stage TRANSFER dbo.Stage_AAA; EXEC sp_rename 'Stage.Stage_AAA', 'AAA' ...
- 30分钟LINQ教程 【转载】
原文地址:http://www.cnblogs.com/liulun/archive/2013/02/26/2909985.html 在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有 ...
- log4go的日志滚动处理——生产环境的适配
日志处理有三类使用环境,开发环境DE,测试环境TE,生产环境PE. 前两类可以看成是一类,重要的是屏幕显示--termlog.生产环境中主要用的是socklog 和 filelog,即网络传输日志和文 ...
- 每天一个linux命令（22）：tar命令
通过SSH访问服务器,难免会要用到压缩,解压缩,打包,解包等,这时候tar命令就是是必不可少的一个功能强大的工具.linux中最流行的tar是麻雀虽小,五脏俱全,功能强大. tar命令可以为linux ...
- HDU 2082 普通型母函数
分析: 组成单词好说,价值如何体现? 改变指数就行,例如: 这样,组成的单词,指数就是权值,多项式相乘,指数小于50的就OK: #include <bits/stdc++.h> using ...
- Catalan数列
引入 今天听学长讲了卡特兰数列后对其有了更深的认识,在此完善了一下之前的博客加以总结. 首先用一个经典的例子来描述一下Catalan数列,我们有一个1~n的数列和一个大小为n的栈,我们有如下两种操作: ...
- centos 6.6 下yum安装部署zabbix2.4所遇到web安装页面无法打开的问题
nginx配置zabbix下setup.php(web页面)无法显示,浏览器无法打开 1.检查系统是否安装nginx,以便解析html 已安装,安装方式为yum安装,可以解析其他页面 2.php没有完 ...