Jquery实现自定义tooltip示例代码
更新时间：2014年02月12日 17:36:06 作者：
这篇文章主要介绍了Jquery实现自定义tooltip的方法,需要的朋友可以参考下
Jquery实现自定义tooltip,具体代码如下
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication247.Default" %>
<!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 runat="server">
<title></title>
<style type="text/css">
#tooltip
{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var x = 10; //tooltip偏移鼠标的横坐标
var y = 20; //tooptip偏移鼠标的纵坐标
var myTitle;
//1. 鼠标移至新闻，去掉系统默认的tooltip，自定义tooltip
//2. 鼠标移出新闻，还原系统默认的tooltip，移除自定义的tooltip
//3. 鼠标在新闻上移动，设置自定义的tooltip的位置
$("a.tooltip").mouseover(function (e) {
myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip' style='background:lightblue;'>" + myTitle + "</div>";
$("body").append(tooltip);
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function () {
this.title = myTitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="scrollNews" >
<ul>
<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>
</form>
</body>
</html>
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication247.Default" %>
<!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 runat="server">
<title></title>
<style type="text/css">
#tooltip
{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
var x = 10; //tooltip偏移鼠标的横坐标
var y = 20; //tooptip偏移鼠标的纵坐标
var myTitle;
//1. 鼠标移至新闻，去掉系统默认的tooltip，自定义tooltip
//2. 鼠标移出新闻，还原系统默认的tooltip，移除自定义的tooltip
//3. 鼠标在新闻上移动，设置自定义的tooltip的位置
$("a.tooltip").mouseover(function (e) {
myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip' style='background:lightblue;'>" + myTitle + "</div>";
$("body").append(tooltip);
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast");
}).mouseout(function () {
this.title = myTitle;
$("#tooltip").remove();
}).mousemove(function (e) {
$("#tooltip").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="scrollNews" >
<ul>
<li><a href="#" class="tooltip" title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><a href="#" class="tooltip" title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
<li><a href="#" class="tooltip" title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
<li><a href="#" class="tooltip" title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
<li><a href="#" class="tooltip" title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
<li><a href="#" class="tooltip" title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>
</form>
</body>
</html>
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了在JavaScript中重写jQuery对象的方法,在某些情况下jQuery无法满足应用开发的时候可以采用javascript重写jQuery方法来满足功能的实现,需要的朋友可以参考下2014-08-08
本文给大家分享一款基于jQuery环形图标旋转切换特效。这是一款鼠标点击图标菜单圆形顺时针或者逆时针旋转切换代码。有需要的小伙伴可以参考下。2015-05-05
本文给大家分享的是前些日子做的项目中的一个客户的特殊要求，很少遇到，查询了好久的度娘，才算找到解决方案，这里分享给大家，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要探讨了关于jQuery判断元素是否存在的问题,需要的朋友可以参考下2014-07-07
这篇文章主要为大家详细介绍了jQuery蓝色风格滑动导航栏特效，实现滑块跟随鼠标左右滑动，简单、时尚、大方，有需要的小伙伴可以参考下2015-08-08
这篇文章主要介绍了jquery提示效果,以一个简单实例较为详细的分析了jQuery提示效果的实现方法与相关注意事项,具有一定的参考借鉴价值,需要的朋友可以参考下2014-11-11
如果你还在犹豫是否要学习一个JavaScript框架，并困惑于选择哪一个框架，那么我推荐你选择jQuery。这并非说其它框架不好，只是jQuery可能是最稳妥和最具回报性的选择。2011-04-04
Ajax在Web应用中的作用越来越大，许多工具都包含了对这一功能的使用，以下是对这些常用工具中Ajax的典型实例.2016-06-06
这篇文章主要介绍了jQuery+CSS实现的标签页效果,涉及基于jQuery的事件绑定、页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-08-08
jquery 学习之二 属性(类),需要的朋友可以参考下。2010-11-11
最新评论