<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. nginx默认虚拟主机

    server { listen 80 default_server; server_name localhost; index index.html index.htm index.php; root ...

  2. MSDTC问题集

    一.链接服务器的 OLE DB 访问接口 "SQLNCLI" 无法启动分布式事务. 尊重原著作:本文转载自http://sfwxw456.blog.163.com/blog/sta ...

  3. flex与js相互调用

    1.flex调用js方法 调用方法例如:ExternalInterface.call("UploadComplete",oldName,uidName,_dir+"/&q ...

  4. angularjs factory,service,provider 自定义服务的不同

    angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angul ...

  5. 再谈Android应用瘦身

    Android应用apk安装包的大小,虽然对于现在WiFi普及情况而言消耗流量已经微乎其微,但是,对于一款好的应用,对于一款负责任的应用,当然是越小越好了. 引言: .应用越小,下载越快,也就意味着新 ...

  6. Javascript-数据类型、类型转换

    typeof 判断数据类型: var n = 1; var t = "echo"; var fn = function() {} var arr = [1,2,3]; typeof ...

  7. 使用 phpMailer 基于(SMTP) 发送邮件

    PHPMailer是一个用于发送电子邮件的PHP函数包.它提供的功能包括:在发送邮时指定多个收件人,抄送地址,暗送地址和回复地址.支持多种邮件编码包括:8bit,base64,binary和quote ...

  8. C++ 前置声明 和 包含头文件 如何选择

    假设有一个Date类 Date.h class Date { private: int year, month, day; }; 如果有个Task类的定义要用到Date类,有两种写法 其一 Task1 ...

  9. Windows 10上快速尝鲜bash on Ubuntu

    今年微软Build 2016大会最让开发人员兴奋的消息之一,就是在Windows上可以原生运行Linux bash,对于非开发人员来讲,可能不知道这意味着什么,而对于开发人员来说,意味着Windows ...

  10. UI经验

    移动端设计原则----大.高.宽---------------->本质上都是以用户体验为判断依据 1.手指触摸方便.精准------------>高度 50px.色块 2.字体大小---- ...