用jquery实现超链接提示--写给爱美的猿弟，猿妹

最新推荐文章于 2020-05-03 23:37:05 发布

u011886490

最新推荐文章于 2020-05-03 23:37:05 发布

阅读量595

点赞数

分类专栏： IT职场

本文链接：https://blog.csdn.net/lampzdrj/article/details/10599293

版权

IT职场专栏收录该内容

928 篇文章 0 订阅

订阅专栏

//在新闻类的网站上经常见到这种超链接提示，默认效果很差劲，又慢又单调，在一些网页布局很紧张的网页上（一如北京的房子）还经常出现超出长度用"..."来代替的用法
//这里用jquery写一个超链接提示，给爱美的学弟学妹，祝大家学习愉快，欢迎兄弟姐妹们拍砖指正
1.实现后的效果如下：

2.设计思想：
//1.获取a元素,当鼠标移动到元素上时提取元素的title内容,并将其默认值清空,为祖元素li添加一个类以提示选中
//2.创建一个div元素,内容是原来title的内容,并将元素添加到当前页面(注意定位问题)
//3.当鼠标离开a元素时要清除创建的元素,删除li的classname为h的类,把默认title还原
//4.当鼠标移动时让提示跟随
//说明:
// jquery已经解决事件的兼容性问题
// 创建的div元素要有absolute定位
3.具体的jquery代码：

<script type='text/javascript'>
$(function(){
//====================以下这部分是给列表添加序号==================================
var s = $(".s"); //获取序号标签的对象
//循环将class 为s 的元素的文本修改成对应的序号
//可以有多种方式,这里用最容易理解的一种
for(var i=1;i<=s.length;i++){
s.eq(i-1).text(i);
}
//下边是给前三个序号不同的背景
s.eq(0).css("background","blue"); //第一个
s.eq(1).css("background","purple"); //第二个
s.eq(2).css("background","yellow"); //第三个
//=====================以下部分是给A标签添加提示代码===============================
// 设计思路
//1.获取a元素,当鼠标移动到元素上时提取元素的title内容,并将其默认值清空,为祖元素li添加一个类以提示选中
//2.创建一个div元素,内容是原来title的内容,并将元素添加到当前页面(注意定位问题)
//3.当鼠标离开a元素时要清除创建的元素,删除li的classname为h的类,把默认title还原
//4.当鼠标移动时让提示跟随
//说明:
// jquery已经解决事件的兼容性问题
// 创建的div元素要有absolute定位
$("a").mouseover(function(e){
//获取当前元素的祖父元素中的li元素,并为其添加一个h类
$(this).parents("li").addClass("h");
//把默认的title赋值给this.t
this.t = this.title;
//清空title,解决a的title的默认事件
this.title = "";
//创建提示内容的元素,并将其追加到当前页面
$("<divid='ti'>"+this.t+"</div>").appendTo("body");
//为ti添加样式
//e.pageX 获取鼠标当前相对于窗口的x坐标
//e.pageY 获取鼠标当前相对于窗口的y坐标
//absolute 相当body绝对定位,不影响标准文档流
$("#ti").css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+10)+"px",
"color":"green",
"position":"absolute"
}).show("fast");
}).mouseout(function(){
//删除li的h类
$(this).parents("li").removeClass("h");
//还原title的默认值
this.title = this.t;
//删除提示
$("#ti").remove(); }).mousemove(function(e){
//实时的获取鼠标的位置坐标,让ti跟随鼠标移动
$("#ti").css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+10)+"px"
});
});
});
</script>
4.HTML 和 CSS部分的代码：
<!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>
<script src='jquery.js'></script>
<style>
.box {
width:500px;
height:300px;
line-height:30px;
background:#eee;
padding:20px 0 0 15px;
}
.box ul {
margin:0;
padding:0;
list-style:none;
}
.box ul li {
display:block;
width:400px;
height:26px;
line-height:26px;
list-style-type:none;
border-bottom:1px dashed #000;
}
.box ul li.h {
background:pink;
}
.box a:link , .box a:visited {
font-size:12px;
text-decoration:none;
display:block;
width:300px;
height:26px;
line-height:26px;
color:#666;
float:left;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;
}
.box .s {
width:15px;
height:15px;
background:#ccc;
line-height:15px;
display:block;
float:left;
text-align:center;
margin:5px 10px 0 2px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><div class="s">1</div><a href="#" title="用jquery实现超链接提示--写给爱美的猿弟，猿妹.111">用jquery实现超链接提示--写给爱美的猿弟，猿妹< /a></li>
<li><div class="s">1</div><a href="#" title="我们都是好孩子，好好学习天天向上！我们都是好孩子，好好学习天天向上！.222">我们都是好孩子，好好学习天天向上！我们都是好孩子，好好学习天天向上！</li>
<li><div class="s">1</div><a href="#" title="如果有图片可以实现更漂亮的效果.333">我们都是好孩子，好好学习天天向上！如果有图片可以实现更漂亮的效果</a& gt;</li>
<li><div class="s">1</div><a href="#" title="wo men dou shi hao hai zi.444">我们都是好孩子，好好学习天天向上！</li>
<li><div class="s">1</div><a href="#" title="wo men dou shi hao hai zi.555">我们都是好孩子，好好学习天天向上！</li>
<li><div class="s">1</div><a href="#" title="wo men dou shi hao hai zi.666">我们都是好孩子，好好学习天天向上！</li>
</ul>
</div>
</body>
</html>6.
//完毕,祝大家学习愉快
//欢迎各位兄弟姐妹指正，拍砖
//联系:xcl0520@sina.com