jQuery图片提示和文字提示
图片提示:
效果如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片提示</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var x = 10;
var y = 20;
$("a[class=tooltip]").mouseover(function(e){
//1 获取对应a标签的href属性
var myHref = this.href;
//2 创建标签进行图片提示
var $div = $("<div id='tooltip'><img src='"+myHref+"'></img></div>");
//3 添加到页面中(body标签下)
$("body").append($div);
//4 调整一下位置(相对鼠标的坐标值)
$("#tooltip").css({
top : e.pageY + y + "px",
left : e.pageX + x + "px"
}).show();
}).mouseout(function(){
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip").css({
top : e.pageY + y + "px",
left : e.pageX + x + "px"
})
});
});
</script>
</head>
<body>
<h3>有效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
<br/><br/><br/><br/>
<br/><br/><br/><br/>
<h3>无效果：</h3>
<ul>
<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="data:images/apple_1.jpg" alt="苹果 iPod" /></a></li>
<li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="data:images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
<li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="data:images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
<li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="data:images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>
文字提示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字提示</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script type="text/javascript">
//<![CDATA[
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
//]]>
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>
jQuery图片提示和文字提示的更多相关文章
- 基于jQuery图片遮罩滑动文字切换特效
基于jQuery图片遮罩滑动文字切换特效.这是一款jquery hover鼠标滑动选项卡切换透明背景遮罩文字显示特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- DOM操作在jQuery中的实用------文字提示和图片提示
关于文字提示想必是家喻户晓,操作呢说简单一点就是在超链接中加入title属性.但是在人机交互越来越倍受恩宠的年代,依靠浏览器自带的文字提示即title属性,提示效果的响应速度就(还是人艰不拆了吧~)s ...
- jQuery实现的简单文字提示效果模拟title(转)
来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html 模拟title实现效果,可以修改文字的样式,换行等. 文件下载: ...
- jQuery简单纯文字提示条
如何制作jQuery简单纯文字提示条,先介绍提示条(tooltip)的意思是用户鼠标悬停经过事件发生提示title.它们已经呈现在大多数浏览器中,当你可以提供一个链接或图片的title属性,就是用户将 ...
- jQuery渐隐渐出的文字提示
<html> <head> <title>jquery渐隐渐出的文字提示</title> <style type="text/css&q ...
- iOS开发（3）：tips提示 | 如何提示一行文字或一个图片
我有一个需求:在点击或长按某个按钮时,显示提示,包括简单的文字提示,还有复杂一点的图片甚至是动态图的提示(可能还要加上文字),怎么实现呢? (1)文字tips 使用之前介绍的qmuikit里面的QMU ...
- jQuery 闪动的文字提示
原文地址:http://www.cnblogs.com/kiter/archive/2013/02/22/2922242.html 声明,本文转自网络. jQuery 闪动的文字提示,仿QQ头像闪烁闪 ...
- 修改js confirm alert 提示框文字的简单实例
修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...
- jquery 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名 为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...
随机推荐
- 10个经典的Java main 方法面试题
1. 不用main方法如何定义一个类? 不行,没有main方法不能运行Java类. 在Java 7之前,你可以通过使用静态初始化运行Java类.但是,从Java 7 开始就不行了. 2. main() ...
- android 简易定时器
定时器 1.在android 应用开发当中,很多时候都要用到定时器,而要实现定时器更多的时候要用到两个类:Timer,和TimerTask 2.API对Timer的解释是:
- Xcode 快捷键操作
菜单栏 桌面 dock 不同应用的菜单栏始终出现在桌面最左上部 commond +shift+y 显示那个XCODE的调试框口 commond +R 运行 commond +,是个性设置,对于任何一 ...
- 基本的TCP编程
int socket(int family,int type,int protocol); family: AF_INET ipv4协议 AF_INET6 ipv6协议 AF_LOCAL unix域协 ...
- windows apache vhost 403 error
<Directory D:\workspace\ecshop> Options FollowSymLinks AllowOverride None Order deny,allow all ...
- 功能强大支持64位操作系统的转Flash软件(doc转swf)：Print2Flash
Print2Flash是一个虚拟打印机类的文档转换软件,因此只要是可打印的文档,都可以轻松转换为Flash文件,即SWF动画,特别是用于转换PDF.Word.Excel.PowerPoint等文档为S ...
- 使用JDK开发Servlet程序
在eclipse中集成JDK和tomcat服务器方法很简单,我们可以在服务器上运行想要的东西.但有时也需要我们手动档编译我们的Servlet程序. 所以才有了今天这篇文章,本文以下内容从网上参考,有很 ...
- 常见错误：Apple Mach-O Linker Error
常见错误描述: Apple Mach-O Linker Error这类错误的错误信息最后一行通常如下: Command /Developer/Platforms/iPhoneOS.platform/D ...
- Correct thread terminate and destroy
http://www.techques.com/question/1-3788743/Correct-thread-destroy Hello At my form I create TFrame a ...
- Java数据结构之树和二叉树
从这里开始将要进行Java数据结构的相关讲解,Are you ready?Let's go~~ Java中的数据结构模型可以分为一下几部分: 1.线性结构 2.树形结构 3.图形或者网状结构 接下来的 ...