1  文字提示：

<!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>

 <!--   引入jQuery -->

 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<style type="text/css">

body{

	margin:0;

	padding:40px;

	background:#fff;

	font:80% Arial, Helvetica, sans-serif;

	color:#555;

	line-height:180%;

}

p{

	clear:both;

	margin:0;

	padding:.5em 0;

}

/* tooltip */

#tooltip{

	position:absolute;

	border:1px solid #333;

	background:#f7f5d1;

	padding:1px;

	color:#333;

	display:none;

}

</style>

<script type="text/javascript">

//<![CDATA[

$(function(){

    var x = 10;

	var y = 20;

	$("a.tooltip").mouseover(function(e){

       	this.myTitle = this.title;

		this.title = "";

	    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素

		$("body").append(tooltip);	//把它追加到文档中

		$("#tooltip")

			.css({

				"top": (e.pageY+y) + "px",

				"left": (e.pageX+x)  + "px"

			}).show("fast");	  //设置x坐标和y坐标，并且显示

    }).mouseout(function(){

		this.title = this.myTitle;

		$("#tooltip").remove();   //移除

    }).mousemove(function(e){

		$("#tooltip")

			.css({

				"top": (e.pageY+y) + "px",

				"left": (e.pageX+x)  + "px"

			});

	});

})

//]]>

</script>

</head>

<body>

<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>

<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>

<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>

<p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>

</body>

</html>

　　

　

2 图片提示

<!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>

 <!--   引入jQuery -->

 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<style type="text/css">

body{

	margin:0;

	padding:40px;

	background:#fff;

	font:80% Arial, Helvetica, sans-serif;

	color:#555;

	line-height:180%;

}

img{border:none;}

ul,li{

	margin:0;

	padding:0;

}

li{

	list-style:none;

	float:left;

	display:inline;

	margin-right:10px;

	border:1px solid #AAAAAA;

}

/* tooltip */

#tooltip{

	position:absolute;

	border:1px solid #ccc;

	background:#333;

	padding:2px;

	display:none;

	color:#fff;

}

</style>

<script type="text/javascript">

//<![CDATA[

$(function(){

	var x = 10;

	var y = 20;

	$("a.tooltip").mouseover(function(e){

		this.myTitle = this.title;

		this.title = "";

		var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";

		var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素

		$("body").append(tooltip);	//把它追加到文档中

		$("#tooltip")

			.css({

				"top": (e.pageY+y) + "px",

				"left":  (e.pageX+x)  + "px"

			}).show("fast");	  //设置x坐标和y坐标，并且显示

    }).mouseout(function(){

		this.title = this.myTitle;

		$("#tooltip").remove();	 //移除

    }).mousemove(function(e){

		$("#tooltip")

			.css({

				"top": (e.pageY+y) + "px",

				"left":  (e.pageX+x)  + "px"

			});

	});

})

//]]>

</script>

</head>

<body>

<h3>有效果：</h3>

	<ul>

		<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>

		<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>

		<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>

		<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>

	</ul>

<br/><br/><br/><br/>

<br/><br/><br/><br/>

<h3>无效果：</h3>

<ul>

		<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>

		<li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>

		<li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>

		<li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>

	</ul>

</body>

</html>

　　

Jquery 提示的更多相关文章

  1. jquery $提示缺少对象$提示缺少对象

    jquery $提示缺少对象 项目中存在不同版本的jquery,有1.4也有1.2, 之前运行项目不会报错 " $提示缺少对象 ",但是我的IE9重置之后就报错,从网上找了一大堆, ...

  2. jQuery提示组件toastr（取代alert）

    给大家推荐一款jquery提示插件:toastr 它是一个可以取代alert的提示信息框,它在PC,移动设备上都有不错的UI效果. 具体使用方法如下: 1.首先在网页头站调用他需要的js和css文件. ...

  3. jquery提示sucess

    这是学习笔记. 今天做东西的时候,想把体验做好,于是打算再ajax success字段中添加函数实现提示sucess. 用了jquery的fadeIn 跟fadeOut,再fadeIn的callbac ...

  4. jquery 提示语淡入效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. idea开启jquery提示及如何找到学习目标

    idea开启jquery提示 根据这些library就知道该学习哪些技术了

  6. Eclipse通过Spket增加JQuery提示的方法

    Eclipse通过Spket增加JQuery提示的方法 1.增加在线更新源:Help->Install New Software...->Add...->Name: "Sp ...

  7. jquery提示消息，简单通用

    jquery提示消息.简单通用 function showTips(txt,time,status) { var htmlCon = ''; if(txt != ''){ if(status != 0 ...

  8. MyEclipse6.0中使用aptana插件，添加jquery提示功能

    MyEclipse6.0中使用aptana插件,添加jquery提示功能 第一:查看当前MyEclipse集成的eclipse的版本,, 查看路径    D:/MyEclipse 6.0/eclips ...

  9. ajax--->请求异常 jQuery提示parsererror错误解决办法

    ajax请求异常 jQuery提示parsererror错误解决办法 原因:出现这个错误是因为后端返回的数据类型和前端请求中dataType的要求类型不一致导致的. dataType简介:jquery ...

  10. 解决sea.js引用jQuery提示$ is not a function的问题

    在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...

随机推荐

  1. Error accessing PRODUCT_USER_PROFILE

    1.问题现象再现1)创建用户secSQL> create user sec identified by sec; User created. 2)授权SQL> grant connect, ...

  2. 【转】iOS开发UI篇—iPad和iPhone开发的比较

    原文网址:http://www.cnblogs.com/wendingding/p/3918007.html iOS开发UI篇—iPad和iPhone开发的比较 一.iPad简介 1.什么是iPad ...

  3. 史上最完整的Android开发工具集合

    路径: http://www.apkbus.com/thread-252748-1-1.html

  4. windows 不能在本地计算机启动apache2 的解决方法（不是修改端口）

    使用命令行运行apache目录下的httpd程序,它会提示哪里出错了,修改即可 D:\Program Files (x86)\Apache2.\bin\httpd

  5. dos 实用命令收集

    隐藏文件夹: H:\>attrib gho +h +s +r 解决win2012服务器上网慢:netsh int tcp set global  ecn=disable

  6. jsonp实现跨域访问

    要实现JSONP跨域访问,首先就要了解什么是跨域?然后JSONP与JSON的关系? 1.什么是跨域? 跨域简单的说就是一个域名下的程序和另一个域名下的程序做数据交互.比如说:现有一个http://ww ...

  7. Suse linux 11 SP2 nginx 使用笔记

    1. 下载源代码 http://nginx.org/en/download.html   2. DAV模块缺省没有编译,要加入编译选项 # ./configure --with-http_dav_mo ...

  8. 嵌入式 使用udev高效、动态地管理Linux 设备文件

    本文以通俗的方法阐述 udev 及相关术语的概念.udev 的配置文件和规则文件,然后以 Red Hat Enterprise Server 为平台演示一些管理设备文件和查询设备信息的实例.本文会使那 ...

  9. 数据绑定表达式(上)：.NET发现之旅(一)

    数据绑定表达式(上):.NET发现之旅(一) 2009-06-30 10:29:06 来源:网络转载 作者:佚名 共有评论(0)条 浏览次数:859 作为.NET平台软件开发者,我们频繁与各种各样的数 ...

  10. C++模板实例掌握

    前段时间重新学习C++,主要看C++编程思想和C++设计新思维.对模版的使用有了更进一层的了解,特总结如下: 下面列出了模版的常用情况:  << '\n';} //参考:http://ww ...