<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. MP3/WAV 播放

    一.编译libmad  1.先下载压缩包到本地,并解压  tar -xvzf  libmad-0.15.1b.tar.gz   -C   ./ 2.进入源代码文件夹并配置 编写一个配置文件,便于< ...

  2. linux系统如何限制远程登录ip

    在Linux系统上限制远程登录的IP,使用系统自带的配置文件. /etc/hosts.allow /etc/hosts.deny 匹配原则  先allow 后deny. 要求: 只允许 192.168 ...

  3. HDU 5792 World is Exploding

    题意: 给出n代表序列的长度,接下来给出序列A.找出abcd满足abcd互不相等1<=a<b<c<d<=n的同时A[a]<A[b],A[c]>A[d],问这样 ...

  4. andrid中的Sqlite 数据库连接（本地版）

    sqlite简介 SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌入式的,而且目前 ...

  5. JQ 操作样式，单选按钮跟复选框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Oracle sql语言模糊查询--like后面的通配符

    关于like后面的条件,Oracle提供了四种匹配模式: 1,% :表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FR ...

  7. Java 基础之 static 静态

    static表示“全局”或者“静态”的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念. 被static修饰的成员变量和成员方法独立于该类的任何 ...

  8. AJAX防重复提交的办法总结

    最近的维护公司的一个代理商平台的时候,客服人员一直反映说的统计信息的时候有重复数据,平台一直都很正常,这个功能是最近新进的一个实习生同事写的功能,然后就排查问题人所在,发现新的这个模块的AJAX提交数 ...

  9. 碰到这个SB错误，'Taglist: Exuberant ctags (http://ctags.sf.net) not found in PATH. Plugin is not loaded.点办

    After launching MacVim you may get this annoying error message:'Taglist: Exuberant ctags (http://cta ...

  10. win8上安装 Pillow

    1.确保正确安装pip(2.7.9默认安装) 2. pip install wheel 3.下载 pillow-*.whl 根据自己的电脑和python版本 地址 4.安装 pip install x ...