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 实现邮箱输入自动提示功能
邮箱的广泛使用得益于它的免费,因此很多网站在注册的时候都会直接使用邮箱作为账号名为了提高用户的体验,很多网站都会实现邮箱输入的自动提示功能,所有自己也实现了一个,先看下效果吧,觉得效果还行的就拿去 ...

随机推荐

Spring三种实例化Bean的方法
1.实例化bean的三种方法:(1) 构造器<bean id="personService" class="com.persia ...
PL/pgSQL学习笔记之六
http://www.postgresql.org/docs/9.1/static/plpgsql-declarations.html 39.3.1. 声明函数参数传递给函数的参数被用 $1.$2等 ...
myeclipse如何导入相应的jar包
方法一: 相应的项目------>右键------->build path-------->Config BuildPath...------->Libraries------ ...
[译]如何在Unity编辑器中添加你自己的工具
在这篇教程中你会学习如何扩展你的Unity3D编辑器,以便在你的项目中更好的使用它.你将会学习如何绘制你自己的gizmo,用代码来实现创建和删除物体,创建编辑器窗口,使用组件,并且允许用户撤销他们所作 ...
Redis_字典
阅读本文之前要了解的两件事情,第一,Redis是一种Key-Value数据库,第二,字典是一种保存键值对的抽象数据结构.所以不难猜出字典在Redis中应用一定很广泛,实际上,Redis数据库的底层实现 ...
OverHust
https://github.com/fanhongwei/OverHust https://github.com/eltld/OverHust
FindMe
https://github.com/hongdong/FindMe_Android https://github.com/hongdong/FindMe_Server https://github. ...
CircleWaveProgressBar
https://github.com/eltld/CircleWaveProgressBar
视频流服务器配置[windows平台][转]
视频流服务器配置[windows平台] 搭建一个Flv视频播放服务器作者:笨小孩发布于:2013-9-1 20:18 分类:环境架设 IIS,Apache,Nginx环境都可以很好的支持视频的播放 ...
TP复习
第一课,三步骤 1,.名称 2.路径 3.引用核心文件 4,.公用的可以建立public upload css 等第二课 uRL四中模式 ~ActionClass.php 一.什么是MVC / ...

jQuery图片提示和文字提示

jQuery图片提示和文字提示的更多相关文章

随机推荐

热门专题