使用js制作一个简单的产品放大图

　　购物网站的产品页经常会放有一个产品展示图区。该图区有一个功能就是产品图的放大功能，移动左侧的焦点区域，可以放大细节部分观看，详情如下图。实现该功能的方法也非常简单。

　　实验：制作产品焦点放大图。

　　所需技能：1、基本的获取页面元素的方法；

　　　　　　　2、几个简单的事件；

　　　　　　　3、会使用dom设置元素的属性；

　　案例原理：1、焦点框的跟随鼠标事件；

　　　　　　　2、焦点框的移动区域规定；

　　　　　　　3、大盒子内容的显示；

　　适合对象：js初学者

　　-------------------------------------------------------------------开始！-------------------------------------------------------------

　　一、首先我们准备CSS样式，CSS样式中需要注意的几个点是：

（1）焦点图相对定位，默认display：none；

（2）右侧显示大图的盒子（以下简称大图框）默认display：none；大图框中的内容在溢出盒子后要隐藏overflow：hidden；

　二、开始书写script代码：

（1）首先获取页面元素：

1 //首先或许要操作的元素2   function getId(tag){　　　　　　　　　　　　　　　　//定义一个用id获取元素的方法，减少很多工作量！3     return document.getElementById(tag)4   }5   var box=getId("box");6   var small=getId("small");7   var mask=getId("mask");8   var big=getId("big");9   var pic=big.children[0];　　　　　　　　　　　　　　//这里是通过节点的方法获取元素

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：用JS做一个简单的电商产品放大镜功能

关键词：JS