编程 Javascript

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

Posted in Javascript onJuly 04, 2016

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

1.效果如图：

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程序设计有所帮助。

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

- Author -

yanhui_wei

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery dataTables与jQuery UI 对话框dialog的使用教程

Sep 02 Javascript

BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）

Nov 30 Javascript

微信小程序 PHP后端form表单提交实例详解

Jan 12 Javascript

微信小程序访问node.js接口服务器搭建教程

Apr 25 Javascript

JS中LocalStorage与SessionStorage五种循序渐进的使用方法

Jul 12 Javascript

angular 服务的单例模式(依赖注入模式下)详解

Oct 22 Javascript

JS+CSS实现3D切割轮播图

Mar 21 Javascript

vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作

Jul 22 Javascript

搭建vscode+vue环境的详细教程

Aug 31 Javascript

一起深入理解js中的事件对象

Feb 06 Javascript

浅谈react useEffect闭包的坑

Jun 08 Javascript

Vue-Element-Admin集成自己的接口实现登录跳转

Jun 23 Vue.js

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