jQuery--事件案例(鼠标提示)
1.文字提示
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>文字提示</title>
6 <!-- 引入jQuery -->
7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
8 <style type="text/css">
9 body{
10 margin:0;
11 padding:40px;
12 background:#fff;
13 font:80% Arial, Helvetica, sans-serif;
14 color:#555;
15 line-height:180%;
16 }
17 p{
18 clear:both;
19 margin:0;
20 padding:.5em 0;
21 }
22 /* tooltip */
23 #tooltip{
24 position:absolute;
25 border:1px solid #333;
26 background:#f7f5d1;
27 padding:1px;
28 color:#333;
29 width:300px;
30 display:none;
31 }
32 </style>
33 <script type="text/javascript">
34 $(function(){
35 //将自带的提示，替换成 自定义提示
36
37 $(".mytooltip").mouseover(function(event){
38
39 //1 获得绑定的数据
40 var title = $(this).data("mytitle");
41 if(! title){ //没有
42 //获得自带提示
43 title = $(this).attr("title");
44 //将自带提示删除
45 $(this).removeAttr("title");
46 //绑定数据
47 $(this).data("mytitle",title)
48 }
49
50 //2 创建div
51 var $new = $("<div id='tooltip'></div>");
52 //3设置提示
53 $new.html(title);
54
55 //4定位
56 $new.offset({"left":event.pageX + 5,"top":event.pageY - 20});
57
58 //5追加到body，并显示
59 $new.appendTo("body").show();
60 }).mouseout(function(){
61 //删除
62 $("#tooltip").remove();
63 }).mousemove(function(event){
64 // 重写定位
65 $("#tooltip").offset({"left":event.pageX + 5,"top":event.pageY - 20});
66 });
67
68 });
69
70 </script>
71 </head>
72 <body>
73 <p><a href="#" class="mytooltip" title="这是我的超链接提示1.">提示1.</a></p>
74 <p><a href="#" class="mytooltip" title="这是我的超链接提示2.">提示2.</a></p>
75 <p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
76 <p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
77
78 </body>
79 </html>
2.图片提示
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>图片提示</title>
6 <!-- 引入jQuery -->
7 <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
8 <style type="text/css">
9 body{
10 margin:0;
11 padding:40px;
12 background:#fff;
13 font:80% Arial, Helvetica, sans-serif;
14 color:#555;
15 line-height:180%;
16 }
17 img{border:none;}
18 ul,li{
19 margin:0;
20 padding:0;
21 }
22 li{
23 list-style:none;
24 float:left;
25 display:inline;
26 margin-right:10px;
27 border:1px solid #AAAAAA;
28 }
29
30 /* tooltip */
31 #tooltip{
32 position:absolute;
33 border:1px solid #ccc;
34 background:#333;
35 padding:2px;
36 display:none;
37 color:#fff;
38 }
39 </style>
40 <script type="text/javascript">
41 $(function(){
42 var x = 10;
43 var y = 20;
44 var href;
45
46 $("a[class=tooltip]").mouseover(function(e){
47 //1 获取对应标签的自带提示
48 //var title = $("a[class=tooltip]").attr("title");
49 //this代表的是DOM对象(页面中的元素)
50 href = this.href;
51
52 //删除自带提示
53 this.href = "";
54
55 //2 创建标签用于自定义提示
56 var $div = $("<div id='tooltip'><img src='"+href+"'></img></div>");
57
58 //3 将自定义提示的标签，添加到body标签下
59 $("body").append($div);
60
61 //4 如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY)
62 $("#tooltip").css({
63 "top" : e.pageY + y + "px",
64 "left" : e.pageX + x + "px"
65 }).show(1000);
66
67 }).mouseout(function(){
68 this.href = href;
69 $("#tooltip").remove();
70 }).mousemove(function(e){
71 $("#tooltip").css({
72 "top" : e.pageY + y + "px",
73 "left" : e.pageX + x + "px"
74 });
75 });
76 });
77 </script>
78
79 </head>
80 <body>
81 <h3>有效果：</h3>
82 <ul>
83 <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>
84 <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>
85 <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
86 <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>
87 </ul>
88
89
90 <br/><br/><br/><br/>
91 <br/><br/><br/><br/>
92
93
94 <h3>无效果：</h3>
95 <ul>
96 <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>
97 <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
98 <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
99 <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>
100 </ul>
101 </body>
102 </html>
jQuery--事件案例(鼠标提示)的更多相关文章
- jquery事件一 ---鼠标移入移出
比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...
- JQuery事件之鼠标事件
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. ():click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. $('p').click(function( ...
- JQuery实现超链接鼠标提示效果
一.第一种方法用Jquery<p><a href="http://www.nowamagic.net/" class="tooltip" ti ...
- Jquery事件：鼠标移入移出(mouseenter,mouseleave)
前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...
- JQuery 事件及案例
JQuery事件与JavaScript事件相似,只是把其中的on去掉 1.click,dblclick事件 案例1:点击缩略图换背景 <html xmlns="http://www.w ...
- jQuery编程基础精华03（RadioButton操作，事件，鼠标）
RadioButton操作 取得RadioButton的选中值,被选中的radio只有一个值,所以直接用val() $('#btn1').click(function () { ...
- jQuery基础（鼠标事件，表单事件，键盘事件，自定义事件 篇）
1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div&g ...
- jQuery事件-div的显示隐藏及鼠标的移入移出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Javascript和jquery事件-鼠标移入移出事件
javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...
随机推荐
- pytest--配置用例执行顺序（pytest_ordering插件介绍）
前言 设置测试用例执行顺序: 默认情况下,pytest测试用例的执行顺序是按先外层后内层(目录下的文 件),再根据名称按ascii码值的顺序升序执行. 如果想自定义pytest测试用例的执行顺序,可以 ...
- jmeter压测tcp协议接口：java.net.SocketException: Software caused connection abort: socket write error
tcp接口,试压过程中,部分请求报如下错误: java.net.SocketException: Software caused connection abort: socket write erro ...
- 在 TIME_WAIT 状态的 TCP 连接，收到 SYN 后会发生什么？
周末跟朋友讨论了一些 TCP 的问题,在查阅<Linux 服务器高性能编程>这本书的时候,发现书上写了这么一句话: 书上说,处于 TIME_WAIT 状态的连接,在收到相同四元组的 SYN ...
- 一文带你秒懂商业智能BI的价值所在！
首先,先来跟大家解释说明一下什么是商业智能?这应该也是刚刚接触商业智能的小伙伴最想要了解的问题,平时刷微博.看头条时都会看到数据可视化.数据分析和大数据等词汇时,但是对它们如同熟悉的陌生人一般,那么这 ...
- RDD的运行机制
1. RDD 的设计与运行原理 Spark 的核心是建立在统一的抽象 RDD 之上,基于 RDD 的转换和行动操作使得 Spark 的各个组件可以无缝进行集成,从而在同一个应用程序中完成大数据计算任务 ...
- 【C#集合】Hashtable 和 Dictionary的区别
Hashtable 和 Dictionary <K, V> 类型 1):单线程程序中推荐使用 Dictionary, 有泛型优势, 且读取速度较快, 容量利用更充分. 2):Diction ...
- 【C# Parallel】开端
使用条件 1.必须熟练掌握锁.死锁.task的知识,他是建立这两个的基础上的.task建立在线程和线程池上的. 2.并不是所有代码都适合并行化. 例如,如果某个循环在每次迭代时只执行少量工作,或它在很 ...
- .Net 新一代编译器 Roslyn 会带来怎样的影响？
.Net 新一代编译器 Roslyn 会带来怎样的影响? Roslyn是微软创建的一个.NET编译器平台,该项目于2014年4月3日开源. 最初 C# 语言的编译器是用 C++ 编写的,后来微软推出了 ...
- shell中echo基础及高级用法详解-渐入佳境
--作者:飞翔的小胖猪 --创建时间:2021年2月19日 1.1 基础用法 echo命令用来输出文本,在shell脚本中用来输出提示信息用的比较多. 单引号:原样输出所有的内容,不用转义就能输出特殊 ...
- Qt：QDateTimeEdit
0.说明 QDateTimeEdit类提供了一个用于编辑Date和Time的Widget,它就像下边这样 QDateTimeEdit允许用户使用键盘编辑Date.或者用方向键来增加或减少Date.Ti ...