学习JavaScript鼠标响应事件
更新时间:2015年12月27日 00:18 点击:2464
本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下
如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动的模型。
效果图:
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鼠标响应事件进行的详细介绍,希望对大家的学习有所帮助。
下一篇: 使用堆实现Top K算法(JS实现)
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 这篇文章主要介绍了JavaScript预解析,对象的的相关资料,小编觉得这篇文章写的还不错,需要的朋友可以参考下,希望能够给你带来帮助...2021-11-10
- 首先,我想到的是另建一个结果数组,用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较,检测是否重复。于是乎,我写出了如下代码A: Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
JavaScript学习笔记整理_setTimeout的应用
下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-03- 这篇文章主要介绍了Javascript类型转换的规则实例解析,涉及到javascript类型转换相关知识,对本文感兴趣的朋友一起学习吧...2016-02-27
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21
- 神马是“解释器模式”?先翻开《GOF》看看Definition:给定一个语言,定义它的文法的一种表示,并定义一个解释器,这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念: 抽象语法树: 解释器模式并未解释如...2014-06-07
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- 这篇文章主要介绍了JS中的compose函数和pipe函数用法,想深入了解Javascript的同学,可以参考下...2021-04-27
- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30