提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Jquery实现自定义tooltip示例代码

jQuery代码 实现 示例 自定义 tooltip
2023-06-13 09:15:17 时间
Jquery实现自定义tooltip,具体代码如下
复制代码代码如下:

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="WebApplication247.Default"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<styletype="text/css">
#tooltip
{
position:absolute;
border:1pxsolid#333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<scriptsrc="Scripts/jquery-1.4.1.min.js"type="text/javascript"></script>
<scriptlanguage="javascript"type="text/javascript">
$(function(){
varx=10;//tooltip偏移鼠标的横坐标
vary=20;//tooptip偏移鼠标的纵坐标
varmyTitle;
//1.鼠标移至新闻，去掉系统默认的tooltip，自定义tooltip
//2.鼠标移出新闻，还原系统默认的tooltip，移除自定义的tooltip
//3.鼠标在新闻上移动，设置自定义的tooltip的位置
$("a.tooltip").mouseover(function(e){
myTitle=this.title;
this.title="";
vartooltip="<divid="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>
<formid="form1"runat="server">
<divclass="scrollNews">
<ul>
<li><ahref="#"class="tooltip"title="甜美宽松毛衣今秋一定红.">甜美宽松毛衣今秋一定红.</a></li>
<li><ahref="#"class="tooltip"title="秋装百搭小马甲不到50元.">秋装百搭小马甲不到50元.</a></li>
<li><ahref="#"class="tooltip"title="修身韩版小西装万人疯抢.">修身韩版小西装万人疯抢.</a></li>
<li><ahref="#"class="tooltip"title="夏末雪纺店主含泪大甩卖.">夏末雪纺店主含泪大甩卖.</a></li>
<li><ahref="#"class="tooltip"title="瑞丽都疯狂推荐的秋装.">瑞丽都疯狂推荐的秋装.</a></li>
<li><ahref="#"class="tooltip"title="48元长款针织小开衫卖疯啦.">48元长款针织小开衫卖疯啦.</a></li>
<li><ahref="#"class="tooltip"title="长袖雪纺衫单穿内搭都超美.">长袖雪纺衫单穿内搭都超美.</a></li>
</ul>
</div>
</form>
</body>
</html>

相关文章