jquery提示效果实例分析
本文实例讲述了jquery提示效果的用法。分享给大家供大家参考。具体实现方法如下:
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
$(function(){
$(".tooltip").mouseenter(function(e){
this.mytitle=this.title
this.title=""
var a="<div>"+this.mytitle+"</div>"
$("body").append(a);
$("div").css({
"top": (e.pageY + y) + "px",
"left": (e.pageX + x) + "px"
}).show("fast")
}).mouseout(function(){
this.title= this.mytitle;
$("div").remove();
});
})
心得体会:
不要在p标签下追加div元素,会出现一个大的偏差值!
原来!this和$("this")是有所不同,如果上文this.title改写成$("this").attr("title")会导致下面的mouseout事件无法访问保存下来的title。
希望本文所述对大家的jQuery程序设计有所帮助。
相关推荐
-
jquery删除数据记录时的弹出提示效果
提示效果如图:(删除提示框一直居中显示) 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
-
jQuery实现行文字链接提示效果的方法
本文实例讲述了jQuery实现行文字链接提示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht
-
jquery实现非叠加式的搜索框提示效果
以前一直在用JQUERY叠加两个INPUT框来实现登陆中需要输入的用户名.密码来实现提示与用户的输出,这边采用JQUERY在一个INPUT框中实现这种效果,具体做法为: 下面是INPUT框代码: 复制代码 代码如下: <input class="search_text" type="text" value="搜索" name="searchText" /> 下面是JQUERY代码: 复制代码 代码如下: //设置搜
-
基于jquery的loading 加载提示效果实现代码
loading 加载提示 ······ 透明遮罩 居中 复制代码 代码如下: body{ margin: 0; font-size: 12px; line-height: 100%; font-family: Arial, sans-serif; } .background { display: block; width: 100%; height: 100%; opacity: 0.4; filter: alpha(opacity=40); background:while; posit
-
jQuery表单获取和失去焦点输入框提示效果的实例代码
复制代码 代码如下: $("#focus .input_txt").each(function(){ var thisVal=$(this).val(); //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示 if(thisVal!=""){ $(this).siblings("span").hide(); }else{ $(this).siblings("span").show(); } //聚焦
-
基于jquery的气泡提示效果
代码注释已经尽可能的详细了,也不多说了. 初步测试暂未发现大的BUG,总体来说不满意的是鼠标移来移去不断触发气泡时会出现XX为空或不是对象的问题, 虽然不影响效果,但看着IE左下角的黄色警告不爽,暂时不知道如何改进. 加了try/catch解决... 还有就是气泡默认出现在触发对象的正上方,当触发对象在边上时,气泡会有一部分出现在窗口外面......也许这种情况可以让气泡显示在左边或是右边,感觉可能会有些麻烦,就没去弄了,比较懒...... 越用jquery就越喜欢用它... bubble.js
-
jQuery实现点击文本框弹出热门标签的提示效果
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实现点击
-
jQuery提示效果代码分享
代码一: 复制代码 代码如下: <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> <
-
基于JQuery的一个简单的鼠标跟随提示效果
1.效果如图 2.实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建好的div加到文档中 为提示层设置位置 2 鼠标移出标题 移除div 3 当鼠标在标题内移动时 同样添加div效果 3.JQuery实现代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t
-
jquery实现网站超链接和图片提示效果
超链接提示效果: 复制代码 代码如下: <script type="text/javascript"> //<![CDATA[ $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var tooltip = "<div id='
随机推荐
- seajs中模块的解析规则详解和模块使用总结
- javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
- PHP处理SQL脚本文件导入到MySQL的代码实例
- 不得不看之JavaScript构造函数及new运算符
- 关闭selinux(防火墙)方法分享
- oracle—SQL技巧之(二)WMSYS.WM_CONCAT函数实现多行记录用逗号拼接在一起
- 批量实现面向对象的实例代码
- JSP 自定义标签实现数据字典的实例
- MySQL服务维护笔记第1/2页
- 兼容各个浏览器的技巧
- 9个javascript语法高亮插件 推荐
- jQuery实现的网页左侧在线客服效果代码
- 牛奶包装带上的秘密—让你知道牛奶真正生产日期
- jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
- jquery+CSS3实现淘宝移动网页菜单效果
- Javascript 变量作用域 两个可能会被忽略的小特性
- 微信小程序实现下拉刷新和轮播图效果
- PHP树形结构tree类用法示例
- node Buffer缓存区常见操作示例
- 微信小程序 数据缓存实现方法详解