jQuery渐隐渐出的文字提示
<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渐隐渐出的文字提示的更多相关文章
- jQuery鼠标悬停文字渐隐渐现动画效果
jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...
- jQuery实现的简单文字提示效果模拟title(转)
来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...
- jQuery简单纯文字提示条
如何制作jQuery简单纯文字提示条,先介绍提示条(tooltip)的意思是用户鼠标悬停经过事件发生提示title.它们已经呈现在大多数浏览器中,当你可以提供一个链接或图片的title属性,就是用户将 ...
- 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题
在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...
- jquery定时滑出可最小化的底部提示层
效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/index.htm当打开页面或者刷新页面后等待两秒钟,会在底部滑出可最小化的提示层.滑出层半透明,可关闭再现. ...
- jQuery图片提示和文字提示
图片提示: 效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- DOM操作在jQuery中的实用------文字提示和图片提示
关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...
- MFC上下浮动与渐入渐出消息提示框实现
类似QQ与360软件,消息提示有两种.上下浮动.渐入渐出. 1.上下浮动提示框实现 机制,定时器响应上下浮动消息. 主要API:MoveWindow. 源码如下UpDownTipDlg.h.UpDow ...
- jQuery 闪动的文字提示
原文地址:http://www.cnblogs.com/kiter/archive/2013/02/22/2922242.html 声明,本文转自网络. jQuery 闪动的文字提示,仿QQ头像闪烁闪 ...
随机推荐
- Hacker(三)之黑客定位目标---IP
IP即Internet Protocol的简称,中文简称"网协",是为计算机网络相互连接进行通信而设计的协议.无论何种操作系统,只要遵守IP协议就可以与Internet互联互通. ...
- AlertDialog详解
参考地址:http://blog.csdn.net/woaieillen/article/details/7378324 1.弹出提示框 new AlertDialog.Builder(LoginAc ...
- 禁掉a链接的几种方法
这次遇到链接 先留着 但不能有任何作用的需求 ,我只能说顾客的需求真是多种多样,奇奇怪怪啊 啊啊啊啊啊啊啊啊啊啊啊 我用span代替了a 标签,但是后来想想维护起来可能不太方便 所以上网查资料, ...
- css基础之 联网使用bootstrap
在<head></head>中添加 <meta charset="utf-8"> <meta http-equiv="X-UA- ...
- HDU 2458 - Kindergarten
有一堆男孩和女孩,男孩和男孩之间,女孩和女孩之间互相认识,给出一堆男孩女孩之间认识的关系, 问一个组里最多多少人相互都认识 那么 二分图里 将不认识的连线 那么 相互认识的人最多 就为 最大独立点集 ...
- 表单验证的validate.js插件---jQuery Validation Plugin
早上在公交车上看了一个关于慕课网的教程<表单验证的validate.js插件---jQuery Validation Plugin>,正好可以用到自己近期开发简易微博的注册页面和登录页面, ...
- go import
import "fmt"最常用的一种形式 import "./test"导入同一目录下test包中的内容 import f "fmt"导入f ...
- win7笔记本电脑实现wifi共享
前提条件:win 7系统,有wifi 同dos命令就可实现wifi共享 第一步: netsh wlan start hostednetwork pause 第二步: netsh wlan set ho ...
- Entity Framework 利用 Database.SqlQuery<T> 执行存储过程,并返回Output参数值
做个记录: var pCount = this._dataProvider.GetParameter(); pCount.ParameterName = "totalCount"; ...
- 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 ...