判斷滑鼠移入方向
阿新 • • 發佈：2018-11-19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet"href="./css/index.css"> </head> <body> <div class="container wrap clearfix"> <ul class="clearfix"> <li class="outer"><img src="./img/timg4.jpg" alt=""> <div class="back"><img src="./img/cp1.jpg" alt=""></div> </li> <li class="outer"><img src="./img/timg5.jpg" alt=""> <div class="back"><img src="./img/cp2.jpg" alt=""></div> </li> <li class="outer"><img src="./img/timg6.jpg" alt=""> <div class="back"><img src="./img/cp3.jpg" alt=""></div> </li> <li class="outer"><img src="./img/timg7.jpg" alt=""> <div class="back"><img src="./img/cp4.jpg" alt=""></div> </li> <li class="outer"><img src="./img/timg8.jpg" alt=""> <div class="back"><img src="./img/cp5.jpg" alt=""></div> </li> <li class="outer"><img src="./img/timg9.jpg" alt=""> <div class="back"><img src="./img/cp6.jpg" alt=""></div> </li> </ul> </div> <script src="./js/index.js"></script> </body> </html>
*{ margin: 0; padding:0; list-style:none; } .wrap{ margin-top: 200px; width: 680px; } .wrap ul{ padding: 10px; } .wrap ul li{ position: relative; float: left; width: 200px; height: 200px; z-index: 1; margin: 10px; overflow: hidden; } .wrap ul li div{ position: absolute; top: 0px; left: 0px; width: 200px; z-index: -1; height: 200px; transition: transform 0.3s; transform-origin: left bottom; transform: rotateZ(-90deg); } .wrap ul img{ width: 100%; height: 100%; } .wrap ul li div.back_left{ transform: rotateZ(0deg); z-index: 2; } .wrap ul li div.back_right{ transform-origin: right top; transform: rotateZ(0deg); z-index: 2; } .wrap ul li div.back_top{ transform-origin: left top; transform: rotateZ(0deg); z-index: 2; } .wrap ul li div.back_bottom{ transform-origin: right bottom; transform: rotateZ(0deg); z-index: 2; } /* 去浮動 */ .clearfix::before, .clearfix::after{ content: "."; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } .clearfix::after{clear: both;} .clearfix{ *zoom: 1;/*IE/7/6 */ }
// 獲取滑鼠在頁面中的位置，處理瀏覽器相容性 function getPage(e) { var pageX = e.pageX || e.clientX + getScroll().scrollLeft; var pageY = e.pageY || e.clientY + getScroll().scrollTop; return { pageX: pageX, pageY: pageY } }; var wrap = document.getElementsByClassName('wrap')[0]; var oUl = wrap.getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); var newAli = Array.prototype.slice.call(aLi); newAli.forEach(function (index) { index.onmouseenter = direction ; }); function direction (e) { e = e || window.event; var x; var y; // 滑鼠位置是否小於當前li的一半，如果小於 用滑鼠位置減去li的位置，如果不小於，用滑鼠位置減去li位置再減去li的大小 // 當滑鼠經過li時，x軸y軸必有大小，最小的值就是滑鼠移入的方向 x = Math.abs(getPage(e).pageX - this.offsetLeft) > this.offsetWidth / 2 ? getPage(e).pageX - this.offsetLeft - this.offsetWidth : getPage(e).pageX - this.offsetLeft; y = Math.abs(getPage(e).pageY - this.offsetTop) > this.offsetHeight / 2 ? getPage(e).pageY - this.offsetTop - this.offsetHeight : getPage(e).pageY - this.offsetTop; var oDiv = this.getElementsByTagName('div')[0]; // 如果滑鼠x軸位置減去li的位置小於li寬度的一半，證明滑鼠位置在li的左側，此時比較x與y的大小，小的就是滑鼠移入的方向 if (Math.abs(getPage(e).pageX - this.offsetLeft) < this.offsetWidth / 2 && Math.abs(x) <= Math.abs(y)) { oDiv.classList.add('back_left'); } // 如果滑鼠x軸位置減去li位置大於li寬度的一半，證明滑鼠在li的右側，此時比較x與y的大小，小的就是滑鼠移入的方向 if (Math.abs(getPage(e).pageX - this.offsetLeft) > this.offsetWidth / 2 && Math.abs(x) <= Math.abs(y)) { oDiv.classList.add('back_right'); } // 如果滑鼠y軸位置減去li的位置大於li高度的一半，證明滑鼠在li的下方，此時比較x與y的大小，小的就是滑鼠移入的方向 if (Math.abs(getPage(e).pageY - this.offsetTop) > this.offsetHeight / 2 && Math.abs(x) >= Math.abs(y)) { oDiv.classList.add('back_bottom'); } // 如果滑鼠y軸位置減去li的位置小於li高度的一半，證明滑鼠在li的上方，此時比較x與y的大小，小的就是滑鼠移入的方向 if (Math.abs(getPage(e).pageY - this.offsetTop) < this.offsetHeight / 2 && Math.abs(x) >= Math.abs(y)) { oDiv.classList.add('back_top'); } this.onmouseleave = function () { oDiv.className = 'back'; } }