码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现的简单文字提示效果模拟title(转)

时间:2014-06-21 13:37:15      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

来源 http://www.cnblogs.com/puzi0315/archive/2012/10/17/2727693.html

模拟title实现效果,可以修改文字的样式,换行等。

文件下载:

先看下效果截图:

bubuko.com,布布扣

 

 

代码分析:

<!-- 引用jQuery -->
 <script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
body{
    margin:0;
    padding:40px;
    background:#fff;
    font:80% Arial, Helvetica, sans-serif;
    color:#555;
    line-height:180%;
}
p{
    clear:both;
    margin:0;
    padding:.5em 0;
}
/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:1px;
    color:#333;
    display:none;
}
</style>
<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"
            });
    });
})
//]]>

当然也可以不使用原来的title,将原来的title去掉,自己手写相关内容:

<style type="text/css">
/* tooltip */
#tooltip{
    position:absolute;
    border:1px solid #333;
    background:#f7f5d1;
    padding:5px;
    color:#333;
    display:none;
}
</style>

<script type="text/javascript" src="themes/ecshop_name1/js/jquery.tip.js"></script>
<script type="text/javascript">
$(document).ready(function() {
                           
    var x = 10;  
    var y = 20;
    $(".pmrhf").mouseover(function(e){
                myTitle =" 乐视购为您精确计算出每天使用隐形眼镜的真正花费,<br/><b>隐形眼镜类</b>:根据使用周期,每副的日均花费,<br/><b>护理液类</b>:清洗并储存隐形眼镜的日均花费,<br/><b>润眼液类</b>:使用润眼液的日均花";
        var tooltip = "<div id=‘tooltip‘>"+  myTitle +"<\/div>"; //创建 div 元素 文字提示
        $("body").append(tooltip);    //把它追加到文档中
        $("#tooltip")
            .css({
                "top": (e.pageY+y) + "px",
                "left": (e.pageX+x)  + "px"
            }).show("fast");      //设置x坐标和y坐标,并且显示
    }).mouseout(function(){        
        $("#tooltip").remove();   //移除 
    }).mousemove(function(e){
        $("#tooltip")
            .css({
                "top": (e.pageY+y) + "px",
                "left": (e.pageX+x)  + "px"
            });
    });
});


    
</script>

 

 

 

 

 

jQuery实现的简单文字提示效果模拟title(转),布布扣,bubuko.com

jQuery实现的简单文字提示效果模拟title(转)

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/KeenLeung/p/3794790.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!