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讀取后臺數據