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事件同时无意中想 ...
随机推荐
- stamp-po的作用
stamp-po是表示po文件是否有更新,有更新,则重新编译一次
- 《Struts2.x权威指南》学习笔记1
第2章 Struts的hello world 在介绍hello world项目前,文中要求下载和安装Struts2,主要是下载lib库和文档,可用于通过命令行进行代码编译.由于公司采用IntelliJ ...
- Win10微软官方最终正式版ISO镜像文件
Win10微软官方最终正式版ISO镜像文件 据说Windows 10是微软发布的最后一个Windows版本,下一代Windows将作为Update形式出现.Windows 10将发布7个发行版本,分别 ...
- netcat命令
1 简介 netcat是网络工具中的瑞士军刀,它能通过TCP和UDP在网络中读写数据.通过与其他工具结合和重定向,你可以在脚本中以多种方式使用它.使用netcat命令所能完成的事情令人惊讶. netc ...
- ecshop 订单-》订单状态
/** * 取得状态列表 * @param string $type 类型:all | order | shipping | payment */ function get_status_list($ ...
- YII2 Model 类切换数据库连接
配置多数据库: return [ // ... 'components' => [ // ... 'db' => [ 'class' => 'yii\db\Connection', ...
- Yii2.0高级框架数据库增删改查的一些操作(转)
yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2.0高级框架数据库增删改查的一些操作 --------------------------- ...
- AngularJS常用指令用法详解
ng-class 1>ng-init ng-bind 11111 2>ng-class 111 3>ng-repeat 3.1-数据绑定 ng-repeat可以绑定数组和 ...
- HTML5+CSS3+jquery实现简单的音乐播放器
...最近天热的,感觉就像煎饼...然后别人在把妹子的时候,只有偶们这帮苦逼的程序员在那边撸代码...我日哦! 然后今天晒的是偶早年写的一个播放器...看上去是不是很有感觉的样子!一番宝物,Lisa唱 ...
- webpack入门(一)——webpack 介绍
如今的网站正在演化为web应用程序: 1. 越来越多的使用JavaScript. 2. 现代浏览器提供更广泛的接口. 3. 整页刷新的情况越来越少,甚至更多代码在同一个页面.(SPA) 因此有很多代码 ...