学习JavaScript鼠标响应事件


Posted in Javascript onDecember 25, 2015

本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下
如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动的模型。

效果图:

学习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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
JavaScript requestAnimationFrame动画详解
Sep 14 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
理解javascript中DOM事件
Dec 25 #Javascript
理解JavaScript中worker事件api
Dec 25 #Javascript
基于jquery实现省市区三级联动效果
Dec 25 #Javascript
js实现文本框输入文字个数限制代码
Dec 25 #Javascript
js实现简单的验证码
Dec 25 #Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 #Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 #Javascript
You might like
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
PHP利用str_replace防注入的方法
2013/11/10 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
DOM 事件流详解
2015/01/20 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
python实现简单井字棋游戏
2020/03/04 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
党员自我评价分享
2013/12/13 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
法律意见书范本
2015/06/04 职场文书
详解JavaScript中Arguments对象用途
2021/08/30 Javascript