加到过百度贴吧上面,头像提示功能,本来觉得很假单的,但是怎么都想不出,网上翻了翻也没几个这样的例子,这里给大家一个想法和做法 仅供参考(有好的分享下啊)
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效果 )