`
chengyu2099
  • 浏览: 471161 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

jquery 鼠标移动,连接提示

阅读更多
jQuery(document).ready(function($){
 
$("a").mouseover(function(e){
	this.myTitle = this.title;
	this.myHref = this.href;
	this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
	this.title = "";
	var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
	$('body').append(tooltip);
	$('#tooltip').css({"opacity":"0.8","top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast');
}).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
}).mousemove(function(e){$('#tooltip').css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
});
 
}); 

#tooltip {position:absolute;z-index:1000;max-width:250px;word-wrap:break-word;background:#000;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
#tooltip p {color:#fff;font:12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif;}
#tooltip p em {display:block;margin-top:3px;color:#f60;font-style:normal;}

<a href="#" title="delete" >删除</a>
分享到:
评论

相关推荐

    jQuery UI组件 jQuery UI

    3. **Dialog(对话框)**:对话框组件创建可自定义的模态或非模态窗口,用于提示、确认、警告等交互场景,可以设置大小、位置、按钮等属性。 4. **Draggable(拖放)**:拖放功能使得页面元素可以被用户轻松移动,...

    基于JQuery的一个简单的鼠标跟随提示效果

    在给出的代码中,鼠标悬停时创建提示层,鼠标移出时移除提示层,鼠标移动时调整提示层位置。 #### 4. 动态创建和追加元素 在示例代码中,当鼠标悬停在特定元素上时,通过JQuery动态创建一个`div`元素,并将其内容...

    jQuery手势图案密码设置代码.zip

    - 使用jQuery的`mousedown`(鼠标按下)或`touchstart`(触摸开始)事件监听用户的初始点击,`mousemove`(鼠标移动)或`touchmove`(触摸移动)事件跟踪用户的移动路径,`mouseup`(鼠标释放)或`touchend`(触摸...

    jQuery按钮控制图片左右滚动代码.zip

    6. **加号点详细信息**:点击箭头按钮后出现的加号点可能是指一种详细信息的提示或者导航指示,比如显示当前图片在所有图片中的位置。这可以通过创建和定位带有加号的元素,根据当前显示的图片更改其状态来实现。 7...

    jqueryUI插件

    这个对话框支持多种配置选项,如可拖动、可调整大小、可设置标题、关闭按钮以及显示/隐藏动画效果,是创建弹窗提示、确认消息或者多窗口应用的重要工具。 **3. Draggable(拖放)** Draggable功能使得页面上的元素...

    jQuery实现的益智类管道拼接游戏源码.zip

    6. **错误提示与重试机制**:如果管道连接错误,游戏会显示错误提示,并允许玩家重试。这部分涉及到错误处理和状态恢复的逻辑。 7. **界面反馈**:游戏界面的动态效果,如管道连接成功时的高亮显示、计时器的更新等...

    jQuery价格区间滑动取值代码.zip

    7. **数据交互**:如果这个功能与后端服务器连接,那么当用户选定价格范围后,可能需要通过Ajax发送请求,将选中的价格区间传递到服务器,以便进行进一步的数据过滤或计算。 8. **用户体验优化**:为了提升用户体验...

    jQuery手机屏幕手势解锁代码.zip

    3. **路径记录**:在`mousemove`(鼠标移动)和`touchmove`(触摸移动)事件中,持续更新用户移动的坐标,并将这些坐标点连接起来形成路径。 4. **路径验证**:当用户完成手势(`mouseup`或`touchend`事件触发时)...

    25、jquery安卓屏幕图案锁特效代码

    4. **JavaScript事件处理**:jQuery监听用户的触摸或鼠标事件,当用户点击一个点并移动到另一个点时,会触发相应的事件。这些事件处理函数记录用户的路径,并在界面上实时绘制出连接线。 5. **图案存储与验证**:...

    jQuery+HTML5实现的火球挡板碰撞动画游戏源码.zip

    2. **事件绑定**:监听用户输入和页面事件,比如当用户点击或移动鼠标时,控制火球的移动。 3. **动画效果**:利用`.animate()`函数创建流畅的动画效果,如火球移动、碰撞后的反弹等。 4. **Ajax交互**:如果游戏有...

    jquery 简短几句代码实现给元素动态添加及获取提示信息

    当鼠标移动到带有name属性的a标签上时,jQuery代码会获取该标签的alt属性值,并将其作为操作方法的描述添加到提示信息中显示出来。 4. 隐藏和显示提示框:通过控制CSS属性display来实现提示框的隐藏和显示。在鼠标...

    jQuery仿手机屏幕触屏滑动手势解锁代码

    本文将深入探讨如何使用jQuery实现一个基于触屏和鼠标操作的滑动手势解锁功能。 首先,我们要理解这个项目的基本结构。从提供的文件列表来看,我们有以下四个关键文件: 1. `index.html`:这是网页的主体文件,...

    基于SVG的jquery手势密码解锁插件

    在这个插件中,jQuery被用来处理用户的触摸或鼠标事件,跟踪用户在SVG画布上的手势,并进行相应的验证。 3. **插件的使用** 使用此插件,开发者需要在HTML文档中引入jQuery库和插件的JS文件。然后,通过简单的...

    jQuery移动端地图连线手势解锁特效.zip

    1. **触摸事件处理**:在移动设备上,常规的鼠标事件(如`click`、`mouseover`)不再适用,我们需要使用触摸事件(如`touchstart`、`touchmove`、`touchend`)。这些事件在jQuery中可以通过绑定到元素上来监听,例如...

    jQuery+html5绘制的饼形图、折线图等各种统计图表效果.zip

    例如,当用户鼠标悬停在饼图的某一扇区上时,jQuery可以用来获取相应的数据信息并显示为提示框。而在折线图中,jQuery可能用于平滑地动画化数据点的移动,使数据变化过程更加直观。 HTML5 Canvas则负责实际的图形...

    bootStrap3及jquery、离线文档.zip

    7. **JavaScript插件**:例如,模态框、滚动spy、折叠(collapse)、滑动(carousel)、提示(tooltip)和弹出框(popover)等,这些插件都是基于jQuery构建的。 jQuery 是一个高效、简洁的JavaScript库,它简化了...

    鼠标悬停读取详细信息

    在IT领域,"鼠标悬停读取详细信息"是一种常见的用户体验设计技术,它允许用户将鼠标光标移动到元素上时,无需点击就能快速查看相关信息。这种技术在网页设计、软件开发以及各种交互式应用程序中广泛应用,提高了用户...

    jquery安卓屏幕图案锁特效代码.zip

    在数字化设备普及的今天,用户界面的安全性显得尤为重要,其中图案锁作为一种常见的安全验证方式,被广泛应用在移动设备上。jQuery作为一款广泛使用的JavaScript库,提供了丰富的功能来增强网页交互。本文将深入探讨...

    Ajax弹出漂亮可拖动的提示层(窗)效果.rar

    当用户按下鼠标按钮时开始记录初始位置,然后在鼠标移动时更新提示层的位置,最后在松开鼠标按钮时停止更新。JavaScript的事件监听器可以帮助我们实现这一功能。 6. **响应式设计**:为了确保提示层在不同设备和...

Global site tag (gtag.js) - Google Analytics