jquery实现全文检索与鼠标滑过工具栏特效
最后更新于：2022-04-01 10:28:47
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>
~~~