jquery.js+jquery.corner.js实现tooltip提示框

电玩女神 2022-04-15 00:13 280阅读 0赞

web2.0的发展促使web前端的快速发展，jquery是一个简单而优秀的ajax框架，通过它简单的可以实现跟多的web特效，以及ajax效果。

何为提示框？当鼠标滑过某处时希望系统能给出更详尽的提示，那么这时就需要一个提示框，常规页面通过html便签的title属性来实现，下面来通过jquery来实现，而jquery的插件jquery.corner.js可以实现框体产生圆角则更加优美。

对于jquery.js框架以及其插件可以从其官网上直接下载，这里不再提供，直接使用范例。

文件结构

js/jquery-1.8.3.js

js/jquery.coener.js

js/app.js

css/main.css

index.html

其中jquery.js、jquery.coener.js是引入的框架及其插件

index.html

<!DOCTYPE HTML>
    <html>                                                                  
    <head>
    <title>my tip</title> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
      <script type="text/javascript" src="js/jquery.corner.js"> </script> 
     <script type="text/javascript" src="js/app.js"></script>
    <link rel="stylesheet" type="text/css" media="screen,projection" href="css/main.css" /> 
     </head>                                                                  
     <body>
     <div  id=tip style="display:none"></div>
    <a title="I am a title tip!">title tip</a>
    <br>
    <br>
    <br>
    <a id=tooltip rel="I am a corner toolstip!" >tooltip</a>
    </body>
    </html>

css/main.css

* { margin: 0; padding:0; }
    body{
        color:#2d1904;
        background-color: #83b830;
        position: relative;
        clear: both;
        margin: 2px auto auto auto;
        width:80%; 
        padding:5px 5px 5px 35px; 
        }
    #tip{
    	position: absolute;
    	width:250px;
    	z-index:1000;
    	border: 2px solid #2d2a2a;
    	background-color: #ffffff;
    	padding:7px 30px 10px 25px;
    }

js/app.js

$(document).ready(function() {
        $('#tip').corner("10px");	
        $("#tooltip").hover(function(){DoTip(this.rel)},function(){$('#tip').hide('fast').empty();})
               .click(function(){$('#tip').slideUp().empty();});   	   
        function DoTip(rr){	    
    	$(document).mousemove(function(e){
            var MyX=e.pageX;
            var MyY=e.pageY;
            var myx=MyX+2;
            $("#tip").css({left:myx,top:MyY});
            });
        $("#tip").html('<br>'+rr+'');
        $("#tip").show("fast");
        return true;
        };
    });

效果如图：

![1356355869_6743.png][]

![1356355879_2689.png][]

[1356355869_6743.png]: https://img-my.csdn.net/uploads/201212/24/1356355869_6743.png
[1356355879_2689.png]: https://img-my.csdn.net/uploads/201212/24/1356355879_2689.png