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. 【NYOJ-35】表达式求值——简单栈练习

    表达式求值 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 Dr.Kong设计的机器人卡多掌握了加减法运算以后,最近又学会了一些简单的函数求值,比如,它知道函数min ...

  2. 构建高性能web站点--读书大纲

    用户输入你的站点网址,等了半天..还没打开,裤衩一下就给关了.好了,流失了一个用户.为什么会有这样的问题呢.怎么解决自己站点“慢”,体验差的问题呢. 在这段等待的时间里,到底发生了什么?事实上这并不简 ...

  3. JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)

    继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象   类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 要做属性和方法继承的时候,要分开继 ...

  4. SQLServer如何快速生成100万条不重复的随机8位数字

    最近在论坛看到有人问,如何快速生成100万不重复的8位编号,对于这个问题,有几点是需要注意的: 1．    如何生成8位随机数,生成的数越随机,重复的可能性当然越小 2．    控制不重复 3．    ...

  5. mysql 1130 ERROR 1130: Host xxx.xxx.xxx.xxx is not allowed to connect to this MySQL server

    mysql -u root -p  mysql;use mysql;  mysql;select 'host' from user where user='root';  mysql;update u ...

  6. 小结JS中的OOP（下）

    关于JS中OOP的具体实现,许多大神级的JS专家都给出了自己的方案. 一:Douglas Crockford 1.1 Douglas Crockford实现的类继承 /** * 原文地址:http:/ ...

  7. vector 释放内存 swap

    相 信大家看到swap这个词都一定不会感到陌生,甚至会有这样想法:这不就是简单的元素交换嘛.的确,swap交换函数是仅次于Hello word这样老得不能老的词,然而,泛型算法东风,这个小小的玩意儿却 ...

  8. Codeforces Round #217 (Div. 2) c题

    C. Mittens time limit per test 1 second memory limit per test 256 megabytes input standard input out ...

  9. 无法加载 DLL“ArcGISVersion.dll”: 找不到指定的模块

    无法加载 DLL“ArcGISVersion.dll”: 找不到指定的模块.(异常来自 HRESULT:0x8007007E).

  10. show engine innodb status 详解

    找个mysql客户端,执行show engine innodb status得到如下结果: 详细信息如下: ************************************** ======= ...