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 交通频道 作文范文 那一次,我受到过了老师的很多次表扬作文700字 五好党支部创建活动实施方案 学会感恩主题班会演讲稿 感恩父母——诗歌朗诵作文700字 一个人习惯一个人 关于跑步的励志格言,送给每天晨跑的你! 2015年国培计划心得体会(中学) 突然想起同桌的你作文100字 美丽的杭州植物园 【月光爱人】 味道好极了550字作文 2014上半年设计师工作总结范文 志愿者精神演讲稿 最初的美好在那淡淡的岁月里渐行渐远 不愿告别,却总在告别 2050年的世界作文900字 2016开办“生态农业与旅游”专业的可行性分析报告 我最喜欢的一种动物作文500字 复兴中华,拯救华夏 初中英语文章长篇50篇 七年级语文教学工作总结【精品】 成长阶梯作文300字 安全生产月活动总结范文汇总 隐形的残忍作文 增强共青团员意识主题教育心得体会 携半卷愁怨,我打江南走过 最优秀的老师,是生存 咏史诗。章华台 长街灯灭 曲终人散 家访手记范文 促进科技服务业发展方法与措施 安静的日子 雨丝.落日,遐想,回忆,殇 冬的精灵作文800字 逗比搞笑日志:我爱学习学习让我快乐 学院2013学年度第一学期工作计划 中国新生代女演员周冬雨经典语录 中秋节祝福语说说 我的朋友王浩然作文150字 Xx镇xx村生态移民建设工作总结 人生如书,每个人都是自己的作者 关于端午节作文600字:端午节 妈妈的眼睛作文250字 没人扶你的时候,自己站直! 努力是奇迹的另一个名字 小学六年级作文450字:思念的味道 创建“文明大学生、文明宿舍、文明班级”决心书 时光·梦想 生命应该燃烧作文1700字 半生的绻恋

Copyright © 2016 phpStudy |