Javascript特效：电商商品展示放大镜
2024-05-11 00:40:51
知识点
- 使用children获取字标签组
- 求当前鼠标坐标
- 碰撞检测
- 大小盒子通过比例同步
运行效果
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;list-style: none;border: none;}#box {width: 350px;height: 350px;margin: 100px 0 0 100px;position: relative;}#box > #small_box {height: 100%;width: 100%;border: 1px solid #cccccc;box-sizing: border-box;position: relative;}#box > #small_box > img {height: 100%;width: 100%;}#box > #small_box > #mask {width: 100px;height: 100px;background-color: rgba(255, 255, 0, .4);position: absolute;left: 0;top: 0;cursor: move;/*隐藏*/display: none;}#box > #big_box {height: 600px;width: 600px;border: 1px solid #cccccc;position: absolute;left: 360px;top: 0;overflow: hidden;display: none;}#box > #big_box > img{position: absolute;left: 0;top: 0;}#list {margin: 20px 0 0 100px;}#list ul li {float: left;margin: 5px;cursor: pointer;}</style>
</head>
<body>
<div id="box"><div id="small_box"><img src="data:images/pic001.jpg" alt=""><span id="mask"></span></div><div id="big_box"><img src="data:images/pic01.jpg" alt=""></div>
</div>
<div id="list"><ul><li><img src="data:images/pic0001.jpg" alt=""></li><li><img src="data:images/pic0002.jpg" alt=""></li><li><img src="data:images/pic0003.jpg" alt=""></li><li><img src="data:images/pic0004.jpg" alt=""></li></ul>
</div>
<script src="../../MyTools/MyTools.js"></script>
<script>window.addEventListener('load', function (ev) {// 1. 获取标签var box = myTools.$('box'), s_box = box.children[0], b_box = box.children[1], mask = s_box.children[1];var list_Lis = myTools.$('list').getElementsByTagName('li');b_img = b_box.children[0];// 2. 监听鼠标进入小盒子s_box.addEventListener('mouseover', function (evt) {// 2.1 显示隐藏内容mask.style.display = 'block';b_box.style.display = 'block';// 2.2 监听鼠标移动s_box.addEventListener('mousemove', function (evt1) {var e = evt1 || window.event;// 2.3 求出鼠标坐标var pointX = e.pageX - box.offsetLeft - mask.offsetWidth * 0.5;var pointY = e.pageY - box.offsetTop - mask.offsetHeight * 0.5;// 2.4 边界碰撞检测if (pointX < 0) {pointX = 0} else if (pointX >= s_box.offsetWidth - mask.offsetWidth - 2) {pointX = s_box.offsetWidth - mask.offsetWidth - 2;}if (pointY < 0) {pointY = 0} else if (pointY >= s_box.offsetHeight - mask.offsetHeight - 2) {pointY = s_box.offsetHeight - mask.offsetHeight - 2;}// 2.5 让放大镜走起来mask.style.left = pointX + 'px';mask.style.top = pointY + 'px';// 2.6 让大盒子中图片走起来/** smallX / bigX = sBox.width / bBox.width* bixX = smallX/(sBox.width / bBox.width)* */b_img.style.left = -pointX / (s_box.offsetWidth/b_box.offsetWidth) + 'px';b_img.style.top = -pointY / (s_box.offsetHeight/b_box.offsetHeight) + 'px';})});// 3. 监听鼠标离开小盒子s_box.addEventListener('mouseout', function (evt) {// 2.1 隐藏内容mask.style.display = 'none';b_box.style.display = 'none';});// 4. 监听鼠标点击li标签for (var i = 0; i < list_Lis.length; i++) {(function (i) {var li = list_Lis[i];li.addEventListener('mouseover',function (ev1) {s_box.children[0].src = 'images/pic0'+(i+1)+'.jpg';b_img.src = 'images/pic0'+(i+1)+'.jpg';});})(i);}});
</script>
</body>
</html>
Javascript特效：电商商品展示放大镜相关推荐
- HTML5期末大作业：爱折扣电商购物网站设计——清新爱折扣电商购物网站(5页) HTML+CSS+JavaScript 关于电商的HTML网页设计-----网购
HTML5期末大作业:爱折扣电商购物网站设计--清新爱折扣电商购物网站(5页) HTML+CSS+JavaScript 关于电商的HTML网页设计-----网购 常见网页设计作业题材有 个人. 美食. ...
- HTML5期末大作业：化妆品购物商城网站设计——电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品
HTML5期末大作业:化妆品购物商城网站设计--电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品 常见网页设计作业题材有 个人. 美食 ...
- html大作业网页代码 化妆品购物商城网站设计——电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品
HTML5期末大作业:化妆品购物商城网站设计--电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品 常见网页设计作业题材 文章目录 HT ...
- html在线商城购物网站制作——基于HTML+CSS+JavaScript鲜花礼品电商网站
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- 大二Web课程设计期末考试——基于HTML+CSS+JavaScript+jQuery电商类化妆品购物商城
常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
- 前端必学——用JavaScript实现电商图片放大镜效果（附代码）
目录 前言 代码思想及代码实现 效果图展示 整体思想 HTML部分 CSS部分 JavaScript部分 完整代码 总结 前言 放大镜可以说是前端人必须学会的程序之一!今天本美女就用京东距离为大家展示 ...
- javascript仿电商App选择地址
最近开发中遇到让用户选择所在区域的功能,参考了下京东.小米商城等App,发现里面选择收货地址的功能实现的效果不错,并且与需求相符,于是尝试用js参照app实现了. 效果图如下: 注意:浏览器查看时选择 ...
- 简易电商宝贝放大镜效果--jQuery
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 h ...
- HTML5响应式手机模板：电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 h ...
最新文章
- Spring中使用缓存时你应该知道的知识
- 第六十一天 how can I 坚持
- PHP的addslashes 函数详解
- Extjs4.1 vtype验证
- C# 模拟 Post
- 读C#开发实战1200例子记录-2017年8月14日10:03:55
- aws架构_如何使用AWS构建可扩展架构
- python开发视频大全_2019年python开发编程21天快速入门视频教程+书籍大全和面试大礼包...
- RabbbitMq Return 消息机制
- 南北非遗传承人齐聚北京 演绎非遗精巧
- [C++] - dynamic_cast介绍及工作原理、typeid、type_info
- linux查看电脑硬件信息,Linux下查看电脑硬件配置【转】
- SQL递归查询知多少
- 实现链表翻转的两种方法
- 南方cass简码识别大全_南方CASS简码成图的方法
- Chrome 里的小恐龙游戏是怎么做出来的？
- BLE Mesh中的Sequence number和IV Index
- Laravel Eloquent If Record Exists
- JavaScript 中的事件流和事件处理程序（读书笔记思维导图）
- java SSM 框架 多数据源