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. 【转】Eclipse编辑shell的插件(shellEd)

    原文网址:http://blog.sina.com.cn/s/blog_a42d507e01019mlp.html Eclipse官方网站:http://download.eclipse.org/ 1 ...

  2. CSS隐藏元素的几种妙法

    一说起CSS隐藏元素,我想大部分小伙伴们都会想到的第一种方法就是设置display为none.这是最为人所熟知也是最常用的方法.我相信还有不少人想到使用设置visibility为hidden来隐藏元素 ...

  3. OS X中如何获取当前运行程序的路径

    OS X的执行程序一般分为两种.一种是控制台程序,一种是带有GUI的OS X应用程序. 控制台程序往往就一个文件构成executable,而GUI应用通常是一个包(即文件夹),里面除了executab ...

  4. boost的link 和 runtime-link，搭配shared 和 static

    转自:http://blog.csdn.net/yasi_xi/article/details/8660549 link:生成动态链接库/静态链接库.生成动态链接库需使用shared方式,生成静态链接 ...

  5. Linux 通过YUM安装rzsz

    yum自动安装: yum install lrzsz

  6. 判断CString字符串中各位是数字，大小写字母，符号，汉字.xml

    pre{ line-height:1; color:#1e1e1e; background-color:#e9e9ff; font-size:16px;}.sysFunc{color:#627cf6; ...

  7. grails中报Cannot create a session after the response has been committed异常的解决办法

    在grails中,我们在layouts\main.gsp中使用类似如下的代码来判断当前用户处于登录状态时显示相关的登录信息: <g:if test="${session.users}& ...

  8. 数往知来JavaScript_DOM<十>

    一.DOM   1.onclick事件 表示点击 一般用在-->跳转 a标签,希望点击的时候不去跳转,而是做别的事情,并在里面返回一个false <a href="http:// ...

  9. Firefox 对条件判断语句块内的函数声明的处理与其他浏览器有差异

    标准参考 函数声明和函数表达式 定义一个函数有两种途径:函数声明和函数表达式. 函数声明: function Identifier ( FormalParameterList opt ) { Func ...

  10. [转]https方式使用git保存密码的方式

    https方式每次都要输入密码,按照如下设置即可输入一次就不用再手输入密码的困扰而且又享受https带来的极速 设置记住密码(默认15分钟): git config --global credenti ...