Javascript实现鼠标移入方向感知_javascript技巧

来源:脚本之家  责任编辑:小易  

(1).style.width='250px';document.getElementById(1).style.height='500px';onmouseout="document.getElementById(1).style.width='50px';document.getElementById(1).style.height='100px';class="xuexi"/>主要是onmouseover事件,鼠标移到图片上,和onmouseout事件,鼠标离开图片时触发www.zgxue.com防采集请勿采集本网。

本文介绍了JavaScript检测鼠标移动方向的方法,涉及javascript鼠标操作的相关技巧,供大家参考,具体内容如下

javascript'> window.onload=function() { var odiv1=document.getElementById('div1');odiv1.onmouseover=startmove;var timer=null;function startmove() { var speed=10;timer=

判断鼠标移入方向的功能函数

Hiding function hello(){ alert(\"哈罗!} ()\">link 你试一下。希望能帮到你!

function getDir(ev, ele) { var l = ele.getBoundingClientRect().left; var t = ele.getBoundingClientRect().top; var w = ele.getBoundingClientRect().width; var h = ele.getBoundingClientRect().height; var x = (ev.clientX - l - w / 2) * (w > h ? (h / w) : 1); var y = (ev.clientY - t - h / 2) * (h > w ? (w / h) : 1); var deg = Math.atan2(y, x) / (Math.PI / 180); var d = (Math.round((deg + 180) / 90) + 3) % 4; return d; // d的值{上:0,右:1,下:2,左:3} }

!DOCTYPE HTML> charset=utf-8\"> 无标题文档 one{ width:200px;height:200px;background:#F9C;} window.onload=function(){ var oDiv=document.getElementById('btn');oDiv.onmouseover=

整体代码:

html:

<div id="container"> <img src="./bg.jpg" alt=""> <p class="ps">故事成功地将原本隐藏在黑暗中,用世界上最强大的毅力和最艰辛的努力去做最密不可宣和隐讳残酷的事情的忍者,描绘成了太阳下最值得骄傲最光明无限的职业。在岸本齐史笔下的忍者世界中,每一位年轻的忍者都在开拓着属于自己的忍道。 </p></div>

CSS:

*{ margin: 0; padding: 0;}#container{ width: 400px; height: 200px; position: relative; margin-top: 100px; margin-left: 200px; overflow: hidden; }#container img{ width: 100%; height: 100%; transition: 0.5s;}#container p{ width: 100%; height: 100%; padding: 10px; box-sizing: border-box; position: absolute; left: 0; /* top: 0; */ background: rgba(0, 0, 0, .7); color: #ccc; font-size: 14px; line-height: 24px; }#container:hover img{ transform: scale(1.1);}

JS:

window.onload = function () { var box = document.getElementById('container'); var ps = document.getElementsByClassName('ps'); var pos=[ {left:0,top:'-100%'}, {left:'100%',top:0}, {left:0,top:'100%'}, {left:'-100%',top:0} ] box.onmouseenter = function(ev){ var dir = getDir(ev,this); ps[0].style.transition=''; ps[0].style.left=pos[dir].left; ps[0].style.top=pos[dir].top; setTimeout(function(){ ps[0].style.transition='.3s'; ps[0].style.left=0; ps[0].style.top=0; },1000/60) } box.onmouseleave = function(ev){ var dir = getDir(ev,this); setTimeout(function(){ ps[0].style.transition=''; ps[0].style.left=pos[dir].left; ps[0].style.top=pos[dir].top; },100) } } function getDir(ev, ele) { var l = ele.getBoundingClientRect().left; var t = ele.getBoundingClientRect().top; var w = ele.getBoundingClientRect().width; var h = ele.getBoundingClientRect().height; var x = (ev.clientX - l - w / 2) * (w > h ? (h / w) : 1); var y = (ev.clientY - t - h / 2) * (h > w ? (w / h) : 1); var deg = Math.atan2(y, x) / (Math.PI / 180); var d = (Math.round((deg + 180) / 90) + 3) % 4; return d; // d的值{上:0,右:1,下:2,左:3}}

先上图企点页演示图片再上代码com_1.jpg" />var img=document.getElementsByTagName('img')[0];img.onmouseenter=function(){img.src='qidianye_com_2.jpg';}img.onmouseleave=function(){img.src='qidianye_com_1.jpg';}内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js判断鼠标移入移出方向的方法
  • js实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
  • js判断鼠标进入容器的方向与window.open新窗口被拦截的问题
  • 利用js判断鼠标移入元素的方向
  • js用斜率判断鼠标进入div四个方向的方法
  • javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
  • javascript检测鼠标移动方向的方法
  • js判断鼠标从什么方向进入一个容器实例说明
  • javascript中防止微信浏览器被整体拖动的方法
  • 用javascript评估用户输入密码的强度实现代码
  • 通过msxml2自动获取qq个人头像及在线情况(给初学者)
  • 对于form表单reset方法的新认识
  • 移动端效果之indexlist详解
  • javascript在ie中“意外地调用了方法或属性访问”
  • 保证javascript和asp、php等后端程序间传值编码统一
  • 获取layer.open弹出层的返回值方法
  • axios实现简单文件上传功能
  • 有关suggest快速删除后仍然出现下拉列表的bug问题
  • 鼠标移入移出显示不同图片 javascript javascript实现?
  • javascript中如何实现当鼠标移到图片上时图片变大,移走后图片恢复原样
  • 怎么实现鼠标移到一个li上展开,其余收缩的,用JavaScript写
  • 这个javascript怎么修改一下能让鼠标移出事件只发生在原始div的宽度上
  • 这个javascript鼠标移入事件不怎么好使啊,我鼠标移入div的时候不是一下子就弹出来,会有停顿
  • 怎么用JavaScript实现鼠标放上去有提示框?
  • [javascript]鼠标移出时如何清除鼠标移入时创建的div??
  • 鼠标移到指定文本框,怎么实现,javascript
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjs判断鼠标移入移出方向的方法js实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例js判断鼠标进入容器的方向与window.open新窗口被拦截的问题利用js判断鼠标移入元素的方向js用斜率判断鼠标进入div四个方向的方法javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)javascript检测鼠标移动方向的方法js判断鼠标从什么方向进入一个容器实例说明javascript中防止微信浏览器被整体拖动的方法用javascript评估用户输入密码的强度实现代码通过msxml2自动获取qq个人头像及在线情况(给初学者)对于form表单reset方法的新认识javascript在ie中“意外地调用了方法或属性访问”保证javascript和asp、php等后端程序间传值编码统一获取layer.open弹出层的返回值方法axios实现简单文件上传功能有关suggest快速删除后仍然出现下拉列表的bug问题js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包如何用js获取带“\”字符串的中间值?js增加行复制行删除行的实现代码原生javascript生成guid的实现示例javascript判断浏览器类型的方法js组件bootstrap实现下拉菜单效果代码ie和firefox下event事件杂谈纯js模仿windows系统日历react组件对子组件children进行加强的方法学习javascript设计模式之享元模式30分钟快速入门掌握es6/es2015的核心内容
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved