首页 > 其他 > 详细

鼠标放在图片上,出来小tips

时间:2014-02-26 01:19:51      阅读:328      评论:0      收藏:0      [点我收藏+]

1.引入Jquery.js

2.引入tipsy.js插件

  

 

bubuko.com,布布扣
<!doctype html>
<html>
<head>
<!--@author:luowen @time:2014-02-24 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>test</title>
<style type="text/css">
#xx{width:100px; margin:100px;}
/*tipsy*/
.tipsy { padding: 5px;font-size:12px; position: absolute; z-index: 100000; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; text-align: left; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-arrow { position: absolute; background: url(http://ossweb-img.qq.com/images/bns/act/a20131205intro/tipsy.gif) no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; }
</style>
</head>
<body>
<h1 id="xx" original-title="我就是22323" >22323</h1>
<script src="http://ossweb-img.qq.com/images/js/jquery/jquery-1.7.2.min.js"></script>
<script src="./js/tipsy.js"></script>
<script>
$(function(){
    $("#xx").tipsy({gravity: s,live: true,html: true});
        });
</script>
</body>
</html>
bubuko.com,布布扣

 

bubuko.com,布布扣

ps:详细内容http://onehackoranother.com/projects/jquery/tipsy/

鼠标放在图片上,出来小tips

原文:http://www.cnblogs.com/luowen/p/3566831.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!