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='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>

图片提示效果:


代码如下:

<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>

(0)

相关推荐

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

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

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

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

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

  • jquery实现简单文字提示效果

    本文实例讲述了jquery实现简单文字提示效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> &l

  • 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实现行文字链接提示效果的方法

    本文实例讲述了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实现的超链接提示效果示例【附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简单实现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

随机推荐