html鼠标响应事件吗,学习JavaScript鼠标响应事件
本文为大家分享了一个简单的鼠标模拟案例,供大家参考,具体实现内容如下
如何实现捕抓鼠标事件,当鼠标滑动时,获取当前鼠标的坐标,接着在一个透明区域里绑定捕抓的位移,这样就能在模拟的透明区域里实现鼠标滑动的模型。
效果图:
HTML代码:
the mouse
默认
圆
0.25
0.5
0.75
1
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鼠标响应事件进行的详细介绍,希望对大家的学习有所帮助。
html鼠标响应事件吗,学习JavaScript鼠标响应事件相关推荐
- html事件机制,浅析JavaScript中的事件机制_基础知识
事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任 ...
- 鼠标悬停显示图片html5,JavaScript 鼠标悬停图片,显示隐藏文本
Unsplash 当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间 HTML 结构如下 世界上最 ...
- Javascript鼠标移入方向感知
这篇文章主要介绍了JavaScript检测鼠标移动方向的方法,涉及javascript鼠标操作的相关技巧,需要的朋友可以参考下. 判断鼠标移入方向的功能函数 function getDir(ev, e ...
- 【SCIR Lab】事件表示学习简述
作者:哈工大SCIR 廖阔 1. 简介 事件通常指包含参与者在内的某种动作或情况的发生,或世界状态的改变.在粒度上,事件介于词与句子之间:与词相比,事件通常包含多个词,用来描述事件的发生及事件的组成要 ...
- EMNLP 2021事件相关(事件抽取、事件关系抽取、事件预测等)论文汇总
EMNLP 2021事件相关(事件抽取.事件关系抽取.事件预测等)论文汇总,已更新全部. Event Extraction Crosslingual Transfer Learning for Rel ...
- mousemove事件,鼠标移动过快时,无法全部响应
问题描述: 项目中,运用mousemove来实现绘制圆形时,发现鼠标移动速度过快时,绘制的圆形,不能连接一起,中间出现断点,无法形成一条完整的路径. 问题分析: <!DOCTYPE html&g ...
- java鼠标js触发事件吗,JavaScript鼠标事件是什么?JavaScript鼠标事件详解
js中是比较简单的语言,然而js的精髓就是js事件,这也是js当中最重要的部分,很多人对JavaScript鼠标事件是什么还不是很了解,下面我们对JavaScript鼠标事件进行详解. 一:在js中, ...
- javascript 鼠标事件总结
本文转自:http://www.jb51.net/article/21590.htm javascript的鼠标事件是个比较庞大的家族.需要的朋友可以参考下. 常见的有以下8个: mousedown: ...
- qt linux 鼠标事件,QT学习笔记5:QMouseEvent鼠标事件简介
一.QMouseEvent的详细描述 首先请注意,Qt中的QMouseEvent一般只涉及鼠标左键或右键的单击.释放等操作,而对鼠标滚轮的响应则通过QWheeEvent来处理. QMouseEvent ...
最新文章
- 2019年宁夏文化科技卫生“三下乡”集中示范活动启动
- tv英语域名注册_企业邮箱十万个为什么——域名篇
- 单向散列函数(Hash)
- P1101 单词方阵(DFS)
- protected访问权限_权限修饰符 /重写
- Silverlight 2 控件 SDK 源代码
- python语言接收信息的内置函数_python接收信息的内置函数是
- 解决docker容器开启端口映射后,会自动在防火墙上打开端口的问题
- Linux系统中使用netcat命令的奇技淫巧
- 【大数据部落】用R语言挖掘Twitter数据
- Camtasia给视频加马赛克怎么操作?
- python aes new_python--AES加密
- 【游戏开发实战 |开源—— 2D项目1 - Ruby‘s Adventure】控制游戏角色移动(1-1)
- 行业的英语术语大全之家居类术语
- 随笔-自控概率的大转盘抽奖
- 浅谈强化学习二之马尔卡夫决策过程与动态规划
- STM32系列——手把手教你蓝牙模块HC05、HC06的使用,重在“用起来”(HAL库)
- python情人节之玫瑰花与表白方式_python情人节之玫瑰花与表白方式-Go语言中文社区...
- Pie Chart(nvd3)
- FlyFish 2.0已发布,大屏开发应用更加灵活便捷
热门文章
- 云原生时代,阿里云联手博睿数据让IT运维可观测更智能
- 信息如何实现病毒式传播?一文看懂Gossip协议
- 这 10 行比较字符串相等的代码给我整懵了,不信你也来看看
- OpenStack发布Ussuri版本 实现智能开源基础设施的自动化
- 11月4日,上海开源基础设施峰会,不见不散!
- pca降维的基本思想_R语言进行PCA分析
- java.lang.AbstractMethodError: org.apache.xerces.dom.DocumentImpl.setXmlVersion
- mysql Slave is not configured or failed to initialize properly. You must at least set --server-id
- TortoiseGit 基础5部曲
- gblfy博客配色模板