jQuery文字提示与图片提示效果实现方法


Posted in Javascript onJuly 04, 2016

本文实例讲述了jQuery文字提示与图片提示效果实现方法。分享给大家供大家参考,具体如下:

1.效果如图:

jQuery文字提示与图片提示效果实现方法

jQuery文字提示与图片提示效果实现方法

2.文字提示代码:

<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>

3.图片提示代码:

<script type="text/javascript">
//<![CDATA[
$(function(){
 var x = 10;
 var y = 20;
 $("a.tooltip").mouseover(function(e){
  this.myTitle = this.title;
  this.title = "";
  var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
  var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/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>
<h3>有效果:</h3>
<ul>
  <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
  <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
  <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
  <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
</ul>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
TypeScript 中接口详解
Jun 19 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 #Javascript
表单中单选框添加选项和移除选项
Jul 04 #Javascript
jQuery实现简单倒计时功能的方法
Jul 04 #Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 #Javascript
JavaScript 节流函数 Throttle 详解
Jul 04 #Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 #Javascript
实用jquery操作表单元素的简单代码
Jul 04 #Javascript
You might like
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
php绘制一条弧线的方法
2015/01/24 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP之header函数详解
2021/03/02 PHP
JS 判断代码全收集
2009/04/28 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
JS库之Highlight.js的用法详解
2017/09/13 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
python清除函数占用的内存方法
2018/06/25 Python
Python自动化操作实现图例绘制
2020/07/09 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
Android笔试题总结
2014/11/29 面试题
服务中心夜班服务员岗位职责
2013/11/27 职场文书
实习求职信
2013/12/01 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
励志演讲稿大全
2014/08/21 职场文书
500字小学生检讨书
2015/02/19 职场文书
介绍信范文大全
2015/05/07 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
Python代码实现双链表
2022/05/25 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript