<html>

<head>

<title>jquery渐隐渐出的文字提示</title>

<style type="text/css">

#preview{border:1px solid #999;background:#9900CC;color:#fff;padding:5px;display:none;position:absolute;}

</style>

<script type="text/javascript" src="/ajaxjs/jquery-1.4.1.js"></script>

</head>

<body>

如果加载时有错误，请刷新一下页面，在真正应用中不会有此现象发生。<br/><br/><br/>

<a class="preview">请把鼠标放这里查看效果！</a>

<script type="text/javascript">

    this.imagePreview = function () {

        xOffset = 10;

        yOffset = 30;

        $("a.preview").hover(function (e) {

            $("body").append("<div id='preview'>这个提示是由jquery完成的哦，很不错吧？</div>");

            $("#preview")

    .css("top", (e.pageY - xOffset) + "px")

    .css("left", (e.pageX + yOffset) + "px")

    .fadeIn("slow");

        },

function () {

    $("#preview").fadeOut("fast");

});

        $("a.preview").mousemove(function (e) {

            $("#preview")

    .css("top", (e.pageY - xOffset) + "px")

    .css("left", (e.pageX + yOffset) + "px");

        });

    };

    $(document).ready(function () {

        imagePreview();

    });

</script>

</body>

</html>

jQuery渐隐渐出的文字提示的更多相关文章

  1. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  2. jQuery实现的简单文字提示效果模拟title(转)

    来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...

  3. jQuery简单纯文字提示条

    如何制作jQuery简单纯文字提示条,先介绍提示条(tooltip)的意思是用户鼠标悬停经过事件发生提示title.它们已经呈现在大多数浏览器中,当你可以提供一个链接或图片的title属性,就是用户将 ...

  4. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  5. jquery定时滑出可最小化的底部提示层

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...

  6. jQuery图片提示和文字提示

    图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. DOM操作在jQuery中的实用------文字提示和图片提示

    关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...

  8. MFC上下浮动与渐入渐出消息提示框实现

    类似QQ与360软件,消息提示有两种.上下浮动.渐入渐出. 1.上下浮动提示框实现 机制,定时器响应上下浮动消息. 主要API:MoveWindow. 源码如下UpDownTipDlg.h.UpDow ...

  9. jQuery 闪动的文字提示

    原文地址:http://www.cnblogs.com/kiter/archive/2013/02/22/2922242.html 声明,本文转自网络. jQuery 闪动的文字提示,仿QQ头像闪烁闪 ...

随机推荐

  1. Oracle SQL函数之字符串函数

    1.SQL> ) from dual; --ASCLL(x)返回x的ASCLL码,CHR(x)返回ASCLL码为x的字符 ASCII() ---------- ---------- ------ ...

  2. 二、Mp3帧分析（标签帧）

    Mp3文件由帧组成,帧分成标签帧和数据帧,本文就Mp3文件的帧进行分析. 一.标签帧 MP3帧头中除了存储一些象private.copyright.original的简单音乐说明信息以外,没有考虑存放 ...

  3. iOS开发之UIApplication

    UIApplication的核心作用是提供了iOS程序运行期间的控制和协作工作. iPhone应用程序是由主函数main启动,它负责调用UIApplicationMain函数,该函数的形式如下所示:  ...

  4. html基础之 表单提交方法

    最普通最常用最一般的方法就是用submit type..看代码: <form name=”form” method=”post” action=”#"> <input ty ...

  5. C/c++几个预定义的宏：__DATE__,__TIME__,__FILE__,__LINE__

    一边情况下,C/C++编译器会内置几个宏,这些宏定义不仅可以帮助我们完成跨平台的源码编写,灵活使用也可以巧妙地帮我们输出非常有用的调试信息. ANSI C标准中有几个标准预定义宏(也是常用的): __ ...

  6. Javascript自定义类

    JavaScript并不是严格的面向对象的语言,但是带有面向对象的一些特性,我们可以通过这些特性创建js中的自定义类. JavaScript中的类其实是function关键字包裹的一系列变量和方法. ...

  7. Ubuntu系统下创建python数据挖掘虚拟环境

    虚拟环境:   虚拟环境是用于创建独立的python环境,允许我们使用不同的python模块和版本,而不混淆.   让我们了解一下产品研发过程中虚拟环境的必要性,在python项目中,显然经常要使用不 ...

  8. 把自定义控件集成到Qt Designer中

    要想在Qt Designer中使用自定义控件,必须要使Qt Designer能够知道我们的自定义控件的存在.有两种方法可以把新自定义控件的信息通知给Qt Designer:“升级(promotion) ...

  9. Inno Setup设定只运行一个安装包

    原文 http://zwkufo.blog.163.com/blog/static/25882512010292526944/?suggestedreading&wumii 在安装包中,经常会 ...

  10. 2014第6周五JS调试

    今天才发现chrome调试前端尤其是JS真是很方便,难怪之前公司几个前端高手都用chrome的开发者工具来调试.把今天知道的chrome调试方法收集整理一下,在今后的开发调试中都可能会用到: Prof ...