<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { width: 400px; height: 400px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .big img { position: absolute; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0px; left: 0px; cursor: move; display: none; } .small { position: relative; } </style> </head> <body> <div class="box" id="box"> <div class="small"> <img src="images/small.jpg" width="350" alt=""/> <div class="mask"></div> </div> <div class="big"> <img src="images/big.jpg" width="800" alt=""/> </div> </div> <script src="common.js"></script> <script> var box = my$('box'); var smallBox = box.children[0]; var bigBox = box.children[1]; var smallImage = smallBox.children[0]; var mask = smallBox.children[1]; var bigImage = bigBox.children[0]; // 1 鼠标经过的时候 显示 mask和bigBox ， 当鼠标离开box的时候隐藏mask和bigBox // // mouseenter mouseleave 不会触发事件冒泡 // mouseover mouseout 会触发事件冒泡 box.onmouseenter = function () { // 显示 mask和bigBox mask.style.display = 'block'; bigBox.style.display = 'block' } box.onmouseleave = function () { mask.style.display = 'none'; bigBox.style.display = 'none'; } // 2 当鼠标在盒子中移动的时候，让mask和鼠标一起移动 box.onmousemove = function (e) { e = e || window.event; // 获取鼠标在盒子中的位置，就是mask的坐标 var maskX = getPage(e).pageX - box.offsetLeft; var maskY = getPage(e).pageY - box.offsetTop; // 让鼠标出现在mask的中心点 maskX = maskX - mask.offsetWidth / 2; maskY = maskY - mask.offsetHeight / 2; // 把mask限制到box中 maskX = maskX < 0 ? 0 : maskX; maskY = maskY < 0 ? 0 : maskY; maskX = maskX > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : maskX; maskY = maskY > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight : maskY; mask.style.left = maskX + 'px'; mask.style.top = maskY + 'px'; // 3 当mask移动的时候，让大图片移动 // 求 大图片移动的距离 // mask移动的距离 / mask最大能够移动的距离 = 大图片移动的距离 / 大图片最大能够移动的距离 // mask最大能够移动的距离 var maskMax = box.offsetWidth - mask.offsetWidth; // 大图片最大能够移动的距离 var bigImageMax = bigImage.offsetWidth - bigBox.offsetWidth; var bigImageX = maskX * bigImageMax / maskMax; var bigImageY = maskY * bigImageMax / maskMax; bigImage.style.left = -bigImageX + 'px'; bigImage.style.top = -bigImageY + 'px'; } </script> </body> </html>
common中的代码
function my$(id) { return document.getElementById(id); } // 处理浏览器兼容性 // 获取第一个子元素 function getFirstElementChild(element) { var node, nodes = element.childNodes, i = 0; while (node = nodes[i++]) { if (node.nodeType === 1) { return node; } } return null; } // 处理浏览器兼容性 // 获取下一个兄弟元素 function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; } // 处理innerText和textContent的兼容性问题 // 设置标签之间的内容 function setInnerText(element, content) { // 判断当前浏览器是否支持 innerText if (typeof element.innerText === 'string') { element.innerText = content; } else { element.textContent = content; } } // 处理注册事件的兼容性问题 // eventName, 不带on， click mouseover mouseout function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持addEventListener 方法 if (element.addEventListener) { element.addEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.attachEvent) { element.attachEvent('on' + eventName, fn); } else { // 相当于 element.onclick = fn; element['on' + eventName] = fn; } } // 处理移除事件的兼容性处理 function removeEventListener(element, eventName, fn) { if (element.removeEventListener) { element.removeEventListener(eventName, fn); } else if (element.detachEvent) { element.detachEvent('on' + eventName, fn); } else { element['on' + eventName] = null; } } // 获取页面滚动距离的浏览器兼容性问题 // 获取页面滚动出去的距离 function getScroll() { var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; return { scrollLeft: scrollLeft, scrollTop: scrollTop } } // 获取鼠标在页面的位置，处理浏览器兼容性 function getPage(e) { var pageX = e.pageX || e.clientX + getScroll().scrollLeft; var pageY = e.pageY || e.clientY + getScroll().scrollTop; return { pageX: pageX, pageY: pageY } } //格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式 function formatDate(date) { // 判断参数date是否是日期对象 // instanceof instance 实例(对象) of 的 // console.log(date instanceof Date); if (!(date instanceof Date)) { console.error('date不是日期对象') return; } var year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours(), minute = date.getMinutes(), second = date.getSeconds(); month = month < 10 ? '0' + month : month; day = day < 10 ? '0' + day : day; hour = hour < 10 ? '0' + hour : hour; minute = minute < 10 ? '0' + minute : minute; second = second < 10 ? '0' + second : second; return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; } // 获取两个日期的时间差 function getInterval(start, end) { // 两个日期对象，相差的毫秒数 var interval = end - start; // 求 相差的天数/小时数/分钟数/秒数 var day, hour, minute, second; // 两个日期对象，相差的秒数 // interval = interval / 1000; interval /= 1000; day = Math.round(interval / 60 / 60 / 24); hour = Math.round(interval / 60 / 60 % 24); minute = Math.round(interval / 60 % 60); second = Math.round(interval % 60); return { day: day, hour: hour, minute: minute, second: second } }