jQuery开发之超链接提示效果和图片提示效果

1,超链接提示效果
超链接自带的有提示效果的,这里就把自己定义的提示效果放在一起可以进行一下比较。示例代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test title>
<script type ="text/javascript" src ="jquery.js" >script>

<script type ="text/javascript">
$(document).ready(function(){


    var x = 10;
    var y = 20;

    $("a.tooltip").mouseover(function(e){

    this.myTitle =  this.title;
    this.title ="";
    var tooltip ="
"+this.myTitle+"
"
; $("body").append(tooltip); //将它追加到文档中 $("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px","color":"#00ff00"}).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","color":"#00ff00"}); }); });
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> body> html>

运行效果如下:
jQuery开发之超链接提示效果和图片提示效果_第1张图片

jQuery开发之超链接提示效果和图片提示效果_第2张图片

可以看到自定义的提示效果可以实现的效果更好些。而且可以设置的样式更多,是网页看起来更加的好看。

2,图片提示效果
示例代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>jQuery test title>
<script type ="text/javascript" src ="jquery.js" >script>

<script type ="text/javascript">
$(document).ready(function(){


    var x = 10;
    var y = 20;

    $("a.tooltip").mouseover(function(e){

    this.myTitle =  this.title;
    this.title ="";
    var imgTitle =this.myTitle?"
"
+this.myTitle:+""; var tooltip ="
图片预览"+this.myTitle+"
"
;//这个地方要特别注意,要给this.href 外面添加单引号 $("body").append(tooltip); //将它追加到文档中 $("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px","color":"#00ff00"}).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","color":"#00ff00"}); }); });
script> head> <body> <ul> <li><a href ="http://img0.bdstatic.com/img/image/shouye/sheying0617.jpg" class ="tooltip" title ="小鸟"><img src ="http://img0.bdstatic.com/img/image/shouye/sheying0617.jpg" alt ="小鸟照片" />a>li> <li><a href ="http://img0.bdstatic.com/img/image/shouye/bizhi0617.jpg" class ="tooltip" title ="鲜花" ><img src ="http://img0.bdstatic.com/img/image/shouye/bizhi0617.jpg" alt ="鲜花图片" />a>li> ul> body> html>

运行效果如下:
jQuery开发之超链接提示效果和图片提示效果_第3张图片
jQuery开发之超链接提示效果和图片提示效果_第4张图片

你可能感兴趣的:(jQuery)