web2.0的发展促使web前端的快速发展,jquery是一个简单而优秀的ajax框架,通过它简单的可以实现跟多的web特效,以及ajax效果。
何为提示框?当鼠标滑过某处时希望系统能给出更详尽的提示,那么这时就需要一个提示框,常规页面通过html便签的title属性来实现,下面来通过jquery来实现,而jquery的插件jquery.corner.js可以实现框体产生圆角则更加优美。
对于jquery.js框架以及其插件可以从其官网上直接下载,这里不再提供,直接使用范例。
文件结构
js/jquery-1.8.3.js
js/jquery.coener.js
js/app.js
css/main.css
index.html
其中jquery.js、jquery.coener.js是引入的框架及其插件
index.html
<!DOCTYPE HTML>
<html>
<head>
<title>my tip</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"> </script>
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/main.css" />
</head>
<body>
<div id=tip style="display:none"></div>
<a title="I am a title tip!">title tip</a>
<br>
<br>
<br>
<a id=tooltip rel="I am a corner toolstip!" >tooltip</a>
</body>
</html>
* { margin: 0; padding:0; }
body{
color:#2d1904;
background-color: #83b830;
position: relative;
clear: both;
margin: 2px auto auto auto;
width:80%;
padding:5px 5px 5px 35px;
}
#tip{
position: absolute;
width:250px;
z-index:1000;
border: 2px solid #2d2a2a;
background-color: #ffffff;
padding:7px 30px 10px 25px;
}
js/app.js
$(document).ready(function() {
$('#tip').corner("10px");
$("#tooltip").hover(function(){DoTip(this.rel)},function(){$('#tip').hide('fast').empty();})
.click(function(){$('#tip').slideUp().empty();});
function DoTip(rr){
$(document).mousemove(function(e){
var MyX=e.pageX;
var MyY=e.pageY;
var myx=MyX+2;
$("#tip").css({left:myx,top:MyY});
});
$("#tip").html('<br>'+rr+'');
$("#tip").show("fast");
return true;
};
});
效果如图: