<p><strong class="ql-size-huge" style="color:rgb(230, 0, 0);">Style样式模块</strong></p><pre class="ql-syntax" spellcheck="false">&nbsp;&nbsp;&lt;style&gt; &nbsp;&nbsp;&nbsp;&nbsp;* { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#demo { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 800px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 400px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 50px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #ccc; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#small-box { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: relative; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index: 1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#float-box { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 160px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 120px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: #ffffcc; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #ccc; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter: alpha(opacity=50); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0.5; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#mark { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: block; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 800px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 400px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #fff; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter: alpha(opacity=0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index: 10; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#big-box { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: none; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: 860px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 400px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 300px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;overflow: hidden; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #ccc; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index: 1;; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;#big-box img { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position: absolute; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index: 5 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&lt;/style&gt; </pre><p><br></p><p><strong class="ql-size-huge" style="color:rgb(230, 0, 0);">javascript模块</strong></p><p><br></p><pre class="ql-syntax" spellcheck="false">&nbsp;&nbsp;&nbsp;&lt;script&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//页面加载完毕后执行 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload = function () { &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var objDemo = document.getElementById("demo"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var objSmallBox = document.getElementById("small-box"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var objMark = document.getElementById("mark"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var objFloatBox = document.getElementById("float-box"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var objBigBox = document.getElementById("big-box"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var objBigBoxImage = objBigBox.getElementsByTagName("img")[0]; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objMark.onmouseover = function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objFloatBox.style.display = "block" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objBigBox.style.display = "block" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objMark.onmouseout = function () { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objFloatBox.style.display = "none" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objBigBox.style.display = "none" &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objMark.onmousemove = function (ev) { &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var _event = ev || window.event;&nbsp;//兼容多个浏览器的event参数模式 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2; // console.log("left", left); // console.log("top", top); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//设置边界处理，防止移出小图片 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (left &lt; 0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left = 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (left &gt; (objMark.offsetWidth - objFloatBox.offsetWidth)) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left = objMark.offsetWidth - objFloatBox.offsetWidth; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (top &lt; 0) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top = 0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else if (top &gt; (objMark.offsetHeight - objFloatBox.offsetHeight)) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top = objMark.offsetHeight - objFloatBox.offsetHeight; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objFloatBox.style.left = left + "px";&nbsp;&nbsp;//oSmall.offsetLeft的值是相对什么而言 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objFloatBox.style.top = top + "px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//求其比值 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight); console.log('percentX', percentX); console.log('percentY', percentY); console.log("offsetWidth", objBigBoxImage.offsetWidth); console.log("offsetHeight", objBigBoxImage.offsetHeight); console.log("objBigBoxoffsetWidth", objBigBox.offsetWidth); console.log("objBigBoxoffsetHeight", objBigBox.offsetHeight); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//方向相反，小图片鼠标移动方向与大图片相反，故而是负值 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&lt;/script&gt; </pre><p><br></p><p><strong class="ql-size-huge" style="color:rgb(230, 0, 0);">HTML模块</strong></p><pre class="ql-syntax" spellcheck="false">&nbsp;&nbsp;&lt;div id="demo"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="small-box"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="mark"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="float-box"&gt;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img style="width:100%;" src="https://rd.test/media/catalog/product/1/_/1_47_13.jpg"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="big-box"&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src="https://rd.test/media/catalog/product/1/_/1_47_13.jpg"/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&lt;/div&gt; </pre>