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事件函数 ...
随机推荐
- 入职钉钉接近半年，谈谈自身的新人landing体会
一.适应新环境 到了一个新环境里,身边的一切都比较陌生,与同事和领导都不太熟,一开始说话说不到一起都比较正常.在和同事吃饭的时候,多听多参与聊天,主动一些,逐渐熟悉起来就好了. 另外,我的工作台bas ...
- Telnet拓展测试--在生产测试场景的应用
本文关键词:流量测试.Telnet拓展测试.TCP/IP.时延 一.Telnet简介 Telnet协议是TCP/IP协议族中的一员,是Internet远程登录服务的标准协议和主要方式.它为用户提供了在 ...
- 金融数据分析还能这样做？快试试这个BI工具小白也能学会！
说起银行.保险.股票投资等这些金融行业,大多数人都认为它们都是依靠数据驱动的企业,毕竟大数据的诞生本来就是为了金融信息流通而服务的,但是事实真的是这样吗? 事实并非如此,真正在金融行业做数据分析的人, ...
- 【用户状态】详细解读Oracle用户ACCOUNT_STATUS的九种状态
转至:http://blog.itpub.net/519536/viewspace-672276/ DBA_USERS视图中ACCOUNT_STATUS记录的用户的当前状态,一般情况下在使用的正常用户 ...
- idea教程--如何使用码云管理代码
1.安装Gitee插件 由于我已经安装过了,请参加白色背景的图 2.idea配置git 3.配置码云账号 4.配置ssh秘钥(注意:如果之前安装git已经配置过了可以跳过此步) (1) 生成SSH秘钥 ...
- 2020.10.6 ThreadLocal
在多线程环境下,每个线程都有自己的数据.一个线程使用自己的局部变量比使用全局变量要好,因为局部变量不会被其他线程改变. 但是局部变量也存在问题--在函数调用的时候,传递起来很麻烦: def proce ...
- python字符串格式化输出 %和format举例
#!/usr/bin/env python # -*- coding: UTF-8 -*- #pyversion:python3.5 #owner:fuzj s1 = "i am %s, i ...
- （第二章第四部分）TensorFlow框架之TFRecords数据的存储与读取
系列博客链接: (第二章第一部分)TensorFlow框架之文件读取流程:https://www.cnblogs.com/kongweisi/p/11050302.html (第二章第二部分)Tens ...
- Tableau学习Step2一数据文件的读取与统计图、表的概述
Tableau学习Step2一数据文件的读取与统计图.表的概述 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一. 前言 本教程通过一个案例从浅到深来学习Tableau知识 案例概述: 二 ...
- 自定义 serializers.ValidationError 的错误返回
在使用DRF进行反序列过程中,总是需要校验字段,然后返回错误结果.可以使用默认的自定义校验项,也可以自定义校验项.而默认的自定义校验项总是差强人意. 版本 Django 2.2.3 Python 3. ...