jquery实现简单文字提示效果

本文实例讲述了jquery实现简单文字提示效果。分享给大家供大家参考，具体如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery实现简单文字提示</title>
<style type="text/css">
#preview{border:2px solid #c7c7c7; background:#e3f4f9; padding:5px; display:none; position:absolute;}
</style>
<script src="jquery-1.2.6.pack.js" type="text/javascript"></script>
</head>
<body>
<a class="preview" title="看看提示出现了没">移到我身上来！！</a>
<script type="text/javascript">
this.imagePreview = function(){
/* CONFIG */
  xOffset = 10;
  yOffset = 20;
  // 可以自己设定偏移值
/* END CONFIG */
$("a.preview").hover(function(e){
  this.t = this.title;
  this.title = "";
  var c = (this.t != "") ? "" + this.t : "";
  $("body").append("<div id='preview'>"+ c +"</div>");
  $("#preview")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px")
  .fadeIn("fast");
  },
function(){
  this.title = this.t;
  $("#preview").remove();
  });
$("a.preview").mousemove(function(e){
  $("#preview")
  .css("top",(e.pageY - xOffset) + "px")
  .css("left",(e.pageX + yOffset) + "px");
});
};
// 页面加载完执行
$(document).ready(function(){
imagePreview();
});
</script>
</body>
</html>

jquery-1.2.6.pack.js插件点击此处本站下载。

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

赞 (0)

相关推荐

  • jQuery简单实现title提示效果示例

    本文实例讲述了jQuery简单实现title提示效果的方法.分享给大家供大家参考,具体如下: /* 调用示例: $(document).ready(function(){ $('.quicktip').quberTip({ speed:200 }); }); <a href='' class='quicktip' title='Information about this link'>desktop publishing</a> */ jQuery.fn.quberTip = fu

  • jQuery实现行文字链接提示效果的方法

    本文实例讲述了jQuery实现行文字链接提示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xht

  • jquery实现网站超链接和图片提示效果

    超链接提示效果: 复制代码 代码如下: <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='

  • jQuery实现的超链接提示效果示例【附demo源码下载】

    jQuery实现的超链接提示效果示例【附demo源码下载】

    本文实例讲述了jQuery实现的超链接提示效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <style type="text/css"&g

  • JQuery实现超链接鼠标提示效果的方法

    本文实例讲述了JQuery实现超链接鼠标提示效果的方法.分享给大家供大家参考.具体分析如下: 浏览器其实已经自带了超链接提示,只需在超链接中加入title属性就可以了.但是这个提示效果的响应速度是非常缓慢的,大概要延迟1秒左右啊.我们现在需要的是当鼠标移动到超链接的那一瞬间就出现提示.这时就需要移除a标签中的title提示效果,自己动手做一个类似功能的提示. HTML设计如下: 复制代码 代码如下: <p><a href="http://www.jb51.net/"

  • jquery实现鼠标滑过后动态图片提示效果实例

    jquery实现鼠标滑过后动态图片提示效果实例

    本文实例讲述了jquery实现鼠标滑过后动态图片提示效果.分享给大家供大家参考.具体如下: 这里jquery实现的鼠标悬停图片提示效果,把鼠标放在图片上的时候,图片向右上角滑动并缩小,同时提示显示出来,类似幻灯片一样的效果,推荐给大家学习借鉴. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <head> <title>jQuery图片动态信息显示幻灯效果</title> <style> .galleryContainer {

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

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

    本文实例讲述了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 = &q

  • jQuery表单获取和失去焦点输入框提示效果的实例代码

    复制代码 代码如下: $("#focus .input_txt").each(function(){  var thisVal=$(this).val();  //判断文本框的值是否为空,有值的情况就隐藏提示语,没有值就显示  if(thisVal!=""){  $(this).siblings("span").hide();  }else{  $(this).siblings("span").show();  }  //聚焦

  • jquery删除数据记录时的弹出提示效果

    jquery删除数据记录时的弹出提示效果

    提示效果如图:(删除提示框一直居中显示)   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码

    本文实例讲述了jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码.分享给大家供大家参考,具体如下: 这是一款仿腾讯网QQ空间装扮预览图片的鼠标提示效果,感应鼠标显示图片的介绍信息,当你把鼠标移到图片上的时候,图片的背景会有所变化,并会显示该图片的对应文字内容,是QQ空间使用过的效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-qq-zone-pic-view-codes/ 具体代码如下: <!DOCTYPE html

随机推荐