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. 集合框架null与size=0

    被QA人员一眼指出来的问题,唉,好丢人 上栗子

  2. Java中数组复制的几种方法

    /** * @author zhengbinMac */ public class Test { public static void main(String[] args) { int[] arra ...

  3. 【转】Github轻松上手3-使用Tower图形化界面工具创建和管理repo

    转自:http://blog.sina.com.cn/s/blog_4b55f6860100zzib.html 除了在命令行中输入特定的命令,另外一种方式就是用第三方的可视化工具,比如Mac下的Tow ...

  4. 线程----BlockingQueue (转)

    t java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.BlockingQueue; import java.ut ...

  5. PHP开发规范

    十.开发规范下面我们讲解 Yii 编程中推荐的开发规范.为简单起见,我们假设 WebRoot 是 Yii 应用安装的目录.1.URL默认情况下,Yii 识别如下格式的 URL: http://host ...

  6. eclipse quick diff功能

    Eclipse文本编辑器和Java编辑器都提供了quick diff功能.这就使得你可以快速地识别出当前所编辑文件版本和该文件的参考版本之间的不同. 如果编辑器的quick diff功能没有启用,可以 ...

  7. Python 用 os.walk 遍历目录

    今天第一次进行 文件遍历,自己递归写的时候还调试了好久,(主要因为分隔符号的问题),后来发现了os.walk方法,就忍不住和大家分享下. 先看下代码: import os for i in os.wa ...

  8. Chapter12&Chapter13：程序实例

    文本查询程序 要求:程序允许用户在一个给定文件中查询单词.查询结果是单词在文件中出现的次数及所在行的列表.如果一个单词在一行中出现多次,此行只列出一次. 对要求的分析: 1.读入文件,必须记住单词出现 ...

  9. 凸包模板 POJ1873

    // 凸包模板 POJ1873 // n=15所以可以按位枚举求凸包,再记录数据 #include <iostream> #include <cstdio> #include ...

  10. 前端技能汇总 Frontend Knowledge Structure

    Frontend Knowledge Structure 项目起源 还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有 ...