JS案例-仿京东放大镜效果
需要实现的效果图如下:
①布局:布局采用一个大盒子里面首先分为上下两个部分,然后下部分又分为左右两个部分。左边的盒子里面放了一个img和一个遮罩层cover,右边盒子里面放的是800*800的大图片,这里提供左边的图片b3.png和右边的大图片big.jpg:
注意:左边盒子里面的cover采用绝对定位,右边盒子里面的img采用绝对定位。
②功能实现:主要有三个功能模块:
1.鼠标经过(mouseover)左边盒子,黄色的遮罩层以及右边盒子显示,鼠标离开(mouseout)则隐藏黄色遮罩层以及右边盒子。
2.黄色遮罩层跟随鼠标移动(mousemove)。鼠标在盒子的坐标=鼠标在页面的坐标-左边盒子在页面的坐标,但是又因为鼠标是在遮罩层的中间,所以最终的坐标要减去遮罩层一半的高度和宽度。注意这里有边界条件:就是黄色遮罩层的移动距离,黄色遮罩层的x方向的移动距离不能小于0且不能大于左边盒子宽度减去遮罩层的宽度。
3.移动黄色遮罩层,大图片跟随移动功能。大图片移动的距离根据下面这个公式来进行计算:
遮挡层的移动距离上一点已经算过了,遮罩层的最大移动距离上面也说了,剩下的就是大图片最大移动距离,大图片最大移动距离=图片的大小-右边盒子的大小。
最后全部代码如下:
html代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东放大镜效果</title><script src="../js/index.js"></script><style>* {margin: 0;padding: 0;}ul li {list-style: none;}/* 外面大盒子 */.container {box-sizing: border-box;width: 1200px;height: 500px;/* background-color: pink; */margin: 200px auto;}.container .topbox {width: 100%;height: 60px;/* background-color: violet; */border-bottom: 2px solid #bc2815;}.container .topbox ul {margin-left: 10px;}.container .topbox ul li {float: left;font-size: 22px;color: #4e535b;padding: 15px 20px;}.container .topbox ul li:hover {color: white;background-color: #bc2815;}.container .topbox ul li:first-child {color: white;background-color: #bc2815;}.container .bottombox .leftbox {float: left;height: 400px;width: 400px;/* background-color: violet; */margin-top: 10px;}.container .bottombox .leftbox ul {overflow: hidden;margin-left: 10px;}.container .bottombox .leftbox ul li {float: left;font-size: 14px;color: #4e535b;}.container .bottombox .leftbox .leftphone {position: relative;overflow: hidden;width: 400px;height: 400px;/* background-color: pink; */margin-top: 5px;margin-left: 10px;border: 1px solid #c8cbc8;}.leftbox .leftphone img {width: 100%;height: 100%;}.container .bottombox .leftbox .leftphone .cover {position: absolute;display: none;top: 0;left: 0;width: 220px;height: 220px;background-color: #ffeba2;opacity: 0.5;border: 1px solid #ccc;cursor: move;}.container .bottombox .rightbox {float: left;margin-top: 10px;width: 420px;height: 420px;margin-left: 20px;/* background-color: violet; */}.container .bottombox .rightbox {position: relative;display: none;border: 1px solid #ccc;overflow: hidden;}.container .bottombox .rightbox img {position: absolute;top: 0;left: 0;}</style>
</head><body><div class="container"><div class="topbox"><ul><li>全部商品分类</li><li>服装城</li><li>美妆馆</li><li>传智超市</li><li>全球购</li><li>闪购</li><li>团购</li><li>拍卖</li><li>有趣</li></ul></div><div class="bottombox"><div class="leftbox"><div class="leftnav"><ul><li>手机、数码、通讯 ></li><li>手机 ></li><li>Apple苹果 ></li><li>iphone 6S Plus系统 </li></ul><div class="leftphone"><img src="../b3.png" alt=""><div class="cover"></div></div></div></div><div class="rightbox"><img src="../big.jpg" alt="" class="big"></div></div></div>
</body></html>
外部js文件:
window.addEventListener('load', function() {// 获取元素var cover = this.document.querySelector('.cover');var leftphone = this.document.querySelector('.leftphone');var rightbox = this.document.querySelector('.rightbox');var big = this.document.querySelector('.big');// 鼠标移动到左边的手机上的时候遮罩层和右边的手机显示出来leftphone.addEventListener('mouseover', function() {cover.style.display = 'block'rightbox.style.display = 'block'})// 鼠标移离开到左边的手机上的时候遮罩层和右边的手机隐藏 leftphone.addEventListener('mouseout', function() {cover.style.display = 'none'rightbox.style.display = 'none'})leftphone.addEventListener('mousemove', function(e) {var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;// x的移动距离var totalx = x - cover.offsetWidth / 2;var totaly = y - cover.offsetHeight / 2if (totalx < 0) {totalx = 0;} else if (totalx >= leftphone.offsetWidth - cover.offsetWidth) {totalx = leftphone.offsetWidth - cover.offsetWidth;}if (totaly < 0) {totaly = 0;} else if (totaly >= leftphone.offsetHeight - cover.offsetHeight) {totaly = leftphone.offsetHeight - cover.offsetHeight;}cover.style.left = totalx + 'px';cover.style.top = totaly + 'px';// imgmaxx是图片最大x移动距离var imgmaxx = rightbox.offsetWidth - big.offsetWidth;var imgmaxy = rightbox.offsetHeight - big.offsetHeight;var imgmovex = totalx * imgmaxx / (leftphone.offsetWidth - cover.offsetWidth)var imgmovey = totaly * imgmaxy / (leftphone.offsetHeight - cover.offsetHeight)big.style.left = imgmovex + 'px';big.style.top = imgmovey + 'px';})
})
JS案例-仿京东放大镜效果相关推荐
- 仿京东放大镜效果的实现
仿京东放大镜 (1) 整个案例可以分为三个功能模块 (2) 鼠标经过小图片盒子, 绿色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能 (3)绿色的遮挡层跟随鼠标功能. (4)移动绿色遮挡层,大图片 ...
- b站pink老师JavaScript的PC端网页特效 案例代码——仿京东放大镜效果
目录 原理讲解: 代码段: 1. detail.html部分(重点在标红区) 2. detail.js部分(全部都是重点) 3. detail.css部分(重点在标红区) 4. base.css部分( ...
- 仿京东放大镜效果案例
01-detail.html <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
- 29 仿京东放大镜案例
1.仿京东放大镜案例 功能需求: 鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,鼠标一离开隐藏2个盒子功能 // 当页面全部加载完毕,因此需要load,执行里面的js代码 window.addEv ...
- vue版本的仿京东放大镜代码还有原生js版本的。(组件封装)
vue版本的仿京东放大镜 <template><div class="maxBox"><divref="left"class=&q ...
- JavaScript仿淘宝京东放大镜效果(鼠标事件)------JavaScript学习之路10
JavaScript仿淘宝京东放大镜效果 注意 一定计算好放大比例,本程序放大5倍,具体放大倍数,自定 效果 完整源码 <!DOCTYPE html> <html lang=&quo ...
- ajax仿百度搜索效果,利用autocomplete.js实现仿百度搜索效果(ajax动态获取后端[C#]数据)...
实现功能描述: 1.实现搜索框的智能提示 2.第二次浏览器缓存结果 3.实现仿百度搜索 * { margin: 0px; padding: 0px; } #wrapper { height: 100% ...
- js+css+html实现放大镜效果
js+css+html实现放大镜效果 1 案例描述 2 编写HTML代码 3 编写CSS代码 4 编写JavaScript代码 5 总代码 1 案例描述 在很多网页中,我们都能看到一个类似于放大镜的效 ...
- android高仿京东秒杀,Android通过实现GridView的横向滚动实现仿京东秒杀效果
实现GridView的横向滚动 效果如下图: 具体实现的代码 •1. 主界面布局代码:activity_main.xml android:layout_width="fill_parent& ...
最新文章
- 【组队学习】【24期】零基础入门语音识别(食物声音识别)
- 凡客诚品成都研发中心招聘.net开发经理
- RxJS之BehaviorSubject
- Django 使用 mysql 数据库连接
- 阻止事件冒泡两种方式:event.stopPropagation();和return false;
- sql server 2008新特性:资源调控器
- pip国内镜像源矩池云收集(2020年8月)
- vue3新增Teleport组件
- android助手专业版,安卓助手-安卓助手app专业版下载-安卓助手付费版-电玩咖
- 有限差分法及matlab实现,有限差分法与matlab实现
- TextView设置字体透明度或背景透明度
- 基于Spring-statemachine的有限状态机(FSM)的介绍及示例
- Android模拟器知识以及改造
- 多元微积分_旋度2.旋度公式推导
- 利用javascript实现表格数据自动从剪贴板录入
- C51模拟PS2键盘(三)
- 跟西乔一起开脑洞,预测AIGC的终极形态
- tf.train. string_input_producer QueueRunner add_queue_runner Coordinator start_queue_runners
- 在某个文件目录中打开cmd的方法及快速获取文件路径的方法
- Oracle建立表空间和用户
热门文章
- 很全的智力题答案-1
- 菜鸟顺丰掐架敲响个人信息保护警钟
- V4L2 常用控制命令。
- 计算机网络自上而下第六版答案,《计算机网络: 自顶向下方法》(第六版) 第一章习题...
- SD卡初始化以及命令详解
- 每日资源分享(彩虹外链PHP网盘V5.4更新 新增用户系统与分块上传)
- 【实战2】爬取豆瓣Top250电影的海报
- windows安装并配置apache https 网站 发布企业级iOS APP(enterprise)
- B47 - 基于51单片机的RFID停车计费系统
- 唯品会如何实现连续30个季度盈利?