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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
js调用刷新界面的几种方式
May 03 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
JS原生实现轮播图的几种方法
Mar 23 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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
Search Engine Friendly的URL设计
2006/10/09 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
PHP CURL使用详解
2019/03/21 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
JavaScript入门教程(9) Document文档对象
2009/01/31 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
20行python代码实现人脸识别
2019/05/05 Python
pytorch标签转onehot形式实例
2020/01/02 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
企业管理专业个人求职信范文
2013/09/24 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
室内拓展活动方案
2014/02/13 职场文书
《掌声》教学反思
2014/02/23 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
JavaScript实现队列结构过程
2021/12/06 Javascript
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android