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 相关文章推荐
javascript Keycode对照表
Oct 24 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
Apr 25 Javascript
js数组去重的方法汇总
Jul 29 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
React组件中的this的具体使用
Feb 28 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 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
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
BootstrapValidator不触发校验的实现代码
2016/09/28 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
pandas实现选取特定索引的行
2018/04/20 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
浅析Python语言自带的数据结构有哪些
2019/08/27 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python如何基于redis实现ip代理池
2020/01/17 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
MoviePy常用剪辑类及Python视频剪辑自动化
2020/12/18 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
食品采购员岗位职责
2014/04/14 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
卖房协议书样本
2014/10/30 职场文书
2014年保卫部工作总结
2014/11/21 职场文书
护士求职简历自我评价
2015/03/10 职场文书
作文之亲情600字
2019/09/23 职场文书
Redis 哨兵集群的实现
2021/06/18 Redis