jQuery实现当鼠标移动到当前行时当前行高亮显示

效果图如下
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src = "jquery.min.js"></script>
	<style type="text/css">		
		.table-c table{
			border-right:1px solid #F00;
			border-bottom:1px solid #F00;
		}
		.table-c table td{
			border-left:1px solid #F00;
			border-top:1px solid #F00;
		}
	</style>
</head>
<body>
<div class="table-c">
<table width="400" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td width="105">姓名</td>
		<td width="181">年龄</td>
		<td width="112">地址</td>
	</tr>
	<tr>
		<td width="105">法师</t
可以使用 `onScroll` 和 `onLayout` 属性来实现。具体步骤如下: 1. 在 `ScrollView` 组件中添加 `onScroll` 属性,监听滚动事件。 2. 在每文本组件中添加 `onLayout` 属性,监听组件布局事件,获取当前的位置信息。 3. 在 `onScroll` 回调中,通过 `nativeEvent.contentOffset.y` 获取当前滚动的垂直位置。 4. 遍历所有文本组件,计算每的位置信息,判断当前滚动位置处于哪一,设置该高亮样式。 示例代码如下: ``` import React, { useState } from 'react'; import { ScrollView, Text, View } from 'react-native'; const LineText = ({ text }) => { const [isHighlight, setIsHighlight] = useState(false); const [lineLayout, setLineLayout] = useState({}); const handleLayout = event => { setLineLayout(event.nativeEvent.layout); }; return ( <Text onLayout={handleLayout} style={{ backgroundColor: isHighlight ? 'yellow' : 'transparent' }} onPress={() => setIsHighlight(!isHighlight)} > {text} </Text> ); }; const HighlightScrollView = ({ texts }) => { const [highlightIndex, setHighlightIndex] = useState(0); const handleScroll = event => { const scrollY = event.nativeEvent.contentOffset.y; let index = 0; let minDistance = Number.MAX_SAFE_INTEGER; texts.forEach((text, i) => { const distance = Math.abs(lineLayouts[i].y - scrollY); if (distance < minDistance) { minDistance = distance; index = i; } }); setHighlightIndex(index); }; const lineLayouts = texts.map(() => ({})); const handleLineLayout = index => event => { lineLayouts[index] = event.nativeEvent.layout; }; return ( <ScrollView onScroll={handleScroll}> {texts.map((text, i) => ( <View key={i} onLayout={handleLineLayout(i)}> <LineText text={text} isHighlight={i === highlightIndex} /> </View> ))} </ScrollView> ); }; export default HighlightScrollView; ``` 在上面的代码中,`LineText` 组件代表每一文本,`HighlightScrollView` 组件代表高亮滚动视图。`LineText` 组件中通过 `onLayout` 获取每一的位置信息,通过 `isHighlight` 属性设置该是否高亮。`HighlightScrollView` 组件中通过 `onScroll` 监听滚动事件,通过遍历所有文本组件计算出当前滚动位置处于哪一,设置该高亮样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值