首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

学习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鼠标响应事件

- Author -

微宇宙

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用JS操作页面表格，元素的一些技巧
Feb 02 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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
scss(1) vue-router-link(1) watch(1) 项目打包(2) Yolov5(1) Jmerte(1) vue-cli3.x(1) TimePickerView(1) 监听(2) KVM(1)
You might like
PHP的分页功能
2007/03/21 PHP
用mysql内存表来代替php session的类
2009/02/01 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
原生JS实现加入收藏夹的代码
2013/10/24 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
中文输入法不触发onkeyup事件的解决办法
2014/07/09 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python的Flask框架的简介和安装方法
2015/11/13 Python
python的文件操作方法汇总
2017/11/10 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python框架flask表单实现详解
2019/11/04 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
标记环介质访问控制协议
2016/03/27 面试题
四风个人对照检查材料思想汇报（办公室通用版）
2014/10/07 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
MySQL GTID复制的具体使用
2022/05/20 MySQL