<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 Linux Server 7安装VMwareTools问题

    OracleLinuxServer7安装VMwareTools问题#./vmware-install.pl时报错:#-bash: ./vmware-instal.pl:/usr/bin/perl:ba ...

  2. Java单例模式的线程安全问题

    单例模式有两种书写模式:饿汉式和懒汉式. 1.饿汉式 class Single{ private final static Single s = new Single(); private Singl ...

  3. 自定义view(自定义view的时候,三个构造函数各自的作用)

    package com.timeshare.tmband.Utils; import android.content.Context; import android.content.res.Typed ...

  4. UVA 10806 Dijkstra, Dijkstra.

    题意: 从起点走到终点,然后从终点走到起点,其中不能同时走过相同的一条边,问你最小路径长度.先输入终点n,起点为1,接下来输入m,代表有m条边.每条边由起点,终点,长度组成. 分析: 求最小长度,还限 ...

  5. C语言中命名空间的实现

    foobar.h // inclusion guard #ifndef FOOBAR_H_ #define FOOBAR_H_ //// long names //int foobar_some_fu ...

  6. (ssh整合web导出excel)在ssh框架中使用poi正确导出具有比较高级固定格式的excel 整体过程,查询导出前后台下载

    (一) 接需求  :   需求相关   (贴图 ) 生成三核对文件 1.新增三核对菜单页面中,增加生成三核对文件功能按钮,弹窗可根据变电站.电压等级查询定值单. 2.定值单信息以表格形式展示,根据选择 ...

  7. Linux命令备忘录

    1.tar命令 解压tar.gz格式压缩包:tar zxvf xxx.tar.gz 解压tar.bz2格式压缩包:tar jxvf xxx.tar.bz2 压缩为tar.gz格式压缩包:tar zcv ...

  8. PNG图片小结

    PNG: 便携式网络图形(Portable Network Graphics,PNG)是一种无损压缩的位图图形格式,支持索引.灰度.RGB三种颜色方案以及Alpha通道等特性.PNG的开发目标是改善并 ...

  9. 常量 - PHP手册笔记

    常量语法 常量在脚本执行期间其值不能改变.常量大小写敏感,传统上常量标识符总是大写.常量一旦定义就不能被重新定义或取消定义,常量的值只能是标量. 可以用define()函数来定义常量,也可以使用con ...

  10. javascript的stringFormat函数实现

    写一个简单的stringFormat来给自己用 function stringFormat(format, args) { var formatData; if (arguments.length = ...