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. 【转】使用Xcode和Instruments调试解决iOS内存泄露

    原文网址:http://blog.csdn.net/totogo2010/article/details/8233565 虽然iOS 5.0版本之后加入了ARC机制,由于相互引用关系比较复杂时,内存泄 ...

  2. Windows下配置cygwin和ndk编译环境

    cygwin安装 正确的安装步骤其实很简单:1. 下载setup-86_64.exe 2. 直接从网上下载安装,选择包时,顶部选择“default”不变 3. 搜索make,勾选make,cmake, ...

  3. Android 适配多种ROM的快捷方式

    快捷方式 应该来说 很多人都做过,我们就来看一下基本的快捷方式 是怎么实现的,会有什么问题? 首先 肯定要获取权限: <!-- 添加快捷方式 --> <uses-permission ...

  4. 微软官方的一段JavaScript判断.net环境

    <HTML> <HEAD> <TITLE>Test for the .NET Framework 3.5</TITLE> <META HTTP-E ...

  5. 1.解剖Linq to object

    LINQ想必大家都不陌生了,它的出现使得我们的代码变得更短.更优雅了.至于LINQ是什么,Linq to object这类的扩展方法到底做了些什么.我们使用的EF是如何实现的(如何解析Expressi ...

  6. JDBC用ResultSet访问大量数据时会遇到的问题

    我们经常需要JDBC来对数据库就行操作,一般流程为连接数据库.通过sql语句把需要的数据取出来保存到ResultSet,然后调用ResultSet方法的类似 getString,getInt()等方法 ...

  7. [转]Linux中文件权限目录权限的意义及权限对文件目录的意义

    转自:http://www.jb51.net/article/77458.htm linux中目录与文件权限的意义 一.文件权限的意义 r:可以读这个文件的具体内容: w:可以编辑这个文件的内容,包括 ...

  8. Javascript兼容和CSS兼容总结

    javascript部分 1. document.form.item 问题问题:代码中存在 document.formName.item(“itemName”) 这样的语句,不能在FF下运行解决方法: ...

  9. JavaScript对象(正则表达式,Date对象,function对象 arguments对象)

    好用的技术教程:http://www.w3school.com.cn/index.html 1:正则表达式 正则表达式通常用于验证表单 定义语法为 / / 2:Date对象 var now = new ...

  10. Yii笔记---redirect重定向

    Yii的redirect方法在CControler与CHttpRequest之中都有被定义,CController中的redirect调用了CHttpRequest中的redirect方法.我们平常调 ...