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 相关文章推荐
js计数器代码
Nov 04 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
ES6扩展运算符的用途实例详解
Aug 20 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 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读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
Javascript技术难点之apply,call与this之间的衔接
2015/12/04 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python中实现三目运算的方法
2015/06/21 Python
Python判断两个对象相等的原理
2017/12/12 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
OpenCV 模板匹配
2019/07/10 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
python实现控制台输出颜色
2021/03/02 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
小孩百日宴答谢词
2014/01/15 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
关于童年的读书笔记
2015/06/26 职场文书
三八节祝酒词
2015/08/11 职场文书