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

来源：互联网发布：汤灿下落知乎编辑：程序博客网时间：2024/06/02 12:02

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>

0 0