案例研究 网站的超链接和图片提示
1.超级链接提示效果
浏览器已经自带了超级链接提示,只需要在超链接中加入title属性就可以了。
HTML 代码如下:
<a href="#" title="这是我的超链接提示1.">提示</a>
然二这个提示效果的响应速度是非常缓慢的,考虑到良好的人机交互,需要的是鼠标移动到超级链接的那一瞬间出现提示,这时就需要移除<a>标签中的title提示效果,自己动手做一个类似功能
的提示。
首先在空白的页面上,添加两个普通超级链接和两个带有class的超级链接。
<p><a href="#" class="tooltip" title="这是我的超级链接提示1">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超级链接提示2">提示2</a></p>
<p><a href="#" title="这是自带提示1">自带提示1</a></p>
<p><a href="#" title="这是自带提示2">自带提示2</a></p>
然后为class为tooltip的超链接添加mouseover和mouseout事件,jquery代码如下:
$("a.tooltip").mouseover(function(){
//显示
}).mouseout(function(){
//隐藏
});
实现这个效果的具体思路如下。
(1)当鼠标滑入超链接。
1创建一个<div>元素,<div>元素的内容title属性的值。
2将创建的元素追加到文档中.
3.为它设置x坐标和y坐标,使他显示在鼠标位置的旁边 。
(2) 当鼠标滑出超级链接,移动<div>元素
根据分析的思路,写出如下jQuery代码
$(function(){
$("a.tooltip").mouseover(function(e){
var tooltip="<div id='tooltip'> "+this.title+"</div>"; //创建<div>元素
$("body").append(tooptip);
$("#tooltip").css({
"top":e.page+"px",
"left":e.page+"px"
}).show("fast");
}).mouseout(function(){
$("#tooltip").remove();//移动
})
});
此时的效果有两个问题:首先是当鼠标滑过后,<a>标签中的title属性的提示也会出现;
其次是设置x坐标和y坐标的问题,由于自制的提示与鼠标的距离太近,有时候会引起无法提示的问题
(1)当鼠标滑入时,给对象添加一个新属性,并把title的值传给这个属性,然后清空属性title的值。
this.mytitle=this.title;
this.title="";
var tooltip="<div id='tooltip'>"+this.Mytitle+"</div>";
(2)当鼠标发出时,再把对象的mytile属性的值有赋给属性title
jquery代码如下:
this.title=this.Mytitle;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字提示</title>
<!-- 引入jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标,并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
//]]>
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
</body>
</html>
转载于:https://www.cnblogs.com/liuyong/archive/2011/03/22/1991440.html