- <!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 || Windows.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
- }
- }
来源: http://www.bubuko.com/infodetail-3172429.html