jquery模拟title提示效果

2017-07-05 22:26:00 3511 5 编辑:SW 来源:技术博客

当文字字符长度被限制后,总有些长标题会被截断,用title提示虽简单但会造成页面html代码的冗余,这里用jquery做了一个模拟title的提示效果,具体代码如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery实现的简单文字提示效果</title>

<script src="http://www.phpernote.com/js/jquery.min.js" type="text/javascript"></script>

<style type="text/css">

#pt_phpernote{

position:absolute;

border:1px solid #333;

background:#f7f5d1;

padding:2px;

color:#333;

display:none;

font-size:12px;

}

</style>

<script type="text/javascript">

$(function(){

    var x=10,y=20;

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

        $("body").append("<div id='pt_phpernote'>"+ this.text+"<\/div>");

        $("#pt_phpernote").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast");

    }).mouseout(function(){

        $("#pt_phpernote").remove();

    }).mousemove(function(e){

        $("#pt_phpernote").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"});

    });

})

</script>

</head>

<body>

<p><a href="#" class="pt">php cli下接受参数的几种方法</a></p>

</body>

</html>



本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询
微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

深正互联微信
扫描即可沟通