鼠标从不同方位进入到图片上显示的不同效果
1.html设置四张图片
<div id="wrap"> <ul> <li> <img src="./img/1 (2).jpg"" /> <div class='cover'> <p class='p1'>春夏新品 上新无限</p> <p>点击进入</p> </div> </li> <li> <img src=" ./img/2 (2).jpg" alt="" /> <div class='cover'> <p class='p1'>夏装新品发布 8折起</p> <p>点击进入</p> </div> </li> <li> <img src="./img/3 (2).jpg" alt="" /> <div class='cover'> <p class='p1'>春装特惠 买二送一</p> <p>点击进入</p> </div> </li> <li> <img src="./img/4 (2).jpg" alt="" /> <div class='cover'> <p class='p1'>春夏新品 低至158</p> <p>点击进入</p> </div> </li> </ul> </div>
2.css设置居中对齐
/* 初始化CSS样式 */ * { margin: 0; padding: 0; } /* 设置页面居中靠上 */ #wrap { width: 1200px; height: 360px; margin: 100px auto; } /* 设置页面排序 */ #wrap ul li { width: 230px; height: 360px; float: left; list-style: none; margin-right: 12px; position: relative; overflow: hidden; }
3.设置移入显示字体样式
/* 鼠标移动到ul、li上显示的字体样式 */ #wrap ul li .cover p { font-size: 14px; font-family: 'Microsoft yahei'; color: #fff; text-align: center; } /* 鼠标移动到ul、li上字体的内边距 */ #wrap ul li .cover p.p1 { padding-top: 160px; }
4.设置移入后显示的背景样式
/* 图片显示 */ #wrap ul li img { display: block; } /* 鼠标移动到ul、li上显示图片 */ #wrap ul li .cover { width: 230px; height: 360px; position: absolute; top: 0px; left: 230px; background: url(../img/new-bg.png); }
5.JS中获取所有ul、li标签，设置li的hover效果
(function() { // 获取整个页面中的ul li标签 let $li = $('#wrap ul li'); // 设置li标签的hover效果 $li.hover(function(ev) { move.call(this, ev, true); }, function(ev) { move.call(this, ev, false); });
6.设置移动的函数
// 设置移动函数 function move(ev, bool) { // 获取当前元素top的值 let top = $(this).offset().top; // 获取当前元素bottom的值 let bottom = top + $(this).height(); // 获取当前元素left的值 let left = $(this).offset().left; // 获取当前元素right的值 let right = left + $(this).width(); // 设置鼠标返回的位置 let x = ev.pageX, y = ev.pageY; // 设置鼠标返回后上下左右的值 let sT = Math.abs(y - top), sB = Math.abs(y - bottom), sL = Math.abs(x - left), sR = Math.abs(x - right); // 设置最小值 let a = Math.min(sT, sB, sL, sR);
7.设置停留不同位置的效果
// switch循环 switch (a) { // 鼠标移到st上部时 case sT: // 如果当前元素的cover为left0，top-360，则停止动画， if (bool) { $(this).find('.cover').css({ left: 0, top: '-360px' }).stop().animate({ top: 0 }, 200); // 否则将top设为-360px } else { $(this).find('.cover').stop().animate({ top: '-360px' }, 200); } break; // 鼠标移到底部时 case sB: // 如果当前值为left0，top360px，则停止动画。 if (bool) { $(this).find('.cover').css({ left: 0, top: '360px' }).stop().animate({ top: 0 }, 200); // 否则停止动画，停留在top360px位置 } else { $(this).find('.cover').stop().animate({ top: '360px' }, 200); } break; // 当鼠标移动到左侧时 case sL: if (bool) { // 当前值为top0，left-230px时，停止动画 $(this).find('.cover').css({ top: 0, left: '-230px' }).stop().animate({ left: 0 }, 200); // 否则停止动画，停留在left-230px位置 } else { $(this).find('.cover').stop().animate({ left: '-230px' }, 200); } break; // 当鼠标停在右侧时 case sR: if (bool) { // 当前值为top0，left230px时，停止动画 $(this).find('.cover').css({ top: 0, left: '230px' }).stop().animate({ left: 0 }, 200); // 佛足额停止动画，停留在left230px位置 } else { $(this).find('.cover').stop().animate({ left: '230px' }, 200); } break; } }; })();
8.整体代码
<!DOCTYPE HTML> <html> <head> <title>Sample054 - 鼠标不同方位移入特效</title> <meta charset="utf-8"> <style type='text/css'> * { margin: 0; padding: 0; } #wrap { width: 1200px; height: 360px; margin: 100px auto; } #wrap ul li { width: 230px; height: 360px; float: left; list-style: none; margin-right: 12px; position: relative; overflow: hidden; } #wrap ul li img { display: block; } #wrap ul li .cover { width: 230px; height: 360px; position: absolute; top: 0px; left: 230px; background: url(img/new-bg.png); } #wrap ul li .cover p { font-size: 14px; font-family: 'Microsoft yahei'; color: #fff; text-align: center; } #wrap ul li .cover p.p1 { padding-top: 160px; } </style> </head> <body> <div id="wrap"> <ul> <li> <img src="img/1.jpg" alt="" /> <div class='cover'> <p class='p1'>春夏新品 上新无限</p> <p>点击进入</p> </div> </li> <li> <img src="img/2.jpg" alt="" /> <div class='cover'> <p class='p1'>夏装新品发布 8折起</p> <p>点击进入</p> </div> </li> <li> <img src="img/3.jpg" alt="" /> <div class='cover'> <p class='p1'>春装特惠 买二送一</p> <p>点击进入</p> </div> </li> <li> <img src="img/4.jpg" alt="" /> <div class='cover'> <p class='p1'>春夏新品 低至158</p> <p>点击进入</p> </div> </li> <li style="margin-right:0px;"> <img src="img/5.jpg" alt="" /> <div class='cover'> <p class='p1'>美洲野牛旗舰店</p> <p>商务休闲新境界</p> </div> </li> </ul> </div> <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script> <script type="text/javascript"> (function() { var $li = $('#wrap ul li'); $li.hover(function(ev) { move.call(this, ev, true); }, function(ev) { move.call(this, ev, false); }); function move(ev, bool) { var top = $(this).offset().top; var bottom = top + $(this).height(); var left = $(this).offset().left; var right = left + $(this).width(); var x = ev.pageX, y = ev.pageY; var sT = Math.abs(y - top), sB = Math.abs(y - bottom), sL = Math.abs(x - left), sR = Math.abs(x - right); var a = Math.min(sT, sB, sL, sR); switch(a) { case sT: if(bool) { $(this).find('.cover').css({ left: 0, top: '-360px' }).stop().animate({ top: 0 }, 200); } else { $(this).find('.cover').stop().animate({ top: '-360px' }, 200); } break; case sB: if(bool) { $(this).find('.cover').css({ left: 0, top: '360px' }).stop().animate({ top: 0 }, 200); } else { $(this).find('.cover').stop().animate({ top: '360px' }, 200); } break; case sL: if(bool) { $(this).find('.cover').css({ top: 0, left: '-230px' }).stop().animate({ left: 0 }, 200); } else { $(this).find('.cover').stop().animate({ left: '-230px' }, 200); } break; case sR: if(bool) { $(this).find('.cover').css({ top: 0, left: '230px' }).stop().animate({ left: 0 }, 200); } else { $(this).find('.cover').stop().animate({ left: '230px' }, 200); } break; } //console.log( '距离顶部:'+sT+' 距离底部:'+sB+' 距离左边:'+sL+' 距离右边:'+sR ) }; })(); </script> </body> </html>
