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>



相关阅读:
CSS3制作酷炫的三维相册效果
javascript中indexOf技术详解
js实现ArrayList功能附实例代码
C标准库<assert.h>的实现详解
jQuery中ajax - get() 方法实例详解
Win8.1系统在安全模式下杀毒教程
Android 取得状态栏、任务栏高度的小例子
js检测网络是否具体连接功能的代码
用Autoconf检测MySQL软件包的教程
Android获取屏幕或View宽度和高度的方法
php文件服务实现虚拟挂载其他目录示例
C++设计模式之观察者模式
html5配合css3实现带提示文字的输入框(摆脱js)
JavaScript检测字符串中是否含有html标签实现方法
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 学习小学生英语语言综合运用能力培养的途径心得体会 科代表的培训材料 光的传播(详案) 学习雷锋好榜样400字作文 工资涨了,物价也涨了,老板好坑有木有!!! 初三加油经典励志语录精选 刚强的生命 残期作文400字 快乐的老孙头 小学四年级作文400字:废墟的哭喊的孩子 我不在天真了 2016教师年终总结范文 半年工作总结开头【范文】 义务植树倡议书精选 我还要回来! 【励志文章】苦是生活的原味,累是人生的本质 初中初二作文800字:《舟过安仁 改写 小学五年级作文500字:竹石(全本) - 第一话 月儿森林 【元宵节作文】元宵节在家乡 《回乡路上》之二连载中 名人的作文600字 中秋节作文英文:Mid-Autumn Day 我爱广州——东湖公园作文500字 一只马蜂读后感 家园2025 (优秀)入团申请书范文 小学四年级作文400字:看妈妈烧菜 丶对你の爱 ~ 捡拾忽略的美好作文600字 小学四年级作文450字:开学的新计划 那曾感动我的温暖拥抱作文700字 《谢谢你能懂我—菲》 小学四年级作文350字:第一次挂上红领巾 触摸旧时光 我的课余生活??篮球 森林的心愿 关于幸福的优美段落 不能与别人相对,每个人都属有不同的幸福 虽远,又近 木椅和我的对话作文800字 人生最大的资本是人品 幼儿教师随笔:公开课值不值 心理咨询师蒋硕在“一刻分享沙龙”第1期的励志演讲稿 我学会了包粽子还做了老板 爸爸的车650字 太阳哭了 如何爱一个人是大声尖叫还是沉默咆哮 基层德育工作者述职述廉报告 明城探幽,钟山寻静 发改局纪检组述职述廉工作报告 在评价这一位伟人的时候

Copyright © 2016 phpStudy |