学习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 相关文章推荐
jQuery scrollFix滚动定位插件
Apr 01 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
jQuery插件编写步骤详解
Jun 03 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
使用store来优化React组件的方法
Oct 23 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
js实现时分秒倒计时
Dec 03 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
使用JavaScript获取URL中的参数(两种方法)
2016/11/16 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
详解使用django-mama-cas快速搭建CAS服务的实现
2019/10/30 Python
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
英国最好的包装供应商:Priory Direct
2019/12/17 全球购物
师范教师毕业鉴定
2014/01/13 职场文书
公司活动策划方案
2014/01/13 职场文书
高中历史教学反思
2014/02/08 职场文书
目标责任书范文
2014/04/14 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
本科毕业论文导师评语
2014/12/31 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书