以下是 jquery带提示框tag云效果js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery带提示框tag云效果</title>
<link href="css.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.js"></script>
<script type="text/javascript" src="hovertip.js"></script>
<script type="text/javascript">
// initialize tooltips in a seperate thread
$(document).ready(function() {
window.setTimeout(hovertipInit, 1);
});
</script>
</head>
<body>
<div id="cloud">
<ul class="nav">
<li>
<a class="size1" href="#" id="j1">adobe</a>
<ul style="display: block;" class="hovertip" target="j1">
<li><a class="size-sub1" href="#">Photoshop</a></li>
<li><a class="size-sub2" href="#">Illustrator</a></li>
<li><a class="size-sub3" href="#">Dreamweaver</a></li>
<li><a class="size-sub4" href="#">Fireworks</a></li>
</ul>
</li>
<li>
<a class="size2" href="#" id="j2">Showcases</a></li>
<li>
<a class="size3" href="#" id="j3">Arts</a>
<ul style="display: block;" class="hovertip" target="j3" >
<li><a class="size-sub1" href="#">Arts1</a></li>
<li><a class="size-sub2" href="#">Arts2</a></li>
<li><a class="size-sub3" href="#">Arts3</a></li>
<li><a class="size-sub4" href="#">Arts4</a></li>
<li><a class="size-sub2" href="#">Arts5</a></li>
</ul>
</li>
<li>
<a class="size4" href="#" id="j4">Better Design</a>
<ul style="display: block;" class="hovertip" target="j4" >
<li><a class="size-sub1" href="#">Design1</a></li>
<li><a class="size-sub2" href="#">Design2</a></li>
<li><a class="size-sub3" href="#">Design3</a></li>
<li><a class="size-sub4" href="#">Design4</a></li>
</ul>
</li>
<li><a class="size5" href="#">Blogging</a></li>
<li><a class="size1" href="#" id="j5">Ajax</a>
<ul style="display: block;" class="hovertip" target="j5" >
<li><a class="size-sub1" href="#">Jquery</a></li>
<li><a class="size-sub2" href="#">Script.aculo.us</a></li>
<li><a class="size-sub3" href="#">Mootools</a></li>
<li><a class="size-sub4" href="#">Dojo</a></li>
<li><a class="size-sub2" href="#">Prototype</a></li>
</ul>
</li>
<li><a class="size6" href="#">Books</a></li>
<li>
<a class="size1" href="#" id="j6">Javascript</a>
<ul style="display: block;" class="hovertip" target="j6" >
<li><a class="size-sub1" href="#">Javascript1</a></li>
<li><a class="size-sub2" href="#">Javascript2</a></li>
<li><a class="size-sub3" href="#">Javascript3</a></li>
<li><a class="size-sub4" href="#">Javascript4</a></li>
</ul>
</li>
<li><a class="size2" href="#">Arts</a></li>
<li><a class="size4" href="#">Freelance</a></li>
<li>
<a class="size3" href="#" id="j7">Animation</a>
<ul style="display: block;" class="hovertip" target="j7" >
<li><a class="size-sub1" href="#">Animation1</a></li>
<li><a class="size-sub2" href="#">Animation2</a></li>
<li><a class="size-sub3" href="#">Animation3</a></li>
<li><a class="size-sub4" href="#">Animation4</a></li>
</ul>
</li>
<li><a class="size6" href="#">Tutorials</a></li>
<li><a class="size5" href="#">Cool Links</a></li><br />
</ul>
</div>
</body>
</html>
CSS代码(css.css):
body{font-family:Georgia,Times,Serif;background:#2C2421;margin:50px;color:#FFFFFF}
/* classes for tooltips */
a{color:#FFCC00;}
.hovertip{position:absolute;display:none;/* in case javascript is disabled */
width:270px;height:350px;background:url('sub-bg.png') no-repeat;font-size:12px;z-index:100;margin-left:5px;margin-top:10px;}
.hovertip_target{font-style:italic;}
.hovertip_target:hover{text-decoration:none;cursor:help;}
.nav,.nav *{margin:0;padding:0;}
#cloud{float:left;position:absolute;line-height:1.0;background:url('bg.gif') no-repeat;width:380px;height:333px;padding:80px 40px 40px 40px;}
.nav{float:left;position:absolute;line-height:1.0;width:310px;height:333px;padding:0px;}
.nav ul{width:160px;list-style:none;background:#fff;/*IE6 needs this*/
}
.nav li{float:left;list-style:none;position:relative;}
.nav a{color:#fff;text-decoration:none;display:block;}
.nav li ul{left:0;top:-999em;width:180px;padding-top:50px;height:190px;background:url('sub-bg.png') no-repeat;position:absolute;list-style:none;z-index:100;text-align:center;}
ul.hovertip li{display:inline;list-style:none;}
ul.hovertip li a{text-decoration:none;font-style:italic}
ul.hovertip{width:200px;padding-top:30px;padding-left:10px;height:95px;padding-bottom:20px;display:block}
a.size1{font-size:25px;padding:10px;color:#804D40;}
a.size1:hover{color:#E13728;}
a.size2{padding:7px;font-size:20px;color:#B9251A;}
a.size2:hover{color:#E13728;}
a.size3{padding:5px;font-size:35px;color:#C4876A;}
a.size3:hover{color:#E13728;}
a.size4{padding:5px;font-size:15px;color:#B46A47;}
a.size4:hover{color:#E13728;}
a.size5{padding:5px;font-size:25px;color:#E13728;}
a.size5:hover{color:#B46A47;}
a.size6{padding:0px;font-size:12px;color:#77625E}
a.size6:hover{color:#E13728;}
a.size-sub1{padding:20px;font-size:12px;color:#804D40;}
a.size-sub1:hover{color:#fff;}
a.size-sub2{padding:25px;font-size:20px;color:#E13728;}
a.size-sub2:hover{color:#fff;}
a.size-sub3{padding:10px;font-size:18px;color:#804D40;}
a.size-sub3:hover{color:#fff;}
a.size-sub4{padding:15px;font-size:25px;color:#fff;}
a.size-sub4:hover{color:#E13728;}
分享到QQ
分享到微博
微信扫一扫
