2012-06-04 自己写的基于jquery的类似百度贴吧头像提示效果

　　加到过百度贴吧上面，头像提示功能，本来觉得很假单的，但是怎么都想不出，网上翻了翻也没几个这样的例子，这里给大家一个想法和做法  仅供参考（有好的分享下啊）

js Code 
<script type="text/javascript">
var bb_czFalseA = false;
var bb_czFalseB = false;
var dsq;
var b = 0;
    function cc(e){
        b++;;
        if(bb_czFalseA || bb_czFalseB){    
        $('.personHeadTip').fadeIn(300)
        }else{
            $('.personHeadTip').fadeOut(300)
            clearInterval(dsq)
        }
    }
    function personHeadTipaa(){
        bb_czFalseA=true;
        dsq = setInterval(cc,1000); 
    }
    function personHeadTipbb(){
        bb_czFalseA=false;
    }
    function personHeadTipdd(){
        bb_czFalseB=false;
    }
    function personHeadTipee(){
        bb_czFalseB=true;
    }
</script>
html Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery-1.3.1.js" /></script>
<style type="text/css">
.personHeadTip{ width:180px; height:285px; background:#666; left:70px; top:20px; position:absolute; display:none}
</style>
</head>

<div onmouseover="personHeadTipaa()" class="baba" onmouseout="personHeadTipbb()">浮动我</div>
<div  onmouseover="personHeadTipee()" onmouseout="personHeadTipdd()" class="personHeadTip">
baibing
</div>
<body>
</body>
</html>

废话不多说啊，就是用了js 做了个判断（额 这个不好想其实  ） +上clearInterval（）函数~~~~

很实用的一个效果哦（我成功的把它做成了 一个可以点击链接的title效果 ）

 

下载地址

posted @ 2012-06-04 17:10  boyice  阅读(446)  评论(0)  编辑  收藏  举报