<!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; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0; left: 0; cursor: move; display: none; } .small { position: relative; } img { vertical-align: top; } </style>
<script src="animate.js"></script> <script> window.onload = function () { //需求：鼠标放到小盒子上，让大盒子里面的图片和我们同步等比例移动。 //技术点：οnmοuseenter==onmouseover 第一个不冒泡 //技术点：οnmοuseleave==onmouseout 第一个不冒泡 //步骤： //1.鼠标放上去显示盒子，移开隐藏盒子。 //2.老三步和新五步（黄盒子跟随移动） //3.右侧的大图片，等比例移动。
//0.获取相关元素 var box = document.getElementsByClassName("box")[0]; var small = box.firstElementChild || box.firstChild; var big = box.children[1]; var mask = small.children[1]; var bigImg = big.children[0];
//1.鼠标放上去显示盒子，移开隐藏盒子。(为小盒子绑定事件) small.onmouseenter = function () { //封装好方法调用：显示元素 show(mask); show(big); } small.onmouseleave = function () { //封装好方法调用：隐藏元素 hide(mask); hide(big); }
//2.老三步和新五步（黄盒子跟随移动） //绑定的事件是onmousemove，而事件源是small(只要在小盒子上移动1像素，黄盒子也要跟随) small.onmousemove = function (event) { //想移动黄盒子，必须知道鼠标在small中的位置。x作为mask的left值，y作mask的top值。 //新五步 event = event || window.event; var pagex = event.pageX || scroll().left + event.clientX; var pagey = event.pageY || scroll().top + event.clientY; //让鼠标在黄盒子最中间，减去黄盒子宽高的一半 var x = pagex - box.offsetLeft - mask.offsetWidth/2; var y = pagey - box.offsetTop - mask.offsetHeight/2; //限制换盒子的范围 //left取值为大于0，小盒子的宽-mask的宽。 if(x<0){ x = 0; } if(x>small.offsetWidth-mask.offsetWidth){ x = small.offsetWidth-mask.offsetWidth; } //top同理。 if(y<0){ y = 0; } if(y>small.offsetHeight-mask.offsetHeight){ y = small.offsetHeight-mask.offsetHeight; } //移动黄盒子 console.log(small.offsetHeight); mask.style.left = x + "px"; mask.style.top = y + "px";
//3.右侧的大图片，等比例移动。 //如何移动大图片？等比例移动。 // 大图片/大盒子 = 小图片/mask盒子 // 大图片走的距离/mask走的距离 = （大图片-大盒子）/（小图片-黄盒子） // var bili = (bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
//大图片走的距离/mask盒子都的距离 = 大图片/小图片 var bili = bigImg.offsetWidth/small.offsetWidth;
var xx = bili*x; var yy = bili*y;
bigImg.style.marginTop = -yy+"px"; bigImg.style.marginLeft = -xx+"px"; }
} </script> </head> <body> <div class="box"> <div class="small"> <img src="images/001.jpg" alt=""/> <div class="mask"></div> </div> <div class="big"> <img src="images/0001.jpg" alt=""/> </div> </div> </body> </html>
// js代码
//显示和隐藏 function show(ele){ ele.style.display = "block"; } function hide(ele){ ele.style.display = "none"; }
//缓动动画封装 function animate(ele,target) { clearInterval(ele.timer); ele.timer = setInterval(function () { var step = (target-ele.offsetTop)/10; step = step>0?Math.ceil(step):Math.floor(step); ele.style.top = ele.offsetTop + step + "px"; console.log(1); if(Math.abs(target-ele.offsetTop)<Math.abs(step)){ ele.style.top = target + "px"; clearInterval(ele.timer); } },25); } /** * Created by andy on 2015/12/8. */ function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset != null) { // ie9+ 高版本浏览器 // 因为 window.pageYOffset 默认的是 0 所以这里需要判断 return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode === "CSS1Compat") { // 标准浏览器 来判断有没有声明DTD return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 未声明 DTD left: document.body.scrollLeft, top: document.body.scrollTop } } /** * Created by Lenovo on 2016/9/2. */ /** * 通过传递不同的参数获取不同的元素 * @param str * @returns {*} */ function $(str){ var str1 = str.charAt(0); if(str1==="#"){ return document.getElementById(str.slice(1)); }else if(str1 === "."){ return document.getElementsByClassName(str.slice(1)); }else{ return document.getElementsByTagName(str); } }
/** * 功能：给定元素查找他的第一个元素子节点，并返回 * @param ele * @returns {Element|*|Node} */ function getFirstNode(ele){ var node = ele.firstElementChild || ele.firstChild; return node; }
/** * 功能：给定元素查找他的最后一个元素子节点，并返回 * @param ele * @returns {Element|*|Node} */ function getLastNode(ele){ return ele.lastElementChild || ele.lastChild; }
/** * 功能：给定元素查找他的下一个元素兄弟节点，并返回 * @param ele * @returns {Element|*|Node} */ function getNextNode(ele){ return ele.nextElementSibling || ele.nextSibling; }
/** * 功能：给定元素查找他的上一个兄弟元素节点，并返回 * @param ele * @returns {Element|*|Node} */ function getPrevNode(ele){ return ele.previousElementSibling || ele.previousSibling; }
/** * 功能：给定元素和索引值查找指定索引值的兄弟元素节点，并返回 * @param ele 元素节点 * @param index 索引值 * @returns {*|HTMLElement} */ function getEleOfIndex(ele,index){ return ele.parentNode.children[index]; }
/** * 功能：给定元素查找他的所有兄弟元素，并返回数组 * @param ele * @returns {Array} */ function getAllSiblings(ele){ //定义一个新数组，装所有的兄弟元素，将来返回 var newArr = []; var arr = ele.parentNode.children; for(var i=0;i<arr.length;i++){ //判断，如果不是传递过来的元素本身，那么添加到新数组中。 if(arr[i]!==ele){ newArr.push(arr[i]); } } return newArr; }
