jQuery 学习笔记之九 (jQuery 图片提示 )

案例研究 网站的超链接和图片提示1.超级链接提示效果浏览器已经自带了超级链接提示，只需要在超链接中加入title属性就可以了。HTML 代码如下:<a href="#" title="这是我的超链接提示1.">提示</a>然二这个提示效果的响应速度是非常缓慢的，考虑到良好的人机交互，需要的是鼠标移动到超级链接的那一瞬间出现提示，这时就需要移除<a>标签中的title提示效果，自己动手做一个类似功能的提示。首先在空白的页面上，添加两个普通超级链接和两个带有class的超级链接。<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>然后为class为tooltip的超链接添加mouseover和mouseout事件，jquery代码如下：$("a.tooltip").mouseover(function(){ //显示}).mouseout(function(){ //隐藏});实现这个效果的具体思路如下。(1)当鼠标滑入超链接。1创建一个<div>元素，<div>元素的内容title属性的值。2将创建的元素追加到文档中.3.为它设置x坐标和y坐标，使他显示在鼠标位置的旁边 。(2) 当鼠标滑出超级链接，移动<div>元素根据分析的思路，写出如下jQuery代码$(function(){ $("a.tooltip").mouseover(function(e){  var tooltip="<div id='tooltip'> "+this.title+"</div>"; //创建<div>元素$("body").append(tooptip);$("#tooltip").css({"top":e.page+"px","left":e.page+"px"}).show("fast");}).mouseout(function(){ $("#tooltip").remove();//移动})
});
此时的效果有两个问题：首先是当鼠标滑过后，<a>标签中的title属性的提示也会出现；
其次是设置x坐标和y坐标的问题，由于自制的提示与鼠标的距离太近，有时候会引起无法提示的问题(1)当鼠标滑入时，给对象添加一个新属性，并把title的值传给这个属性，然后清空属性title的值。this.mytitle=this.title;this.title="";var tooltip="<div id='tooltip'>"+this.Mytitle+"</div>";(2)当鼠标发出时，再把对象的mytile属性的值有赋给属性titlejquery代码如下: this.title=this.Mytitle;<!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="http://www.cnblogs.com/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>

转载于:https://www.cnblogs.com/liuyong/archive/2011/03/22/1991440.html

jQuery 学习笔记之九 (jQuery 图片提示 )相关推荐

JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo(" ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo("f ...
Jquery学习笔记：获取jquery对象的基本方法
jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
jquery学习笔记（-）
Jquery学习笔记(-) Jquery的简介 Jquery是继prototype之后又一个优秀的Javascrīpt框架.它是轻量级的js库(压缩后只有21k),兼容各种浏览器(IE6.0+,FF1 ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
jQuery学习笔记（黑马课堂+补充）
JQuery学习笔记(自用) 1.DOM对象和jQuery对象 DOM对象:原生JS取到的对象 getElementsById() getElementsByTagName() 特点:只能调用Dom方 ...
html添加删除元素属性,jQuery学习笔记——.attr()和.removeAttr()方法操作元素属性
今天主要和大家一起分享一下如何使用jQuery的jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现:.attr():jQu ...

jQuery 学习笔记之九 (jQuery 图片提示 )

jQuery 学习笔记之九 (jQuery 图片提示 )相关推荐

最新文章

热门文章