`
iseesea
  • 浏览: 46226 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

jQuery入门实例:使用jQuery编写简单的类tooltip的小插件

阅读更多
   相信很多用过或者见过jQuery的tooltip的插件,因为它真的实用。这个例子只是学习并练手的程序,我们模拟tooltip搞一个类似的。
1,我们需要引入jQuery。
2,我们这个程序是直接把tip里的数据载入,没有再请求其他资源之类的,要弄成请求的也很简单,自己写个jQuery的ajax请求就可以了。
3,我们设计参考tooltip,我们希望当鼠标经过某个元素的时候,触发tip,而这个tip的内容就是那个元素接下来的那个元素(我们可以用一个div吧所有内容包括进去)。
4,基本的内容就是上面所说,HTML代码如下:

<!-- html的验证规范之类的这里就忽略,自己补充。 -->
<html>
<head>
<script src="./jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
<a href="#" class="tip" >第一个</a>
<div style="display:none;border:1px">
<!-- tip中的代码 -->
    <span style="background-color:#cdcdcd">这是第一个a标签的tip</span>
</div>

<a href="#" class="tip" >第二个</a>
<div style="display:none;border:1px">
<!-- tip中的代码 -->
    <span style="background-color:#cdcdcd">这是第二个a标签的tip</span>
</div>

<a href="#" class="tip" >第三个</a>
<div style="display:none;border:1px">
<!-- tip中的代码 -->
    <span style="background-color:#cdcdcd">这是第三个a标签的tip</span>
</div>

<a href="#" class="tip" >第四个</a>
<div style="display:none;border:1px">
<!-- tip中的代码 -->
    <span style="background-color:#cdcdcd">这是第四个a标签的tip</span>
</div>

<script type="text/javascript" >
	var xpos, ypos; 
  $(document).mousemove(function(e){
//获取鼠标的位置,绝对值,像素值。
  xpos = e.pageX;
  ypos = e.pageY;
  });
  $(document).ready(function(){
//对css类为tip的绑定一个mouseover的事件
  $(".tip").live("mouseover",function(){
//获取浏览窗口右边和底部滚动条的垂直和水平位置,无滚动条则不受影响,像素值.
  var scrollTop = $(window).scrollTop();
  var scrollLeft = $(window).scrollLeft();
//获取鼠标覆盖的元素的下一个元素  
var next = $(this).next();
//给下一个元素添加一些样式来设置显示的位置,并让其显示。
  next.css("position","fixed");
  next.css("left", xpos-scrollLeft);//记得扣除滚动条的位置。
  next.css("top", ypos-scrollTop);
  next.show();
  });
  $(".tip").live("mouseout",function(){
//鼠标移走的时候隐藏tip
  $(this).next().hide();
  });
  });
	</script>
</body>
</html>


虽然jQuery插件使用起来也非常的简单,但是自己写的就是会让人很有成就感,上面我在ie测试没有通过。。。oye~火狐,chrome正常。
附件中是压缩后的jQuery文件和源文件.

  • tip.7z (78.7 KB)
  • 下载次数: 44
2
0
分享到:
评论
1 楼 shaorui23 2011-09-18  
顶一个

相关推荐

    jQuery实例_ ToolTip的实现

    总结一下,这个jQuery实例展示了如何利用JavaScript和CSS创建自定义的Tooltip效果。通过监听元素的鼠标悬停事件,动态创建并定位Tooltip元素,实现了更灵活和可定制的用户体验。这只是一个基础示例,实际应用中可以...

    近百个jQuery实例

    参照《jQuery完全攻略》亲自手打并测试的100多个实例(部分实例来自网络如消息框、tooltip、面包屑式菜单、层级菜单以及一些jQuery插件的用法)。 主要分为: jQuery操作DOM节点、数组和字符串 jQuery表单验证 ...

    jquery插件.rar

    《jQuery插件开发详解》 在Web开发领域,jQuery是一个广泛应用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。jQuery插件是jQuery生态系统的重要组成部分,它们扩展了jQuery的核心...

    jquery formValidation表单验证插件实例

    **jQuery FormValidation表单验证插件** jQuery FormValidation是一款高效且灵活的JavaScript库,专为开发者提供表单验证功能。这个插件使我们能够轻松地为网页中的表单添加验证规则,确保用户输入的数据符合预设的...

    jQuery Tooltip Plugin各种浮动提示效果插件.rar

    这是使用jQuery Tooltip Plugin弹出各种浮动提示效果插件的一些例子,用这个插件可以显示自定义的鼠标悬停提示,比如文字提示框、图片框,在鼠标放在特定位置时激活,鼠标移开后消失,如示例所示为弹出一个图片浮动...

    50个jQuery插件实用图例

    而“30个jQuery插件-Tooltip气泡悬浮框的.doc”则详细列出了各种Tooltip插件的实例,可以帮助开发者了解并选择最适合他们项目的解决方案。 在实际开发中,了解并掌握这些jQuery插件的使用,能够大大提升开发效率,...

    jQuery Tooltip弹出式分享按钮插件.zip

    jQuery Tooltip弹出式分享按钮插件是一个用于网页交互增强的工具,主要利用jQuery库实现。jQuery,一个轻量级的JavaScript库,因其简洁的API和强大的功能,深受开发者喜爱。这个插件主要用于创建动态提示信息,当...

    jQuery插件开发详细教程

    在不同的JavaScript库中,$符号常常被用来表示各自的库实例,为了避免$符号的冲突,可以将jQuery包裹在一个自执行的匿名函数中,并通过jQuery参数映射$符号,这样在插件内部可以放心使用$符号而不用担心冲突问题。...

    Toolbar.js-实用的tooltip样式jQuery工具栏插件

    4. **易用性**: 使用Toolbar.js非常简单,只需引入jQuery和Toolbar.js的JavaScript及CSS文件,然后通过简单的配置代码就能创建出符合需求的工具栏。 5. **自定义选项**: Toolbar.js允许开发者自定义工具栏的位置、...

    Jquery-poshytip实例应用

    **jQuery PoshyTip实例应用详解** 在Web开发中,用户交互体验是至关重要的,而提示信息作为用户与网站沟通的桥梁,能有效提高用户体验。jQuery PoshyTip是一款优秀的jQuery插件,专门用于创建美观且可自定义的提示...

    JQuery Flot 画图插件 +实例源码 使用非常方便,效果非常漂亮

    - **绘制图表**:使用jQuery选择器找到容器,然后调用$.plot()方法,传入数据和配置选项来创建图表。 4. **实例源码分析** 压缩包中的"flot"文件可能包含示例代码、样式文件和数据文件,这些示例展示了如何使用...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    29.jQuery实现图片变色特效插件与实例下载如jquery图片变灰色 30.jquery实现图片可拖动展示的实例下载 31.jQuery实现拖动滚动条的缩略图排列插件下载 32.jQuery实现焦点图片Flash自动平滑渐变效果 33....

    40个实用的jquery用户界面ui设计技巧及教程.doc

    12. **Build a Better Tooltip with jQuery Awesomeness**:这个教程教你如何用jQuery编写一个插件,创建出比浏览器默认提示更吸引人的提示框。 13. **Simple Tooltip – jQuery & CSS**:Soh Tanaka的教程教你如何...

    9种经典的tooltip信息提示框

    10. `jQuery经典插件大全-实例-教程-参数详解.url`:这是一个链接,可能指向一个资源,提供了更多关于jQuery插件的信息,包括如何使用、实例教程和参数解释。 综合以上分析,我们可以学习到如何利用jQuery和CSS3来...

    jQuery Tooltip气泡提示工具栏代码.zip

    jQuery Tooltip是一种常见的网页交互元素,它为用户提供了一种在鼠标悬停时显示额外信息的方式,通常用于增强用户体验。这个“jQuery Tooltip气泡提示工具栏代码.zip”文件包含了一个实现这一功能的jQuery代码示例,...

    jquery插件

    在本文中,我们将深入探讨jQuery插件的原理、用途以及一些常见的插件实例。 首先,jQuery插件是jQuery库的扩展,它们提供了额外的功能和便捷的接口,帮助开发者更高效地实现页面交互、动画效果、数据处理等功能。...

    《锋利的jQuery》实例源码

    10. **版本兼容性**:jQuery的版本迭代通常会保持向后兼容,但新的版本可能会弃用旧的API,学习不同版本的jQuery实例源码有助于理解其演进过程和最佳实践。 通过分析《锋利的jQuery》实例源码,你可以深入理解...

    JQuery 实现的带有Tooltip效果表单验证.zip

    在jQuery中,可以使用`title`属性或者自定义的插件如`tooltipster`来创建Tooltip。在这个实例中,可能是通过监听`mouseover`和`mouseout`事件,动态改变元素的`title`属性,或者创建自定义的CSS类来实现视觉效果。 ...

    jquery提示框插件自定义多个方向浮动提示层

    2. CSS布局:使用CSS3的position属性(如absolute或fixed)可以实现元素的浮动效果。通过调整top、bottom、left和right属性值,可以将提示层定位到期望的方向。 3. jQuery事件处理:利用jQuery的事件监听器,如...

Global site tag (gtag.js) - Google Analytics