javascript制作智能鼠标感知遮罩层，打造实用美食菜单
2018-02-04 本文已影响40人
烟雨丿丶蓝
web前端群，189394454，有视频、源码、学习方法等大量干货分享
知识点：div盒子模型, css常用标签讲解, 列表与浮动, 相对定位与绝对定位, 蒙版层实现原理, jQuery实现智能鼠标感知event对象 , 正确的布局习惯与编程思维。
👇html代码：
<div id="box">
<ul>
<li>
<img src="images/1.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>杏鲍菇培根卷</h2>
<p>给大家带来一道喜庆点的菜，杏鲍菇培根卷.美味的杏鲍菇和培根都是饕餮精品</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/2.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>牙签肉</h2>
<p>肉切合适大小的块，加生抽，盐，花椒粉用手抓匀，腌制30分钟。</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/3.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>豆腐卷</h2>
<p>方这边吃豆腐卷是很多的，对于自己来说，隔几天不吃就会馋得慌.</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/4.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>南瓜煲</h2>
<p>菜品特色，粥约会糯，味鲜咸清香，属 利尿食谱 老人食谱 糖尿病食谱 贫血食谱</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/5.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>皮蛋拌豆腐</h2>
<p>健康功效香菜：健胃、透疹、增强免疫力 豆腐：清热泻火、益气、解毒</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/6.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>红烧鲤鱼</h2>
<p>无论是海鱼还是淡水鱼,家常红烧的做法大同小异,本次用到的海鱼,叫不上名字,不是当地常见的海鱼.</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/7.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>红烧茄子</h2>
<p>烧茄子是我个人比较喜欢的一道菜,但每次做都很难做出餐馆里那种咸鲜回甜,酱香浓郁,色泽美观的烧茄子。</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/8.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>凉拌西蓝花</h2>
<p>凉拌西兰花灿灿烂烂,新的一周又开始了,迎着明媚的阳光,灿烂上菜菜啦!</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/1.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>杏鲍菇培根卷</h2>
<p>给大家带来一道喜庆点的菜，杏鲍菇培根卷.美味的杏鲍菇和培根都是饕餮精品</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/2.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>牙签肉</h2>
<p>肉切合适大小的块，加生抽，盐，花椒粉用手抓匀，腌制30分钟。</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/3.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>豆腐卷</h2>
<p>方这边吃豆腐卷是很多的，对于自己来说，隔几天不吃就会馋得慌.</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
<li>
<img src="images/4.jpg" width="164" height="220" alt="#">
<div class="text">
<h2>南瓜煲</h2>
<p>菜品特色，粥约会糯，味鲜咸清香，属 利尿食谱 老人食谱 糖尿病食谱 贫血食谱</p>
<span class="btn"><a href="http://web.tanzhouedu.com/" target="_blank">点击查看</a></span>
</div>
</li>
</ul>
</div>
👇css代码：
<style type='text/css'>
* { margin: 0; padding: 0; }
body { background-color: #434343; }
img { display: block; }
#box { box-shadow: 0 0 8px #ffffff; background-color: #222222; width: 800px; height: auto; margin: 50px auto; padding: 20px; overflow: hidden }
#box ul li { margin: 10px 15px; list-style: none; float: left; border: 2px solid #cccccc; position: relative; overflow: hidden; }
.text { width: 164px; height: 220px; position: absolute; background: #00b38a; left: 0px; top: -220px; background: url(images/new-bg.png); }
.text h2 { font-size: 24px; height: 24px; line-height: 24px; font-weight: bold; margin: 10px 8px 8px; font-weight: 400; text-align: center; color: #ffffff; padding-top: 30px; border-bottom: 1px dashed #ffffff; padding-bottom: 10px }
.text p { font-size: 14px; margin: 6px 8px; line-height: 18px; color: #ffffff; font-weight: 300;text-indent:2em; }
.text .btn { position: absolute; bottom: 5px; left: 0; right: 0; margin: auto; width: 58px; font-size: 14px; display: block; padding: 5px; background: #0ab5da; border-radius: 5px; line-height: 20px; cursor: pointer;box-shadow:0 0 8px 4px #08778F inset ,0 0 4px #08778f;}
.text .btn a { color: #fff7fb; font-size: 14px; text-decoration: none;text-align: center;}
</style>
👇javascript代码：
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
/*鼠标方位感知遮罩层 js*/
(function () {
/*获取 li */
var $Tz_li = $("#box ul li");
//li 鼠标移入事件 $.hover(function(){},funciton(){})
$Tz_li.hover(function (ev) {//鼠标移入
ev=ev||window.event; //兼容性
move.call(this, ev, true);
}, function (ev) {//鼠标移出
ev=ev||window.event;
move.call(this, ev, false);
});
/*事件函数 move*/
function move(ev, bool) {//参数 ev 鼠标对象 bool 区分移入移除
/*获取当前对象 顶部相对于当前文档的顶部的位置(top)/底部的相对位置(bottom)/左边相对于文档左侧的位置(left)/右边相对位置(right) */
var top = $(this).offset().top,
bottom = top + $(this).height(),
left = $(this).offset().left,
right = left + $(this).width();
/*获取当前鼠标的坐标位置 pageX:鼠标相对于整个页面的x坐标 pageY:鼠标相对于整个页面的Y坐标*/
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 min = Math.min(sT, sB, sL, sR)//找出其中最小的值,说明鼠标是从最小值的方位进入的
switch (min) {
//如果最小值是sT ,说明鼠标是从盒子顶部进入的
case sT:
if (bool) {
// 如果是要移入.我们就让.text先定位到盒子的上方
$(this).find(".text").css({
left: 0,
top: "-220px"
}).stop().animate({//然后从上方进行动画向下划入,下面的原理一样,不再赘述
top: "0"
}, 200)
} else {//如果是移出.就让遮罩层自下向上移动到-117px的定位位置
$(this).find(".text").stop().animate({
top: "-220px"
}, 200)
}
break;
case sB:
if (bool) {
$(this).find(".text").css({
left: 0,
top: "220px"
}).stop().animate({
top: "0"
}, 200)
} else {
$(this).find(".text").stop().animate({
top: "220px"
}, 200)
}
break;
case sL:
if (bool) {
$(this).find(".text").css({
left: "-164px",
top: 0
}).stop().animate({
left: 0
}, 200)
} else {
$(this).find(".text").stop().animate({
left: "-164px"
}, 200)
}
break;
case sR:
if (bool) {
$(this).find(".text").css({
left: "164px",
top: 0
}).stop().animate({
left: 0
}, 200)
} else {
$(this).find(".text").stop().animate({
left: "164px"
}, 200)
}
break;
default:
return;
}
}
})();
</script>
