`
luckyjaky
  • 浏览: 111853 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

锋利的JQuery实例-超链接提示效果

jQueryCSSJavaScriptXHTMLHTML 
阅读更多 
<!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=utf-8" />
<title>文字提示</title>
 <!--   引入jQuery -->
 <script src="Scripts/jquery-1.4.1.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" })
        });
    });
//]]>
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a></p>
</body>
</html>

 

分享到：
| 锋利的JQuery学习笔记-认识JQuery
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics