北京治疗白癜风哪家医院最好 https://wapyyk.39.net/hospital/89ac7_knowledges.html-海说软件接受各种技术咨询及开发业务-
相信大家都有网上购过物吧，网上购物的时候，例如在淘宝：在某个商品的详情页面，当我们把鼠标放在商品上时，我们会看到在右边有个细节放大图。
是不是感觉一下就看的清清楚楚了啊，今天我们就来做一下这个效果。
首先，我们得先准备一台电脑，然后下载一个编译器，你也可以用记事本写，随你咯╮(╯▽╰)╭。啊，这些都是废话，我们跳过吧......我们真正需要的是两张图，一张小点的图作为商品图，一张大点的高清图作为商品细节图。
好，下面我们开始了，讲讲思路。
当鼠标放在商品图上时，我们需要得到需要放大的区域在商品图上的位置，首先算出它的left值，从图上我们可以很轻易地看出用红色线段（鼠标到窗口左边的距离）减去橙色线段（商品图到窗口左边的距离）再减去紫色线段（鼠标到需要放大的区域的距离，即需要放大的区域自身width/）就能得到left值。
然后我们会发现其实还有一个地方没有考虑到，就是滚动条。我们再把滚动条加入被减数中即可。
然后同理算出top值。就可以确定需要放大的区域的位置了。具体代码如下。
Demo.js代码：
HTML代码：
CSS代码：
海说软件会持续推出前端教学课程、技术干货。
往期课程：
前端知识
富文本编辑器React-draft-wysiwyg
Go语言学习心得
前端知识
浅谈懒加载，瀑布流和木桶布局
转载请注明地址:http://www.1xbbk.net/jwbrc/862.html
