放大镜效果需求:

鼠标放入原图中,会出现一个黄色的遮盖层和一个放大的图片,鼠标移动时候,遮盖层会跟着鼠标一起移动,同时放大的图片会跟着一起移动。

实现过程:

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--淘宝页面的放大镜效果的更多相关文章

  1. js原生淘宝京东宝贝放大镜效果

    js实现商城放大镜效果 效果: 鼠标放上去会有半透明遮罩.右边会有大图片局部图. 鼠标移动时右边的大图片也会局部移动. 技术点: Event Event 是一个事件对象,当一个事件发生后,和当前事件发 ...

  2. jquery仿淘宝规格颜色选择效果

    jquery实现的仿淘宝规格颜色选择效果源代码如下 jquery仿淘宝规格颜色选择效果 -收缩HTML代码 运行代码 [如果运行无效果,请自行将源代码保存为html文件运行] <script t ...

  3. selenium+python自动化84-chrome手机wap模式(登录淘宝页面)

    前言 chrome手机wap模式登录淘宝页面,点击验证码无效问题解决. 切换到wap模式,使用TouchActions模块用tap方法触摸 我的环境 chrome 62 chromedriver 2. ...

  4. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

  5. 使用CURL抓取淘宝页面

    /** * 根据地址抓取淘宝页面html代码 * @param type $url 地址 * @return boolean */ public function getTaoBaoHtml($url ...

  6. Android:实现仿 美团/淘宝 多级分类菜单效果

    本例要实现的是诸如美团/淘宝/百度糯米 多级分类菜单效果.当分类数量许多时能够考虑採用两级分类.而诸如美团这样的表现方式是一个不错的选择. 首先上效果图:      主要代码: 1. PopupWin ...

  7. C#编写Windows服务程序 (服务端),client使用 消息队列 实现淘宝 订单全链路效果

    需求: 针对 淘宝提出的 订单全链路 产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...

  8. JavaScript图形实例:图形放大镜效果

    1. 基本四瓣花型图案 根据四瓣花卉线的参数方程: t= r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*cos(θ)); y=t*sin(θ)); 编写如下的HTML ...

  9. 用HTML编写淘宝页面

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

随机推荐

  1. 【转载】图解MySQL MSI方式安装方法

    ********************************** 后来发现图片是百度的被封了.有空再换下吧. 一般百度经验这样的链接是不会失效的,大家可以百度查看. *************** ...

  2. linux环境下 mysql数据库忘记密码 处理办法

    整个修改过程大概3-10分钟(看个人操作),这个时间内mysql出于不需要密码就能登陆的状态,请设法保证系统安全 不罗嗦直接上步骤 1.vi /etc/my.cnf 在[mysqld]下,添加一句:s ...

  3. Python进阶篇四:Python文件和流

    摘要: Python对于文件和流的操作与其他编程语言基本差不多,甚至语句上比其他语言更为简洁.文件和流函数针对的对象除了这两者之外还有,类文件(file-like),即python中只支持读却不支持写 ...

  4. java 实现二叉树结构基本运算详细代码

    static final int MAXLEN = 20; //最大长度 class CBTType //定义二叉树节点类型 { String data; //元素数据 CBTType left; / ...

  5. Android应用开发详解

    目录结构 1.Android概述 2.Android开发基础 未完待续……

  6. 任务六:通过HTML及CSS模拟报纸排版

    任务目的 深入掌握CSS中的字体.背景.颜色等属性的设置 进一步练习CSS布局 任务描述 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致 页面中的各字体大小, ...

  7. JDBC操作数据库的基本步骤:

    JDBC操作数据库的基本步骤: 1)加载(注册)数据库驱动(到JVM). 2)建立(获取)数据库连接. 3)创建(获取)数据库操作对象. 4)定义操作的SQL语句. 5)执行数据库操作. 6)获取并操 ...

  8. 为什么使用中间件下载时总是收到警告消息Object is in status Wait

    在使用中间件从ERP下载对象时,正常情况下应该看到如下提示消息: 然而有时遇到的是黄色的警告消息:Object is in status Wait. 如何自己排错呢?在函数SMOF0_INIT_DNL ...

  9. ubuntu桌面

    gnome-desktop-item-edit ~/Desktop/  --create-new

  10. 【[ZJOI2014]力】

    题目 好神仙啊 \[F_{j}=\sum_{i<j}\frac{q_iq_j}{(i-j)^2}-\sum_{j<i}\frac{q_iq_j}{(i-j)^2}\] 求\(\frac{F ...