鼠标不同方位移入特效
鼠标从不同方位进入到图片上显示的不同效果
1.html设置四张图片
-
.jpg)
春夏新品 上新无限
点击进入
-
.jpg)
夏装新品发布 8折起
点击进入
-
.jpg)
春装特惠 买二送一
点击进入
-
.jpg)
春夏新品 低至158
点击进入
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.整体代码
Sample054 - 鼠标不同方位移入特效
-
春夏新品 上新无限
点击进入
-
夏装新品发布 8折起
点击进入
-
春装特惠 买二送一
点击进入
-
春夏新品 低至158
点击进入
-
美洲野牛旗舰店
商务休闲新境界