资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

利用原生js编写一个放大镜功能-创新互联

本篇文章为大家展示了利用原生js编写一个放大镜功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网页空间、营销软件、网站建设、子长网站维护、网站推广。

1. 查找元素


 1.1 查找 main 总分区
 1.2 查找 small 盒子
 1.3 查找 small 盒子内的 img 小图片
 1.4 查找 mask 遮罩层
 1.5 查找 big 盒子
 1.6 查找 big 盒子内的 img 大图片


2. 鼠标移入 main 的时候

 2.1 显示 遮罩盒子
 2.2 显示 大图分区


3. 鼠标移出 main 的时候

 3.1 隐藏 遮罩盒子
 3.2 隐藏 大图分区


4. 鼠标在 main 移动的时候 !!!

 4.1 遮罩盒子 跟随 鼠标移动
 4.2 遮罩盒子 在 鼠标中心 处理
 4.3 遮罩盒子 在 分区边界 内移动处理
 4.4 大图片 <反向> <按比例> 跟随 鼠标移动


 注意.获取元素偏移值和宽高

 1. 获取 分区 的 水平,垂直偏移值
 2. 获取 分区 的 宽度,高度
 3. 获取 遮罩盒子 的 宽度,高度 (隐藏的盒子无法获取宽高)
 4. 获取 大图片 的 宽度,高度 (隐藏的盒子无法获取宽高)


html代码:


 
 

本文名称:利用原生js编写一个放大镜功能-创新互联
网址分享:http://cdkjz.cn/article/ddeodo.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220