js根据鼠标方向划入遮罩层
js根据鼠标方向划入遮罩层:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
ul{
overflow:hidden;
}
.game-list{
float: left;
width:296px;
height:240px;
border: 1px solid #cdcdcd;
box-shadow: 0 10px 10px #e7e7e7;
margin-left: 93px;
margin-top:20px;
position: relative;
overflow: hidden;
}
.slidiv{
position: absolute;
height:240px;
width:296px;
background: rgba(9,9,9,0.5);
position: absolute;
left:-296px;
top:0;
text-align: center;
color: #FFFFFF;
}
a{
width:296px;
height:240px;
display: block; }
</style>
<body>
<div>
<ul>
<li class="game-list">
<a href="#">3131</a>
<div class="slidiv">
<p>1</p>
</div>
</li>
</ul>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
slidiv()
function slidiv(){
$(".game-list").bind("mouseenter mouseleave", function(e) {
var w = $(this).width();
var h = $(this).height();
//计算鼠标指针x,y位于当前元素比例的坐标位置
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
//得出四个方向的值(0,1,2,3)
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; this_slidiv = $(this).find('.slidiv');
if(e.type == 'mouseenter'){
switch(direction){
case 0 :
this_slidiv.css({top:-h,left:"0px"});
break;
case 1:
this_slidiv.css({top:"0px",left:w});
break;
case 2:
this_slidiv.css({top:h,left:"0px"});
break;
case 3:
this_slidiv.css({top:"0px",left:-w});
break;
} this_slidiv.stop(true,true).animate({"top":"0px","left":"0px"},"fast"); }else if(e.type == 'mouseleave'){
switch(direction){
case 0 :
this_slidiv.stop(true,true).animate({"top":-h},"fast");
break;
case 1:
this_slidiv.stop(true,true).animate({"left":w},"fast");
break;
case 2:
this_slidiv.stop(true,true).animate({"top":h},"fast");
break;
case 3:
this_slidiv.stop(true,true).animate({"left":-w},"fast");
break;
}
}
});
}
</script>
</html>
js根据鼠标方向划入遮罩层的更多相关文章
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js实现弹出窗口+遮罩层+tab切换
[功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...
- JS+CSS简单实现DIV遮罩层显示隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 有时候做JQ动画,鼠标经过,它会不停自己抖动不停,解决方法(此处,是兼容IE ,当鼠标经过,遮罩层从下移到上边的JQ动画效果)
<style> .x_sdbb { margin: 60px 0 40px 0; } .x_title2{ background: url(../images/hdb_img17.png) ...
- 简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js
cvi_busy_lib.js cvi_busy_lib.js 是一个基于ajax的遮罩js,遮罩区域为body区域.使用比较简单. 效果: 在下面的Js代码,标注为红色标记为需要设置的参数. 1.g ...
- [读码][js,css3]能感知鼠标方向的图片遮罩效果
效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码 ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- 【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件
刚才在写一个界面,其中为了考虑背景图片的缘故,所以没用Button而是用的a标签 在点击之后应该禁用掉a元素,禁用对于button比较容易,加一个disabled就可以了 但是对于a却没有太好的办法, ...
- 转【js & jquery】遮罩层实现禁止a、span、button等元素的鼠标事件
/*遮罩层代码 作用:通过遮罩层的方式防止表单提交次数过多 */ function MaskIt(obj){ var hoverdiv = '<div class="divMask&q ...
随机推荐
- hdu3037Saving Beans——卢卡斯定理
题目:http://acm.hdu.edu.cn/showproblem.php?pid=3037 卢卡斯定理模板——大组合数的取模 代码如下: #include<iostream> #i ...
- POJ2186(有向图缩点)
Popular Cows Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 28379 Accepted: 11488 De ...
- POJ1144(割点入门题)
Network Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 11378 Accepted: 5285 Descript ...
- java线程基本原理
1.线程池简介: 多线程技术主要解决处理器单元内多个线程执行的问题,它可以显著减少处理器单元的闲置时间,增加处理器单元的吞吐能力. 假设一个服务器完成一项任务所需时间为:T1 创 ...
- JavaScript高级程序设计学习笔记第八章--BOM
1.间歇调用和超时调用: 超时调用:需要使用 window 对象的 setTimeout()方法,它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒).其中,第一个参数可以 ...
- Hibernate区分不同对象的方法
1.关系数据库按主键区分不同记录. create table CUSTOMERS (ID int promary key not null, NAME varchar(15)); insert ...
- ge lei zi yuan
introduction to OJ http://acdream.info/topic/101 ji suan ji he mo ban http://wenku.baidu.com/link?ur ...
- Centos7更新阿里yum源
一.下载repo文件 wget http://mirrors.aliyun.com/repo/Centos-7.repo 二.备份并替换系统的repo文件 cp Centos-7.repo /etc/ ...
- JSP 标准标签库(JSTL)(菜鸟教程)
菜鸟教程 JSTL 1.1 与 JSTL 1.2 之间的区别?如何下载 JSTL 1.2? JSTL 1.2 中不要求 standard.jar 包. 您可以在 Maven 中央仓库中找到它们. ht ...
- AtCoder Beginner Contest 052
没看到Beginner,然后就做啊做,发现A,B太简单了...然后想想做完算了..没想到C卡了一下,然后还是做出来了.D的话瞎想了一下,然后感觉也没问题.假装all kill.2333 AtCoder ...