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事件函数 ...
随机推荐
- 深入理解ThreadLocal及其变种
ThreadLocal 定义 ThreadLocal很容易让人望文生义,想当然地认为是一个"本地线程". 其实,ThreadLocal并不是一个Thread,而是Thread的局部 ...
- SpringMVC教程--Idea中使用Maven创建SpringMVC项目
1.新建项目 参照idea教程中的创建maven项目https://www.cnblogs.com/daxiang2008/p/9061653.html 2.POM中加入依赖包 (1)指定版本 (2) ...
- ibv_free_device_list()函数
void ibv_free_device_list(struct ibv_device **list); 描述 函数用来释放当前可用的RDMA设备数组. 注意 数组一旦释放,指向设备的指针将不能再由i ...
- mysql事务、隔离级别
一.事务简介 事务是一组操作的集合,它是一一个不可分割的工作单位,事务会把所有的操作作为- -个整体一起向系统提交或撤销操作请求,即这些操作要么同时成功,要么同时失败. 二.有关事务操作 mysql中 ...
- LeetCode-097-交错字符串
交错字符串 题目描述:给定三个字符串 s1.s2.s3,请你帮忙验证 s3 是否是由 s1 和 s2 交错 组成的. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:http ...
- LeetCode-063-不同路径 II
不同路径 II 题目描述:一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为"Start" ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角( ...
- C++_Leecode1 两数之和
一.题目介绍 1.题目描述 ->给定一个整数数组nums和一个整数目标值target,请你在该数组中找出和为目标值的那两个整数,并返回它们的数组下标. ->你可以假设每种输入只会对应一个答 ...
- laravel 7 登录
1:路由,展示登录表单 Route::group(['prefix'=>'day','namespace'=>'day18'],function (){ // 登录 Route::get( ...
- pthon语法
1.条件语句 #找到a.b.c中最大的数,其中and是逻辑运算符"且"的意思 if a>b and a>c: print(a) elif b>a and b> ...
- Kubernetes系列(三) Deployment
作者: LemonNan 原文地址: https://juejin.im/post/6865672466939150349/ Kubernetes 系列 Kubernetes系列(一) Pod Kub ...