<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. Hacker（三）之黑客定位目标---IP

    IP即Internet Protocol的简称,中文简称"网协",是为计算机网络相互连接进行通信而设计的协议.无论何种操作系统,只要遵守IP协议就可以与Internet互联互通. ...

  2. AlertDialog详解

    参考地址:http://blog.csdn.net/woaieillen/article/details/7378324 1.弹出提示框 new AlertDialog.Builder(LoginAc ...

  3. 禁掉a链接的几种方法

    这次遇到链接 先留着  但不能有任何作用的需求  ,我只能说顾客的需求真是多种多样,奇奇怪怪啊 啊啊啊啊啊啊啊啊啊啊啊 我用span代替了a 标签,但是后来想想维护起来可能不太方便  所以上网查资料, ...

  4. css基础之 联网使用bootstrap

    在<head></head>中添加 <meta charset="utf-8"> <meta http-equiv="X-UA- ...

  5. HDU 2458 - Kindergarten

    有一堆男孩和女孩,男孩和男孩之间,女孩和女孩之间互相认识,给出一堆男孩女孩之间认识的关系, 问一个组里最多多少人相互都认识 那么 二分图里 将不认识的连线 那么 相互认识的人最多 就为 最大独立点集 ...

  6. 表单验证的validate.js插件---jQuery Validation Plugin

    早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...

  7. go import

    import "fmt"最常用的一种形式 import "./test"导入同一目录下test包中的内容 import f "fmt"导入f ...

  8. win7笔记本电脑实现wifi共享

    前提条件:win 7系统,有wifi 同dos命令就可实现wifi共享 第一步: netsh wlan start hostednetwork pause 第二步: netsh wlan set ho ...

  9. Entity Framework 利用 Database.SqlQuery<T> 执行存储过程，并返回Output参数值

    做个记录: var pCount = this._dataProvider.GetParameter(); pCount.ParameterName = "totalCount"; ...

  10. gnome-ssh-askpass:No such file or directory && unable to read askpass response

    1.使用git的时候,gnome-ssh-askpass出现“error: cannot run /usr/libexec/openssh/gnome-ssh-askpass: No such fil ...