js鼠标点击特效 js自动点击网页元素

编程之家2026-07-021101次浏览

大家好，js鼠标点击特效相信很多的网友都不是很明白，包括js自动点击网页元素也是一样，不过没有关系，接下来就来为大家分享关于js鼠标点击特效和js自动点击网页元素的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！

js鼠标悬停事件

第一：js进行鼠标悬停事件来处理DOM实际上是不合理的。对于界面交互上能通过css处理的事件就不要用js来处理；

第二：恰好css对于鼠标悬停是有对应的选择器及其处理；

处理方法：如图A：

假设A的id为a，css代码如下：

#a{

width:100px;

height:36px;

float:left;

}

//对于位置的固定可以自行选择处理,当前用float固定。

#a:hover{

width:200px

}结果将会如你图中所需要的完成。

如必须用JS处理的话，代码如下：

//既定a的样式已明确：

//html代码:

<spanid='a'onmouseover="fc1(this)"

onmouseout="fc2(this)"></span>

functionfc1(node){

node.style.width='200px';

}

functionfc2(node){

node.style.width='100px';

}

</script>

html,js如何获取当前鼠标位置

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种event.clientX/Y

event.pageX/Y

event.offsetX/Y

event.layerX/Y

event.screenX/Y

clientX/Y:clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变

兼容性：所有浏览器均支持

pageX/Y:pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变

设置<body style="width:2000px;height:200px;">让页面滚动，发现clientX与pageX的值不一样

兼容性：除IE6/7/8不支持外，其余浏览器均支持

offsetX/Y:offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。

兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持

layerX/Y:layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离

兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

screenX/Y:screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变

兼容性：所有浏览器均支持

示例：

<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<title>Document</title>

<style>

*{margin:0;padding:0;}

#wrap{

margin:30pxauto;

width:500px;

height:200px;

border:1pxsolid#ccc;

text-align:center;

overflow:scroll;

}

#wrapp{

display:block;

height:400px;

}

</style>

</head>

<bodystyle="height:2000px;width:20000px">

<divid="wrap">

<p></p>

</div>

window.onload=function(){//页面加载

varoDiv=document.getElementById('wrap');//获取元素

oDiv.onmousemove=function(e){//绑定鼠标的滑动事件

e=e||window.event;

console.log('e.clientX:'+e.clientX);//输出x坐标

console.log('e.pageX:'+e.pageX);//输出x坐标

console.log('e.clientY:'+e.clientY);//输出y坐标

console.log('e.pageY:'+e.pageY);//输出y坐标

}

</script>

</body>

</html>

p5.js鼠标交互如何实现并使用

这次给大家带来p5.js鼠标交互如何实现并使用，p5.js鼠标交互实现并使用的注意事项有哪些，下面就是实战案例，一起来看一下。

一、鼠标交互常用关键词

p5.js提供了许多鼠标操作用的关键词与函数，常用的有：

mouseIsPressed：关键词，若鼠标按下则为true，反之为false

mouseButton：关键词，用来判断鼠标按下的是哪个键

案例如下：

function setup(){

createCanvas(400, 400);

}

function draw(){

background(220);

if(mouseIsPressed){

textAlign(CENTER);

textSize(30);

if(mouseButton== LEFT)

text("LEFT",200,height/2);

if(mouseButton== RIGHT)

text("RIGHT",200,height/2);

if(mouseButton== CENTER)

text("CENTER",200,height/2);

}

}当鼠标按下左、中、右键时，分别会在屏幕上显示“LEFT”、“CENTER”、“RIGHT"。

查看效果：

二、鼠标交互常用函数

鼠标操作常用函数如下，还有：

mouseClicked()：函数，鼠标点击时触发一次

mousePressed()：函数，鼠标按下时触发一次

mouseReleased()：函数，鼠标松开时触发一次

我们可以用这些函数控制何时在屏幕上显示图形，案例如下：

var showEllipse=false;

var showRect=false;

function setup(){

createCanvas(400, 400);

}

function draw(){

background(220);

if(mouseIsPressed){

ellipse(50, height/2, 50, 50);

}

if(showEllipse){

ellipse(200, height/2, 50, 50);

}

if(showRect){

rectMode(CENTER);

rect(350,height/2,50,50);

}

function mouseClicked(){

showEllipse=!showEllipse;

}

function mousePressed(){

showRect=true;

}

function mouseReleased(){

showRect=false;

}查看效果：

三、鼠标拖拽物体

灵活运用以上关键字和函数，可以做出许多功能，这里举一例，用鼠标拖拽物体。

代码如下：

var x=200;

var y=200

var r=50;

function setup(){

createCanvas(400, 400);

}

function draw(){

background(220);

if(mouseIsPressed&&dist(mouseX,mouseY,x,y)<r){

x=mouseX;

y=mouseY;

}

ellipse(x,y,r,r);

}相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！