在表格菜单中，用JavaScript实现随着鼠标的滚动改变行的颜色

最新推荐文章于 2022-09-07 23:53:22 发布
最新推荐文章于 2022-09-07 23:53:22 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： JavaEE 文章标签： javascript JavaScript Javascript jquery jQuery JQUERY Jquery JQuery jsp Jsp JSP 表格 鼠标停留
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengguoxing/article/details/8260846
版权

 先上个截图吧！看的更明白点 

 

首先要有表格：在html的body中写上如下代码：

其实就是一张表格，有14行，每行都有一个图片加上一个超级链接

 

<table width='100%' height='100%' border='1' cellspacing='0' cellpadding='1'><tr id='menu1'><td><a href='getnexttree.action?id=1' target='menuTree' οnclick='changeColor(1)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/1.gif' />  我的流程</a></td></tr><tr id='menu2'><td><a href='getnexttree.action?id=2' target='menuTree' οnclick='changeColor(2)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/2.gif' />  我的文档</a></td></tr><tr id='menu3'><td><a href='getnexttree.action?id=3' target='menuTree' οnclick='changeColor(3)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/3.gif' />  我的通信</a></td></tr><tr id='menu4'><td><a href='getnexttree.action?id=4' target='menuTree' οnclick='changeColor(4)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/4.gif' />  我的人事</a></td></tr><tr id='menu5'><td><a href='getnexttree.action?id=5' target='menuTree' οnclick='changeColor(5)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/5.gif' />  我的任务</a></td></tr><tr id='menu6'><td><a href='getnexttree.action?id=6' target='menuTree' οnclick='changeColor(6)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/6.gif' />  我的资产</a></td></tr><tr id='menu7'><td><a href='getnexttree.action?id=7' target='menuTree' οnclick='changeColor(7)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/7.gif' />  我的会议</a></td></tr><tr id='menu8'><td><a href='getnexttree.action?id=8' target='menuTree' οnclick='changeColor(8)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/8.gif' />  我的商务</a></td></tr><tr id='menu9'><td><a href='getnexttree.action?id=9' target='menuTree' οnclick='changeColor(9)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/9.gif' />  我的助手</a></td></tr><tr id='menu10'><td><a href='getnexttree.action?id=10' target='menuTree' οnclick='changeColor(10)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/10.gif' />  信息中心</a></td></tr><tr id='menu11'><td><a href='getnexttree.action?id=11' target='menuTree' οnclick='changeColor(11)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/11.gif' />  系统管理</a></td></tr><tr id='menu12'><td><a href='getnexttree.action?id=12' target='menuTree' οnclick='changeColor(12)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/12.gif' />  图形报表</a></td></tr><tr id='menu13'><td><a href='getnexttree.action?id=13' target='menuTree' οnclick='changeColor(13)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/13.gif' />  我的协作</a></td></tr><tr id='menu14'><td><a href='getnexttree.action?id=14' target='menuTree' οnclick='changeColor(14)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/14.gif' />  我的相册</a></td></tr></table>

 

然后再head中加上如下javascript代码： 

	<script type="text/javascript" src="index_files/leftMenuFiles/jquery-1.4.4.js"></script>
	<script type="text/javascript">
	$(function() {
		$("table tr").hover(function() {
			$(this).css("background-color", "#B2E1F1");
		}, function() {
			$(this).css("background-color", "");
		});
	});

 

这里用到了jquery框架，所以要导入这个文件

 

然后当你的鼠标在这14行滚动时，就会使这一行的颜色改变成你想要的颜色，

当你的鼠标离开时，颜色也就消失了

 

还有一点，当你单击了某一行时，就算你的鼠标离开，这一行的也会显示一种颜色，这里我用的是同一种颜色，其代码如下：加在javascript中

	function changeColor(a) {
		for ( var i = 1; i <= 14; i++) {
			document.getElementById("menu" + i).className = "Normal";
		}
		document.getElementById("menu" + a).className = "Current";
	}


