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

最新推荐文章于 2021-11-22 16:35:04 发布

俊才星驰

最新推荐文章于 2021-11-22 16:35:04 发布

阅读量1.9k

点赞数

分类专栏： jquery 文章标签： jquery jQuery JQUERY Jquery JQuery web Web WEB

本文链接：https://blog.csdn.net/wjlong0318/article/details/8424616

版权

jquery 专栏收录该内容

1 篇文章 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;
    };
});

效果如图：

俊才星驰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.js+jquery.corner.js实现tooltip提示框

web2.0的发展促使web前端的快速发展，jquery是一个简单而优秀的ajax框架，通过它简单的可以实现跟多的web特效，以及ajax效果。何为提示框？当鼠标滑过某处时希望系统能给出更详尽的提示，那么这时就需要一个提示框，常规页面通过html便签的title属性来实现，下面来通过jquery来实现，而jquery的插件jquery.corner.js可以实现框体产生圆角则更加优美。
复制链接

扫一扫