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>
~~~
- 前言
- Jquery Mobile入门笔记
- 豆瓣API使用介绍及通过ajax跨域获取url的json数据的方法
- jQuery插件实战：slider.js/jquery.validate/jRating介绍
- HTML5能为我们带来什么
- js字符串主要操作方法
- jquery实现全文检索与鼠标滑过工具栏特效
- HTML5移动开发常用——XML基本知识介绍
- HTML5移动开发实战必备知识——本地存储(1)
- HTML5本地数据库详解
- 前端素材解析—利用linear制作复杂的边框效果
- HTML5开发移动web应用—JQuery Mobile(3)-列表
- Angular.js回顾+学习笔记(1)【ng-app和ng-model】
- HTML5开发移动web应用—JQuery Mobile(4)-事件
- CSS定位中的必须深究的常用技法
- Angular.js中的指令——易懂全解析
- 实践中学习AngularJS中的表单
- 高效利用Angular中内置服务
- 利用Angular.js从PHP读取后台数据