然后再写上一句CSS代码：

	<style type="text/css">
	.Normal{background:none;  /*没选择的不显示任何颜色*/}
	.Current{background: #B2E1F1; /*选择了的显示某一种颜色*/}
	</style>


其效果如下

 

注解：当鼠标停在上面时，其实都有应该有鼠标的手型在上面的，但是由于截图，就显示不了啦。 

整个页面的代码如下：(还有其他一些知识) 是JSP页面



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>一级菜单树</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="index_files/leftMenuFiles/jquery-1.4.4.js"></script>
	<script type="text/javascript">
	$(function() {
		$("table tr").hover(function() {
			$(this).css("background-color", "#B2E1F1");
		}, function() {
			$(this).css("background-color", "");
		});
	});
	function changeColor(a) {
		for ( var i = 1; i <= 14; i++) {
			document.getElementById("menu" + i).className = "Normal";
		}
		document.getElementById("menu" + a).className = "Current";
	}
	</script>
	
	<style type="text/css">
	body{
		MARGIN-TOP: 2px;
		MARGIN-LEFT: 2px;
		margin-right: 2px;
		margin-bottom: 2px;
		FONT-FAMILY: verdana; 
		FONT-SIZE: 14px;
	}
	table{ 
		border-collapse:collapse;
	}
	tr{
		background-color: #F0F5FF;
		cursor: pointer;
		FONT-FAMILY: verdana; 
		FONT-SIZE: 14px;
	}
	td{ 
		PADDING-LEFT: 10px;
		border:solid 1px #719BC3;
	}
	a{
		color: black;
		outline: none; /*去掉超级链接的虚线框*/
	}
	a:link,a:visited{ text-decoration:none;  /*超链接无下划线*/	}
	a:hover{ text-decoration:underline;  /*鼠标放上去有下划线*/}
	a:active {star:expression(this.onFocus=this.blur()); /*去掉超级链接的虚线框*/} 
	
	.Normal{background:none;}
	.Current{background: #B2E1F1;}
	</style>

  </head>
  
  <body>
  
  	<table width='100%' height='100%' border='1' cellspacing='0' cellpadding='1'><tr id='menu1'><td><a href='getnexttree.action?id=1' target='menuTree' οnclick='changeColor(1)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/1.gif' />  我的流程</a></td></tr><tr id='menu2'><td><a href='getnexttree.action?id=2' target='menuTree' οnclick='changeColor(2)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/2.gif' />  我的文档</a></td></tr><tr id='menu3'><td><a href='getnexttree.action?id=3' target='menuTree' οnclick='changeColor(3)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/3.gif' />  我的通信</a></td></tr><tr id='menu4'><td><a href='getnexttree.action?id=4' target='menuTree' οnclick='changeColor(4)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/4.gif' />  我的人事</a></td></tr><tr id='menu5'><td><a href='getnexttree.action?id=5' target='menuTree' οnclick='changeColor(5)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/5.gif' />  我的任务</a></td></tr><tr id='menu6'><td><a href='getnexttree.action?id=6' target='menuTree' οnclick='changeColor(6)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/6.gif' />  我的资产</a></td></tr><tr id='menu7'><td><a href='getnexttree.action?id=7' target='menuTree' οnclick='changeColor(7)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/7.gif' />  我的会议</a></td></tr><tr id='menu8'><td><a href='getnexttree.action?id=8' target='menuTree' οnclick='changeColor(8)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/8.gif' />  我的商务</a></td></tr><tr id='menu9'><td><a href='getnexttree.action?id=9' target='menuTree' οnclick='changeColor(9)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/9.gif' />  我的助手</a></td></tr><tr id='menu10'><td><a href='getnexttree.action?id=10' target='menuTree' οnclick='changeColor(10)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/10.gif' />  信息中心</a></td></tr><tr id='menu11'><td><a href='getnexttree.action?id=11' target='menuTree' οnclick='changeColor(11)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/11.gif' />  系统管理</a></td></tr><tr id='menu12'><td><a href='getnexttree.action?id=12' target='menuTree' οnclick='changeColor(12)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/12.gif' />  图形报表</a></td></tr><tr id='menu13'><td><a href='getnexttree.action?id=13' target='menuTree' οnclick='changeColor(13)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/13.gif' />  我的协作</a></td></tr><tr id='menu14'><td><a href='getnexttree.action?id=14' target='menuTree' οnclick='changeColor(14)'><img align='middle' border='0' src='index_files/leftMenuFiles/mainMenuInco/14.gif' />  我的相册</a></td></tr></table>

  
  </body>
</html>


 

 

 



lgx06
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
随着鼠标的移动变换表格背景色
辛佳雨的专栏
07-16 2279
function mOvr(src) {if (!src.contains(event.fromElement)) {src.style.cursor = hand; src.bgColor = "#FDEAB5";}}function mOut(src) {if (!src.contains(event.toElement)) {src.style.cursor = default; s
关于标题栏颜色随滚动而变换透明度
yikunhan的博客
04-21 546
近日项目中遇到一个问题，让标题栏的颜色随着页面的滚动而变化，这个效果可以使用系统自带的API实现： Color.argb(int alpha,int red,int green,int blue)这个API可以实现透明度渐变，在界面滑动监听中获得滑动的距离与最大滑动的比值，根据比值来确定透明的程度，代码如下   float f = dis / mWidth; float al
表格随鼠标变颜色
Me_zhen的专栏
08-02 919
序号申请时间申请公司联系人服务名称关务港口客户名称客户编码
JavaScript-表格动态变色
qq_39111074的博客
09-26 458
表格分为：表头、表格主体 两部分 当移动到表格主体的行时，移动到哪一行，哪一行就变化颜色，区分我们选中的行数，更明显的看到选中了哪一行 实现思路 获取表格主体的所有行 css定义一个背景颜色类 for循环遍历，将每行都分别绑定onmouseover、onmouseout事件， onmouseover（鼠标经过）- - - 该行类名赋值定义好的背景颜色类名 onmouseout（鼠标离开）- - - 该行类名赋值空 注意：这里不用排他思想，用排他思想，鼠标离开的最后的一行会有颜色 代码示例： <!
【Excel行颜色】表格行变色 鼠标移动变色 【Excel颜色】Worksheet_SelectionChange Color
刘贵庆的博客
03-30 9594
Excel表格设置颜色定位,容易查找到对应的数据。
关于HTML中的滚动条使用技巧分享
12-08
如果不想在页面中显示滚动条，可以使用CSS来实现。例如，通过在元素的样式中添加`overflow-x: hidden; overflow-y: hidden;`，可以隐藏水平和垂直滚动条。 3. **指定滚动条出现的区域**： 要在特定的元素（如`...
jQuery实例（菜单、滚动、层隐藏等）
03-14
"隔行变色"通常通过CSS实现，但使用jQuery可以动态改变表格行的类名，以实现动态的奇偶行颜色切换。"表格的光棒效果"可能是当鼠标悬浮在表格单元格上时，高亮显示整行或单元格。这可以通过`.mouseover()`和`.mouse...
easyui框架实现的表格数据拖拽功能配套的demo小文件.rar
01-05
首先，"easyui框架实现的表格数据拖拽功能"是指通过EasyUI的API和事件处理，使用户能够通过鼠标拖放操作来改变表格中的数据位置。这在某些需要调整数据顺序或进行数据分配的应用中非常实用。EasyUI提供了强大的数据...
程序天下:JavaScript实例自学手册
07-08
9.23 用键盘上下键实现表格行的上下选择 9.24 用JavaScript隐藏或显示表格列 9.25 滚动的表格 9.26 交换表的行 9.27 动态拖放表格的宽度 9.28 可输入内容的表格 9.29 可以分级的表格隐藏 9.30 动态创建表格并实现...
JavaScript的各种页面，表格，窗口，按钮，链接等特效
05-29
本教程将探讨JavaScript在实现页面、表格、窗口、按钮和链接等元素的各种特效方面的应用。 1. 页面特效： - 滚动条：JavaScript可以控制页面滚动，如创建平滑滚动效果，或者自定义滚动条样式。 - 动态加载：通过...
【JavaScript】鼠标经过表格变色
汤圆小丸叽的博客
09-10 843
<!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" /> <titl
js实现 表格框选 并且 变色 （原生js实现在表格用鼠标框选并有反选功能）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
10-12 976
原生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"> ..
JavaScript实现跟随鼠标移动的div，和一串跟随鼠标的div，鼠标移入移出实现图片的颜色淡入淡出
Hern（宋兆恒）
07-22 663
1.一直跟着鼠标移动的div： 原理是div的left和top值有oEvent.clientX+scrollLeft鼠标指针向对于浏览器页面（或客户区）的水平坐标+元素中滚动条的水平偏移 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t...
js使用onclick方法实现点击表格整行/列变色
h220801__zzl的博客
09-07 1699
js dom阶段学习作业
JavaScript - 选项栏底色跟随鼠标移动而变化
Codefreyy
03-25 1673
//当鼠标经过某个li，就把current类（变红加下划线赋予给它） for (var i = 0; i < lis.length; i++) { var current = 0; //声明一个变量记录当前红色块的位置 lis[i].addEventListener('mouseenter', function () { move(cloud, this.offsetLeft);
js 当鼠标移动到表格一行上时，该行背景颜色改变
xyr05288的专栏
05-08 1万+
1. js，当鼠标移动到表格一行上时，该行背景颜色改变 var rows=document.getElementsByTagName('tr') for(var i=0;i<rows.length;i++){ rows[i].onmouseover=function(){ this.className+='highlight'; } rows[i].o
原生js利用鼠标滚轮实现滚动到当前页面实现动画效果
热门推荐
小白变怪兽
12-04 1万+
滚滚屏 原生js 动画 滚轮 mousewheel
js鼠标滚动 mousewheel
wq1856225的博客
10-08 2663
滚轮事件的兼容性差异有些不拘一格，不是以往的IE8-派和其他派，而是FireFox派和其他派。 包括IE6在内的浏览器是使用onmousewheel，而FireFox浏览器一个人使用DOMMouseScroll. 经自己测试，即使现在FireFox 19下，也是不识onmousewheel。 与mousewheel对应的event对像除了包含鼠标所有标准信息外，还包括wheelDelta特殊属性
用HTML，css，JavaScript写出南昌航空大学科技学院的官网页面的源代码，功能包括学院概况导航栏的下拉菜单功能：当鼠标悬停在导航栏上时，下拉菜单会自动展开，以显示更多选项。 轮播图的自动播放功能：网站首页通常会有轮播图，自动播放可以让用户更快速地了解网站的主要内容。 页面滚动时的动画效果：当用户向下滚动页面时，可以通过JS实现一些动画效果，如淡入、淡出、滑动等，以吸引用户的注意力。 表格和图表的交互功能：在学校官网的一些页面中，可能会展示一些数据表格和图表，JS可以实现用户与这些表格和图表的交互，如排序、筛选、缩放等。 表单的验证功能：学校官网中可能会有一些表单，JS可以实现表单的验证功能，以确保用户输入的数据符合要求
最新发布
06-07
很抱歉，我作为一个语言模型并没有本地环境，无法为您提供完整的南昌航空大学科技学院的官网页面的源代码。但是，我可以提供一些示例代码，来帮助您了解如何使用 HTML、CSS 和 JavaScript 实现一些基本的功能： 1. 学院概况导航栏的下拉菜单功能 HTML 代码： ``` <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">学院概况</a> <ul> <li><a href="#">学院简介</a></li> <li><a href="#">历史沿革</a></li> <li><a href="#">现任领导</a></li> </ul> </li> <li><a href="#">专业设置</a></li> <li><a href="#">师资队伍</a></li> <li><a href="#">教学科研</a></li> <li><a href="#">招生就业</a></li> <li><a href="#">校友之家</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> ``` CSS 代码： ``` nav ul ul { display: none; } nav ul li:hover > ul { display: block; } ``` 2. 轮播图的自动播放功能 HTML 代码： ``` <div class="slideshow"> <img src="img/slide1.jpg" alt="Slide 1"> <img src="img/slide2.jpg" alt="Slide 2"> <img src="img/slide3.jpg" alt="Slide 3"> <img src="img/slide4.jpg" alt="Slide 4"> </div> ``` CSS 代码： ``` .slideshow { position: relative; width: 100%; height: 400px; } .slideshow img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; } .slideshow img:first-child { opacity: 1; } .slideshow img.active { opacity: 1; } .slideshow img.last-active { opacity: 0; } ``` JavaScript 代码： ``` var slides = document.querySelectorAll('.slideshow img'); var currentSlide = 0; var slideInterval = setInterval(nextSlide, 5000); function nextSlide() { slides[currentSlide].className = ' '; currentSlide = (currentSlide + 1) % slides.length; slides[currentSlide].className = 'active'; } ``` 3. 页面滚动时的动画效果 HTML 代码： ``` <div class="animate"> <h1>这是一个动画标题</h1> <p>这是一个动画段落</p> </div> ``` CSS 代码： ``` .animate { opacity: 0; transform: translateY(100px); transition: all 1s ease-in-out; } .animate.active { opacity: 1; transform: translateY(0); } ``` JavaScript 代码： ``` var animate = document.querySelector('.animate'); var windowHeight = window.innerHeight; function checkPosition() { var positionFromTop = animate.getBoundingClientRect().top; if (positionFromTop - windowHeight <= 0) { animate.classList.add('active'); } } window.addEventListener('scroll', checkPosition); window.addEventListener('resize', checkPosition); checkPosition(); ``` 4. 表格和图表的交互功能 HTML 代码： ``` <table> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>22</td> <td>女</td> </tr> <tr> <td>王五</td> <td>21</td> <td>男</td> </tr> </tbody> </table> ``` JavaScript 代码： ``` var table = document.querySelector('table'); var headers = table.querySelectorAll('th'); var rows = table.querySelectorAll('tbody tr'); function sortTable(index, asc) { var dir = asc ? 1 : -1; var rowsArray = Array.prototype.slice.call(rows); rowsArray.sort(function(rowA, rowB) { var cellA = rowA.querySelectorAll('td')[index].textContent.trim(); var cellB = rowB.querySelectorAll('td')[index].textContent.trim(); if (cellA < cellB) { return -1 * dir; } else if (cellA > cellB) { return 1 * dir; } else { return 0; } }); rowsArray.forEach(function(row) { table.querySelector('tbody').appendChild(row); }); } [].forEach.call(headers, function(header, index) { header.addEventListener('click', function() { var asc = this.classList.contains('asc'); sortTable(index, !asc); this.classList.toggle('asc'); this.classList.toggle('desc'); }); }); ``` 5. 表单的验证功能 HTML 代码： ``` <form> <label for="name">姓名：</label> <input type="text" id="name" required> <br> <label for="email">邮箱：</label> <input type="email" id="email" required> <br> <label for="password">密码：</label> <input type="password" id="password" required> <br> <button type="submit">提交</button> </form> ``` JavaScript 代码： ``` var form = document.querySelector('form'); var nameInput = document.querySelector('#name'); var emailInput = document.querySelector('#email'); var passwordInput = document.querySelector('#password'); form.addEventListener('submit', function(event) { if (!nameInput.validity.valid) { alert('请输入姓名！'); event.preventDefault(); } if (!emailInput.validity.valid) { alert('请输入正确的邮箱地址！'); event.preventDefault(); } if (!passwordInput.validity.valid) { alert('请输入密码！'); event.preventDefault(); } }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值