Js简单鼠标滑动事件

最新推荐文章于 2025-06-14 21:20:02 发布
原创 最新推荐文章于 2025-06-14 21:20:02 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #css3 #css

本文通过一个简单的HTML和JavaScript示例展示了如何监听鼠标滑过事件，动态改变列表项的背景颜色。当鼠标滑过列表项时，元素的背景色将根据其img-data属性值逐渐变化，同时该属性值也会递增。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<style>

* {

margin: 0;

padding: 0;

}

li {

box-sizing: border-box;

float: left;

width: 10px;

height: 10px;

/* border: 1px solid black; */

}

ul {

list-style: none;

width: 200px;

height: 200px;

}

</style>

<body>

<ul>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

<li img-data="0"></li>

最低0.47元/天 解锁文章

新学期VIP享超值加赠
宁多鱼
关注
JavaScript基础(32)_拖拽、鼠标移动事件
no15870678621的博客
08-11 1361
JS拖拽、鼠标移动事件
鼠标移动事件
m0_65511328的博客
03-27 5019
在学习JS中，我对鼠标移动事件进行了一些总结，需要的可以作参考（仅供参考）。 要点总结： 第一:onmousemove属性在鼠标指针移动到元素时触发，如图： 第二：用querySelectorAll 来获取全部事件 //querySelectorAll 获取全部事件 var变量= document.querySelectorAll("#id"); 第三：clientX和clientY 用于获得鼠标当前的可见窗口的坐标，div的偏...
js的滑动事件
weixin_46564011的博客
01-17 2445
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标的滑动事件</title> <style> *{ padding: 0; margin: 0; } .box_1{ width:200px.
JavaScript基础-常用的鼠标事件
最新发布
qq_51626500的博客
06-14 1091
JavaScript基础-常用的鼠标事件
鼠标滚轮事件
weixin_30299539的博客
08-09 174
不同浏览器存在差异，鼠标滚轮事件在各个浏览器中绑定事件如下： IE Chrome Opera Safari浏览器的注册事件： window.onmousewheel = document.onmousewheel = scrollFunc; //scrollFunc为定义的事件名 Firefox浏览器的注册事件： if (...
js鼠标滚动事件
okokchina的专栏
05-19 1013
在做js返回顶部的效果时，要监听网页滚动条滚动事件，这个事件就是：window.onscroll。当onscroll事件发生时，用js获得页面的scrollTop值，判断scrollTop为一个设定值时，显示“返回面部” js网页滚动条滚动事件   #top_div{      position:fixed;      bottom:80px;      right:0; 
javascript实现百度地图鼠标滑动事件显示、隐藏
10-24
在地图中添加交互功能，如鼠标滑动事件显示和隐藏特定的标注（label），是网页地图应用中常见的需求之一。通过这种方式可以为用户提供更为丰富的交互体验，使得地图上的标注信息在用户需要时才显示，以避免地图信息...
js实现鼠标滑动到某个div禁止滚动
10-14
关于如何使用JavaScript实现当鼠标滑动到指定的div区域内时禁止页面滚动的功能，这是一个在前端开发中可能会遇到的实际需求。通常这种需求是在特定的操作场景中为了提供更好的用户体验而提出的。例如，在一个产品...
基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件.zip
10-23
基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件 基于原生JavaScript完成的网页端2048游戏，适配移动端，绑定键盘和鼠标滑动事件 基于原生JavaScript完成的网页端2048游戏，适配移动端...
js自动滑动+鼠标滑动区域
10-30
JavaScript 自动滑动和鼠标滑动区域是一种常见的网页动态效果，用于展示滚动的新闻、广告或其他信息。在给定的代码示例中，可以看到两个不同的实现方式，但都是基于 JavaScript 和 CSS 实现的。 首先，我们来看第一...
一个鼠标滑动的JS应用实例
ltx06的专栏
03-23 510
实现导航置顶 $(function(){ $(window).scroll(function(){ if($window).scrollTop()>=200{ $(".nav").addClass(".fixedTop"); }else{ $(".nav").removeClass(".fixedTop"); } }); }
js实现touch移动触屏滑动事件
10-24
在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象（android和iOS乃至nokia最新的meego系统都模拟了类 似的对象）。这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以 通过touch event handler的event对象取到
浅谈移动端之js touch事件 手势滑动事件
11-27
现分享一篇关于touch的文章，望指教！ 原理： 当开始一个touchstart事件的时候，获取此刻手指的横坐标startX和纵坐标startY； 当触发touchmove事件时，在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后，通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向。 具体代码如下： $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEve
js中鼠标滚轮事件详解
热门推荐
林中明月间丶
08-30 2万+
参考两个他人的博客:https://www.cnblogs.com/ysx215/p/7002338.html https://www.cnblogs.com/syll/p/6233684.html &lt;body style="height:2000px"&gt; &lt;script type="text/javascript"&gt; var scrollFunc = fu...
js中的鼠标事件
LingLuoEr的博客
12-28 2431
鼠标点击事件
JS事件-鼠标滚轮事件
每天进步一点点
05-27 2万+
之前学习了onmouseover，onmousedown等鼠标事件，今天来看看鼠标的滚轮事件，浏览器兼容一直是让人比较恶心的事情，今天就让我们将恶心进行到底，看看这个恶心的鼠标滚轮事件！   鼠标滚轮事件在IE和谷歌浏览器Chrome下是通过onmousewheel这个事件实现的，但是火狐FF下却不识别onmousewheel，在FF下需要用DOMMouseScroll，并且必须用“事件监听”
js移动端滑动事件
weixin_30463341的博客
06-13 219
移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来完成。但是在移动设备上，要实现这种轮播的效果，就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend:...
js鼠标事件
qq_47243637的博客
01-09 1664
js鼠标事件
js移动端的滑动事件
MyNameIsXiaoLai的博客
02-22 3628
https://www.cnblogs.com/wanghjun/p/9121749.html &lt;!doctype html&gt; &lt;html lang="en"&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;!--&lt;meta name="viewport&
jq h5鼠标滑动事件 touch
09-09
在jQuery中，我们可以利用鼠标滑动事件和触摸事件来对H5页面进行交互效果的开发。 鼠标滑动事件是指在网页中使用鼠标滑动的动作。在jQuery中，我们可以使用.mousemove()方法来捕捉和处理鼠标滑动事件。通过绑定....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值