学习JavaScript鼠标响应事件
本文为大家分享了一个简单的鼠标模拟案例，供大家参考，具体实现内容如下
如何实现捕抓鼠标事件，当鼠标滑动时，获取当前鼠标的坐标，接着在一个透明区域里绑定捕抓的位移，这样就能在模拟的透明区域里实现鼠标滑动的模型。
效果图：
HTML代码：
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title> the mouse </title> <link rel="stylesheet" href="css/new.css"> </head> <body> <div class="main"> <div class="content"> <div class="content-nav-top"> <span onclick = 'koringz.createclick1(0)'>默认</span> <span onclick = 'koringz.createclick1(50)'>圆</span> </div> <div class="content-nav-left"> <span onclick = 'koringz.createclick2 (0.25) '>0.25</span> <span onclick = 'koringz.createclick2 (0.5) '>0.5</span> <span onclick = 'koringz.createclick2 (0.75)'>0.75</span> <span onclick = 'koringz.createclick2 (1) '>1</span> </div> <div class="box">鼠标感应器(the mouse sensor)</div> <div class="block"> <div class='block_case'></div> </div> </div> </div> <script type="text/javascript" src="js/demo.min/demo.min.js"></script> </body> </html>
CSS代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
.main{
position: relative;
margin: 0 auto;
height: 100%;
background-color: rgb(48, 70, 82)
}
.main .content{
position:absolute;
display: inline-block;
top:50%;
left:50%;
margin-left: -300px;
margin-top: -150px;
width: 600px;
height: 300px;
line-height: 300px;
/*overflow: hidden;*/
background: radial-gradient(ellipse farthest-corner, rgb(115, 176, 198) 0%, #888 100%);
background: -webkit-radial-gradient(ellipse farthest-corner, rgb(115, 176, 198) 0%, #888 100%);
box-shadow: 2px 3px 8px rgba(67, 50, 124 ,.6),0px 0px 8px rgba(67, 50, 124 ,.6);
}
.main .content .content-nav-top{
display: none;
position: absolute;
margin-top: -50px;
height: 50px;
width: 300px;
}
.main .content .content-nav-top >span{
display: block;
float: left;
font-size: 16px;
font-weight: normal;
margin-right:1px;
width: 50px;
height: 50px;
line-height: 50px;
background-color: rgba(251, 214, 146,.3);
box-shadow: 0px 4px 13px rgb(222,222,222,1);
cursor: pointer;
}
.main .content .content-nav-top >span:nth-child(1){
border-radius:0 ;
}
.main .content .content-nav-top >span:nth-child(2){
border-radius:50% ;
}
.main .content .content-nav-top >span:nth-child(3){
border-radius:0;
}
.main .content .content-nav-top >span:nth-child(4){
border-radius: 50% ;
}
.main .content .content-nav-left{
display: none;
position: absolute;
margin-left: -50px;
width: 50px;
height: 300px;
}
.main .content .content-nav-left >span{
display: block;
font-size: 16px;
font-weight: normal;
margin-bottom:1px;
width: 50px;
height: 50px;
line-height: 50px;
background-color: rgb(85, 145, 140);
box-shadow: 0px 4px 13px rgb(222,222,222,1);
border-radius:50% 0 0 50% ;
cursor: pointer;
}
.box{
position: relative;
float: left;
width: 49.9%;
height: 100%;
border-right-style: solid;
border-right-width: 1px;
border-right-color: rgba(211,211,211,.5);
color:rgb(99, 84, 168);
text-shadow: 0px 1px 0px #888,1px 0px 0px #888,0px 0px 1px #888;
}
.block{
float: right;
width: 50%;
height: 100%;
}
JS代码:
var koringz = (function(){
var x,
y,
getmain,
getcontent,
getbox,
getblock,
getblock_case,
getnav_top,
block_case_margin_top,
block_case_margin_left,
block_casetostring1,
block_casetostring2,
block_casesubstring1,
block_casesubstring2,
istouch;
getmain = document.querySelector('.main');
getcontent = getmain.querySelector('.content');
getbox = getcontent.querySelector('.box');
getblock = getcontent.querySelector('.block');
getblock_case = getblock.querySelector('.block_case');
getnav_top = getcontent.querySelector('.content-nav-top');
getnav_left = getcontent.querySelector('.content-nav-left');
function get_box() {
w_getbox_distance = getbox.offsetWidth;
h_getbox_distance = getbox.offsetHeight;
istouch = 'ontouchstart' in window;
getbox.addEventListener(istouch?'touchmove':'mousemove',mouseevent,false);
getbox.addEventListener(istouch?'touchmove':'mousemove',nav,false)
}
function nav () {
return new_nav();
}
var new_nav = function () {
getnav_top.style.display = 'block';
getnav_left.style.display = 'block';
}
function move_box() {
getblock_case.style.width = '0px';
getblock_case.style.height = '0px';
block_case_margin_left = getblock_case.style.marginLeft = getblock.offsetWidth/2 + 'px';//子节点
block_case_margin_top = getblock_case.style.marginTop = getblock.offsetHeight/2 + 'px';
block_casetostring1 = block_case_margin_left.toString();//值转化为字符串
block_casetostring2 = block_case_margin_top.toString();
block_casesubstring1 = block_casetostring1.substring(0,3);
block_casesubstring2 = block_casetostring2.substring(0,3);
}
var mouseevent = function () {
mouseEvent(event);
}
function mouseEvent(e){
var zore = 0,
val = 1;
if(istouch){
x = e.touches[zore].pageX;
y = e.touches[zore].pageY;
e.preventDefault();
}
else if(!istouch){
x = w_getbox_distance/2 != undefined ? e.offsetX:e.layerX;
y = h_getbox_distance/2 != undefined ? e.offsetY:e.layerY;
}
if(val = true){
getblock_case.style.width = x + 'px';//获得了mouse划过的位置
getblock_case.style.height = y + 'px';
getblock_case.style.marginLeft = (block_casesubstring1-x/2) +'px';
getblock_case.style.marginTop = (block_casesubstring2-y/2) +'px';
getblock_case.style.backgroundColor = "rgba(147, 106, 77,1)";
}
}
(function (){
window.onload = function(){
move_box();
get_box()
}
})()
var click =function () {
this.borderradius = function(num) {
if(typeof num == 'number'){
if(num == 0){
getblock_case.style.borderRadius = num;
}
else if(num > 0){
getblock_case.style.borderRadius = num +'%';
}
else{
return false;
}
}
}
this.opacitas = function (num) {
if(typeof num == 'number'){
getblock_case.style.opacity = num;
}
else{
return false;
}
}
}
var Click = new click();
return {
createclick1 :Click.borderradius,
createclick2 :Click.opacitas
}
})()
这里的鼠标箭头也可换成自己喜欢的图标，模拟鼠标区域的颜色也可自由变换，模拟区域的效果也可是点状的，也可以是线状的，动画效果等等，这个自由发挥吧。
以上就是针对JavaScript鼠标响应事件进行的详细介绍，希望对大家的学习有所帮助。
相关推荐
-
javascript监听鼠标滚轮事件浅析
我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动.这些都是通过js对鼠标滚轮的事件监听来实现的.今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听. 不同浏览器不同的事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件
-
使用JS或jQuery模拟鼠标点击a标签事件代码
复制代码 代码如下: <a id="alink" href="abc.aspx" style="visibility: hidden;">下一步</a> $("#alink").click(); // 触发了a标签的点击事件,但是没有触发页面跳转 document.getElementById("alink").click(); //既触发了a标签的点击事件,又触发了页面跳转 把 &
-
js操作输入框提示信息且响应鼠标事件
我们经常遇到一些输入框,比如注册网站的输入框就有默认提示值,当获取鼠标焦点的时候,默认值被删除,当用户没输入东西焦点离开的时候,又恢复默认提示值.这方法用js代码实现如下: html代码: 复制代码 代码如下: <input type="text" id="email" name="email" class="txt_input" value="请输入经常使用的邮箱" onfocus="fn
-
滚动条响应鼠标滑轮事件实现上下滚动的js代码
实现鼠标滚动滚轮事件: <script type="text/javascript"> var scrollFunc=function(e){ e=e || window.event; if(e.wheelDelta){//IE/Opera/Chrome if(e.wheelDelta==120) { //向上滚动事件 alert(e.wheelDeta +"向上"); }else { //向上滚动事件 alert(e.wheelDeta +"
-
js中鼠标滚轮事件详解(firefox多浏览器)
附加事件 其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. 复制代码 代码如下: /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc); } Firefox使用addEventListener添加滚轮事件 复制代码 代码如下: /*Firefox注册事件*/ if(document.addEventListener){ document.ad
-
js 鼠标点击事件及其它捕获
<div><a href="#" onclick="showPricediv('aaa')" abc=1>adsfsdf</a></div> <div id="aaa" style="display:none" onmouseover="temshowTag=true" onmouseout="temshowTag=false">
-
JS实现超精简响应鼠标显示二级菜单代码
本文实例讲述了JS实现超精简响应鼠标显示二级菜单代码.分享给大家供大家参考.具体如下: 这是一款精简版的二级导航菜单,响应鼠标的动作,鼠标放上即显示出菜单,常见的一种菜单样式.喜欢的朋友拿去修改一下,再美化一番,就够用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-mouse-show-menu-codes/ 具体代码如下: <html> <head> <title>二级菜单,响应鼠标</
-
js监听鼠标点击和键盘点击事件并自动跳转页面
js监听鼠标点击(onmousedown)和键盘点击(onkeydown)事件并自动跳转页面,在学习的朋友可以参考下 $(function(){ var i = 0; document.onmousedown=function(event){ if(i==1){ window.open('http://www.njxblog.com'); } //setTimeout(function (){window.open('http://www.jb51.net')},2000); //定时不太好使,
-
JS鼠标事件大全 推荐收藏
一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3
-
学习JavaScript鼠标响应事件
本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下 如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动的模型. 效果图: HTML代码: <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title> the mouse </title> <link r
-
CSS鼠标响应事件经过、移动、点击示例介绍
几种鼠标触发CSS事件. 说明: onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触 复制代码 代码如下: <html> <head> <title>CSS 鼠标响应事件</title> <meta http-equiv="Content-Type" content="text
-
JavaScript鼠标悬停事件用法解析
鼠标悬停事件是当鼠标的光标与其名称表示的元素重叠时触发的事件,本篇文章我们就来详细介绍一下JavaScript中鼠标悬停事件的用法. 我们先来看一下什么是onmouseover? 鼠标悬停的活动是"事件",而onmouseover是事件处理程序. 事件处理程序是指定事件发生时要执行的进程所必需的. 所以onmouseover是一个事件处理程序,负责当鼠标的光标悬停在某个元素上时完成的处理. 什么是onmouseleave? 除了onmouseover之外,还有onmouseleave.
-
javascript 鼠标滚轮事件
今天在网上找来了响应滚轮的函数并改写成下面的类 复制代码 代码如下: function wheelEvent(obj, handle) { this.handle = handle; // different events between Firefox and IE window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this
-
JavaScript事件学习小结(二)js事件处理程序
相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www
-
JavaScript实现的鼠标响应颜色渐变效果完整实例
本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199
-
JavaScript实现鼠标移动事件画笔
JavaScript实现鼠标移动事件画笔小游戏,供大家参考,具体内容如下 实现功能 鼠标点击时可以在画板上画画如果鼠标双击那么停止移动进画板颜色改变移除时颜色改变 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width
-
JavaScript和JQuery的鼠标mouse事件冒泡处理
简单的鼠标移动事件: 进入 复制代码 代码如下: mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件 移出 复制代码 代码如下: mouseleave: 不冒泡 mouseout:冒泡 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件 只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件 我们通过一个案例观察下问题
-
javascript实现禁止鼠标滚轮事件
平时我们兼容什么东西总是在调整低版本IE的兼容性,但是这回不是因为低版本浏览器不给力.而是因为火狐给力过头了,完全不顾其它浏览器的感受标新立异了.除了火狐之外,所有的浏览器都可以使用MouseWheel事件来处理鼠标滚轮的响应.但是火狐却偏偏不支持MouseWheel,而使用无厘头的DOMMouseScroll,这玩意儿除了火狐以外其它浏览器都不兼容.也就是说,对于鼠标滚轮事件的处理,火狐只能使用DOMMouseScroll.而非火狐则只能使用MouseWheel.这两种事件实现的原理不同,他们