您的位置：首页 > Web前端 > JQuery

jquery实现全文检索与鼠标滑过工具栏特效

2015-12-15 22:34 555 查看

1、鼠标滑过工具栏特效

	<!DOCTYPE html>

	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<title>鼠标移动到div上时出现随鼠标移动的提示框</title>
	<style>
	.hover{
	width:300px;
	height:300px;
	border:2px black solid;
	}
	.tooltip{
	border:2px black solid;
	width:100px;
	height:40px;
	position:absolute;
	}
	</style>
	<script src="jquery-1.4.1.min.js"></script>
	<script>
	$(document).ready(function () {
	//hover事件
	//hover事件第一个函数设定为鼠标移入时执行的效果，第二个函数为移出时
	$(".hover").hover(function () {
	$(".tooltip").fadeIn("slow");
	},
	function () {
	$(".tooltip").fadeOut("slow");
	});

	//接下来设定tooltip随鼠标运动
	$('.hover').mousemove(function (e) {
	var topPosition = e.pageY + 5;
	var leftPosition = e.pageX + 5;
	$(".tooltip").css({
	'top': topPosition + 'px',
	'left': leftPosition + 'px'
	});
	});
	});
	</script>
	</head>
	<body>
	<div class="tooltip" style="display:none">This is the tool tip</div>
	<div class="hover"></div>
	</body>
	</html>

2、实现全文检索

	<!DOCTYPE html>

	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<style>
	.highlight{
	background-color:yellow;
	}
	</style>
	<title></title>
	<script src="jquery-1.4.1.min.js"></script>
	<script>
	$(document).ready(function () {
	$("#search").click(highlight);
	$("#clear").click(clearSelection);
	function highlight() {
	var searchText = $('#text').val();

	var regExp = new RegExp(searchText, 'g');
	clearSelection();
	$('p').each(function () {
	var html = $(this).html();
	var newHtml = html.replace(regExp, '<span class="highlight">' + searchText + '</span>');
	$(this).html(newHtml);
	});
	}
	function clearSelection() {
	$('p').each(function () {
	$(this).find('.highlight').each(function () {
	$(this).replaceWith($(this).html());
	});
	});
	}
	});
	</script>
	</head>
	<body>
	<p>
	askldjaioshdqknhasd askdjnwqm,ndas egme asldkjwqndmd qlakdjqowied aksjdhjakhsduiqowhndmsanmdnbqwbedmanbdikuj
	askldjaioshdqknhasd askdjnwqm,ndas awqdfdxcvc,wme asldkjwqndmd qlakdjqowied aksjdhjakhsduiqowhndmsanmdnbqwbedmanbdikuj
	askldjytijkmh askdjnwqm,ndas awqdkqwer123eqowied aksjdhjakhsduiqowhndmsanmdnbqwbedmanbdikuj
	askldjaioshdqknhasd askdjnwqm,ndas awqdklnjq,wme asldkjwqndmd qlakdjqowied aksjdhjakdsf vb546yrtghfhyunbdikuj
	askldjaiwerbgvbtyrtyhngfscxjwqndmd qlakdjqowied aksjdhjakhsduiqowhndmsanmdnbqwbedmanbdikuj
	tyrgbsd askdjnwqm,ndas awqdkergfdvcksjdhjakhsduiqowhndmsanmdnbqwbedmanbdikuj
	</p>
	<input type="search" id="text" />
	<input type="button" value="search" id="search" />
	<input type="button" value="clear" id="clear" />
	</body>
	</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航