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事件函数 ...
随机推荐
- centos安装k8s集群
准备工作 关闭swap,注释swap分区 swapoff -a 配置内核参数,将桥接的IPv4流量传递到iptables的链 cat > /etc/sysctl.d/k8s.conf < ...
- 移动BI,移动报表平台
随着大数据时代的到来,随着商业智能衍生出来的移动BI也将处于一片大好的形式中,由于智能手机.移动应用的普及,越来越多的办公软件均已支持了移动办公,这也给移动BI带来了更多的想象,通过一部手机就可以随 ...
- 【C# TAP 异步编程】三、async\await的运作机理详解
[原创] 本文只是个人笔记,很多错误,欢迎指出. 环境:vs2022 .net6.0 C#10 参考:https://blog.csdn.net/brook_shi/article/details/ ...
- Oracle ASM 磁盘组基础知识整理（收藏版）
转至:https://cloud.tencent.com/developer/article/1494403 为什么要写这么一篇基础知识呢?还是有那么一点点原因的,不是胡编乱造还真是有真实存在的事件的 ...
- ssh执行命令或者脚本里最好先加上 source /etc/profile
记: 写一次shell脚本,发现总提示 找不到JAVA_HOME .明明已经配了环境变量,并且java -version也已经能输出信息,但就是提示. 后来在 脚本中加入第一句代码 source /e ...
- Python：pandas（一）——常用、读写函数read_csv、read_excel、to_csv、to_excel
学习自:pandas1.2.1documentation 0.常用 1)读写 ①从不同文本文件中读取数据的函数,都是read_xxx的形式:写函数则是to_xxx: ②对前n行感兴趣,或者用于检查读进 ...
- XML序列化反序列化
using System; using System.Collections.Generic; using System.IO; using System.Xml.Serialization; nam ...
- numpy.random模块用法小结
原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/9751471.html 1.np.random.random()函数参数 np.random.r ...
- JZ-051-构建乘积数组
构建乘积数组 题目描述 给定一个数组A[0,1,...,n-1],请构建一个数组B[0,1,...,n-1],其中B中的元素B[i]=A[0]A[1]...A[i-1]A[i+1]...A[n-1]. ...
- 矩池云上如何修改cudnn版本
修改与之前修改nvcc.cuda这些的原理是一样的. 国内镜像 https://mirrors.cloud.tencent.com/nvidia-machine-learning/ 检查系统版本 so ...