1. 首页
  2. 文章中心
  3. javascript

Js简单鼠标滑动事件

81 阅读 0 评论
我是靠谱客的博主 心灵美棉花糖，最近开发中收集的这篇文章主要介绍Js简单鼠标滑动事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!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>

<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>

<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>

<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>

<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>

<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>

</ul>

<script>

var ul = document.getElementsByTagName('ul')[0];

// 鼠标滑动事件

ul.onmouseover = function(e) {

var event = e || window.event;

var target = event.target || event.srcElemnt;

target.style.backgroundColor = "rgb(255,255," +

target.getAttribute('img-data') + ")";

target.setAttribute('img-data',

parseInt(target.getAttribute('img-data')) + 10);

}

</script>

</body>

</html>

最后

以上就是心灵美棉花糖为你收集整理的Js简单鼠标滑动事件的全部内容，希望文章能够帮你解决Js简单鼠标滑动事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(54)

相关文章

JavaScript焦点事件、鼠标事件和滚轮事件使用详解
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
PyHook3实现监控键盘鼠标操作1. 创建HookManager对象
PyHook3实现监控键盘鼠标操作1. 创建HookManager对象
js的滑动事件
js的滑动事件
js监听鼠标的滚轮滚动事件
js监听鼠标的滚轮滚动事件
Js简单鼠标滑动事件
Js简单鼠标滑动事件
JS总结笔记：鼠标滚动事件DOMMouseScroll和mousewheel鼠标滚动事件
JS总结笔记：鼠标滚动事件DOMMouseScroll和mousewheel鼠标滚动事件
JS实现一个scroll自定义滚动效果JS实现一个scroll自定义滚动效果
JS实现一个scroll自定义滚动效果JS实现一个scroll自定义滚动效果
鼠标滚轮滚动事件，兼容IE8和火狐、谷歌
鼠标滚轮滚动事件，兼容IE8和火狐、谷歌

评论列表共有 0 条评论

立即
投稿
返回
顶部