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事件函数 ...
随机推荐
- Abp 异常处理
Abp 异常处理 最近一直在读代码整洁之道,我在读到第三章函数的3.9 使用异常替代返回错误码,其实在我的开发经历中都是使用返回错误码给到前端,之前在阅读ABP官网文档中就有看到过使用异常替代异常的做 ...
- BI能给企业带来什么收益，企业应该如何选择好的BI工具？
任何从事数据分析的小伙伴,或多或少都会听说BI这个数据分析工具.希望进入数据分析工作的小伙伴也一定绕不开BI这个话题,那么BI到底是什么呢?为什么BI如此重要?BI能给企业带来什么?如何选择BI工具 ...
- python基础之数值类型与序列类型
Hello大家好,我是python学习者小杨同学,已经学习python有一段时间,今天将之前学习过的内容整理一番,在这与大家分享与交流,现在开始我们的python基础知识之旅吧. 数值类型与序列类型 ...
- Java 实现Https访问工具类 跳过ssl证书验证
不多BB ,代码直接粘贴可用 import java.io.BufferedReader; import java.io.ByteArrayOutputStream; import java.io.F ...
- LeetCode-012-整数转罗马数字
整数转罗马数字 题目描述:罗马数字包含以下七种字符: I, V, X, L,C,D 和 M. 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如, 罗马数字 2 ...
- Logstash-CentOS7单机安装测试
目录 环境&准备 安装&启动 简单配置一下,看看效果 Conf配置文件参考 完成 环境&准备 下面所有操作都基于CentOS7 官网下载安装包 logstash下载 如官网打不 ...
- elasticsearch的安装与使用
1:官网进行下载 https://www.elastic.co/cn/elasticsearch/ 2:这里我用的是7.15.2 3:进行下载解压至d 盘 4:接下来我们cmd 切换目录进行运行 5: ...
- tensorflow源码解析之common_runtime-direct_session
目录 核心概念 direct_session direct_session.h direct_session.cc 1. 核心概念 读过之前文章的读者应该还记得,session是一个执行代理.我们把计 ...
- LGP5204题解
@CF1327F 最小值看着有点怪,先转化成最大值吧...反正没啥区别... 考虑把最大值相同的区间和限制为这个最大值的区间都拿出来.然后离散化.问题变为让所有区间都满足最值为 \(c\). 考虑 D ...
- LGP1397题解
并不是那么的有意思呢 首先,我们可以将题目给出的地推式看做一个一次函数 \(k * x+b\),来思考一个问题,如果给出两个一次函数 \(F(x)\) 和 \(G(x)\),那么 \(F(G(x))\ ...