-
实验：制作产品的重点。
所需技能：
1，获取页面元素的基本方法；
2，一些简单的事件；
3，您将使用DOM来设置元素的属性；
判例原则：
1，焦点框跟随鼠标事件；
2。聚焦框运动区域的调节；
三.大箱子的内容展示；
适合对象：js初学者
-------------------------------------------------------------------开始！-------------------------------------------------------------
首先，我们首先准备CSS样式，CSS样式中需要注意的几个点是：
（1）焦点图是相对定位，默认显示：无；
（2）右侧显示大图的框是默认显示：无；大框中的内容应隐藏溢出：隐藏在溢出框之后。
两。开始编写脚本代码：
（1）首先获取页面元素：
元素的第一个操作可能是 /
函数getID（标签）{ / /定义与ID的方法访问元素，减少了很多工作！
返回document.getelementbyid（标签）
}
VaR箱= getID（盒子）；
VaR小= getID（小）；
VaR的面具= getID（面具）；
无功大= getID（大）；
var =大.子{ 0 }；这里是通过元素节点的方法
（2）很明显，鼠标上会出现两个移动到小图的事件：1）焦点框会出来；2）大画面应该显示出来，鼠标在两天后删除。
将鼠标移动到图片效果
小。onmouseover =函数（）{
掩码。样式；
大样式；
}
小。onmouseout=函数（）{
掩码样式；
大样式。
}
（3）设置焦点框的以下内容：
1）当焦点框定在任何时候，我们下面的时间是实际发生的，所以这里的事件类型是不是鼠标是鼠标移动时；
2）本代码涉及的问题主要是掩码（焦帧）的位置计算问题。这是容易被忽视的问题，面膜是相对于其位置移动。在我的CSS样式，面具是放在小盒子里，所以相对运动的位置必须是父元素，位置小，已定位，坐标位置，我从ClientX和clienty相对于浏览器窗口不能直接使用，所以我们必须推断的母盒边缘值的影响。
设置小图的焦点，跟随鼠标；
小。移动鼠标=功能（e）{
无功marginl = box.offsetleft； / /使用offsetleft方法获取框边离开
无功margint = box.offsettop； / /使用offsettop方法获取框边上
无功currentx = e.clientx；
VaR一般= e.clienty； / / e.clientx和e.clinety相对于浏览器的左上角
var x = currentx marginl面具。offsetwidth / 2；
var y =一般margint面具。offsetheight / / / 2；中心线使鼠标焦点框，还需要半减焦点框的宽度和高度
/ ----------------------这里同时插入其他代码 / / ---------------------------
掩码。样式；
掩码。样式。顶部=；改变该框的焦点位置。
（4）空闲焦点盒位置的移动
1）在最后一个阶段完成后，焦点帧的移动不是空闲的。在购物网站中，我们可以感觉到焦点框不允许小地图的外部造成坏的用户体验。
2）限制焦点帧的移动，主要是x，y的变化超过允许值时，给它一个固定值。
设置小图的焦点，跟随鼠标；
小。移动鼠标=功能（e）{
无功marginl = box.offsetleft；
无功margint = box.offsettop；
无功currentx = e.clientx；
目前e.clienty var =；
var x = currentx marginl面具。offsetwidth / 2；
var y =一般margint面具。offsetheight / 2；
将移动区域设置为焦点框
如果（x＜0）x＝0；}
如果（x >小。offsetwidth面具。offsetwidth）
{ x =小。offsetwidth面具。offsetwidth }； / / X的定位最小值是0，最大长度为Y轴的长度小面膜
如果（y＜0）{ = 0；}
如果（y >小。offsetheight面具。offsetheight）
{ y =小。offsetheight面具。offsetheight }；
掩码样式。左= X+；在移动区域中写掩码需要移动区域之后，请注意执行代码的顺序。
掩码。样式；
（5）设置大画面的显示。
1）要实现画面在大盒子中的运动，就要考虑到边值问题。
2）移动的距离可以使用固定比例乘以掩码的左和顶值。想想焦点区域左上角的位置和大图片框左上角的位置是一样的！！！这不是很难理解。
在显示设置中的大框内容
无功relativex = mask.offsetleft；
无功relativey = mask.offsettop；
无功proporationx =照片。offsetwidth / / / small.offsetwidth；规模
无功proporationy =照片。offsetheight / small.offsetwidth；
PIC。风格。marginleft = - relativex * proporationx +PX； / /注！边界值必须是负值，而PX不应该丢失。
PIC。风格。margintop = - relativey * proporationy +PX；
我们的演示是通过这个步骤完成的！这很简单吗
这里我将粘贴整个代码，希望能与大家讨论交流。
下面是CSS代码
{ *
保证金：0；
填充：0；
}
{ #盒
保证金：50px；
}
{ #小
宽度：229px；
身高：250px；
border: 1px solid黑；
文本对齐：中心；
职位：相对；
浮点数：左；
}
{ #面具
宽度：100px；
身高：100px；
背景颜色：RGBA（214, 111, 193，0.3）；
位置：绝对；
顶部：0；
左：0；
显示：*无；
}
{ #大
宽度：350px；
身高：350px；
border: 1px solid黑；
浮点数：左；
溢出：隐藏；
显示：*无；
}
这里是HTML
下面是js代码
元素的第一个操作可能是 /
函数getID（标签）{
返回document.getelementbyid（标签）
}
VaR箱= getID（盒子）；
VaR小= getID（小）；
VaR的面具= getID（面具）；
无功大= getID（大）；
var =大。儿童{ 0 }；
console.log（PIC）；
将鼠标移动到图片效果
小。onmouseover =函数（）{
掩码。样式；
大样式；
}
小。onmouseout=函数（）{
掩码样式；
大样式。
}
设置小图的焦点，跟随鼠标；
小。移动鼠标=功能（e）{
无功marginl = box.offsetleft；
无功margint = box.offsettop；
无功currentx = e.clientx；
目前e.clienty var =；
var x = currentx marginl面具。offsetwidth / 2；
var y =一般margint面具。offsetheight / 2；
将移动区域设置为焦点框
如果（x＜0）x＝0；}
如果（x >小。offsetwidth面具。offsetwidth）{ x =小。offsetwidth面具。offsetwidth }；
如果（y＜0）{ = 0；}
如果（y >小。offsetheight面具。offsetheight）{ y =小。offsetheight面具。offsetheight }；
掩码。样式；
掩码。样式；
在显示设置中的大框内容
无功relativex = mask.offsetleft；
无功relativey = mask.offsettop；
无功proporationx =照片。offsetwidth / small.offsetwidth；
无功proporationy =照片。offsetheight / small.offsetwidth；
PIC。风格。marginleft = - relativex * proporationx +PX；
PIC。风格。margintop = - relativey * proporationy +PX；
}
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。