js 判断鼠标进去方向
function fx(id){
var obj= document.getElementById(id);
var fun=function(e){
var w=obj.offsetWidth;
var h=obj.offsetHeight;
var y=e.clientY;
var x=e.clientX;
var yz=(y-obj.offsetLeft-(h/2))*(h>w?(w/h):1);
var xz=(x-obj.offsetTop-(w/2))*(w>h?(h/w):1);
var direction = Math.round((((Math.atan2(yz, xz) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
//var fangxiang=new Array("上边","右边","下边","左边");
switch(direction){
case 0:obj.style.background="red"
break;
case 1:obj.style.background="blue"
break;
case 2:obj.style.background="#ff0"
break;
case 3:obj.style.background="#2f0"
break;
}
}
if(window.attachEvent){
obj.attachEvent("click",fun);
obj.attachEvent("mouseover",fun);else{obj.addEventListener("click",fun,false);
obj.addEventListener("mouseover",fun,false);
}
}
fx("box");
js 判断鼠标进去方向的更多相关文章
- js 判断鼠标滚轮方向
最近因为公司项目的要求,需要做页面的全屏滚动切换效果. 页面的切换,需要脚本监听鼠标滑轮的滚动事件,来判断页面是向上切换or向下切换. 这里的脚本很简单,我就直接贴出来吧. $('html').on( ...
- js/jq判断鼠标滚轮方向
js判断鼠标滚轮方向: var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE,谷歌滑 ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- js中判断鼠标滚轮方向的方法
前 言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- JS判断鼠标移入元素的方向
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
- JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向
本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...
- 2015.10.11(js判断鼠标进入容器的方向)
判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...
随机推荐
- 使用MVC过滤器保存操作日志
//定义过滤器 public class LogAttribute : ActionFilterAttribute { /// <summary> /// 以逗号间隔 /// </ ...
- Java递归算法——阶乘
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.i ...
- JavaScript学习笔记——运算符和表达式
javascript运算符 一.运算符和操作数的组合就称为表达式. 二.javascript运算符 (一) 算术运算符 + - * / % var++ ++var var-- --var A. + ( ...
- python开发_++i,i += 1的区分
python开发_++i,i += 1的区分 在很多编程语言(C/C++,Java等)中我们都会碰到这样的语法: 1 int i = 0; 2 ++ i; // -- i; 这样的语法在上述编程语言中 ...
- VBO, VAO, Generic Vertex Attribute
VBO - 用于存储顶点数据的Buffer Object. VAO - 用于组织VBO的对象. Generic Vertex Attribute - 通用顶点属性. For example, the ...
- js确定要删除吗
js代码 function confirm_redirect(msg, url) { if (confirm(msg)) { location.href=url; } } html <a hre ...
- swiper 增加同页面增加2个滚动
js代码 <script type="text/javascript"> var mySwiper = new Swiper('.slide_a',{ noSwipin ...
- HighCharts学习笔记(一)HighCharts入门
一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...
- jsp日期插件My97DatePicker
jsp日期插件My97DatePicker 强大的日期控件 使用方便简单 (2010-10-30 18:59:12) 转载▼ 标签: js javascript 日期插件 jsp it 分类: jqu ...
- <meta>标签元素的属性理解
meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta 标签用于网页的<head>与</head>中,meta 标签的用处很多.meta 的属性有两种:name和 ...