Welcome, Old Sport!

创建一个简单、多兼容性的提示框CSS & jQuery

by ilikecss ON 2010/09/29 8055

之前在我的文章里已经制作过几款不错的提示框,但有博友反应在 IE6 下无法正常运行,主要是图片都是 png 格式,多用 CSS3 写的样式,CSS3 普遍是趋势,但为了大众考虑我还是推荐一款多兼容性的实例。
CSS 的提示框是非常流行的网页设计,特别是与一些非常主流的 Javascript 框架结合。
在这个范例里我们只需要用到很少的 HTML 代码和 CSS 样式,以及 jQuery 就能实现漂亮实用的功能。
本教程将教你如何创建一些基本 CSS 和 jQuery 提示框。
tooltips

Step1. 创建HTML

<p><a href="" class="tip">This is a link1</a></p>
<div id="sunflowamedia0" class="tooltip"><p>This is a small tooltip with the Classname 'Sunflowamedia1'</p></div>

Step2. 创建CSS

.examples_body p {
margin-bottom: 10px;
clear: both;
}
.examples_body p a {
width: 150px;
font-size: 1.5em;
color: #DDD;
border: 2px solid #DDD;
padding: 5px 0;
display: block;
text-align: center;
}
.tooltip {
width:250px;
position: absolute;
z-index: 999;
left: -9999px;
background-color: #dedede;
padding: 5px;
border: 1px solid #fff;
}
.tooltip p {
color: #fff;
background-color: #222;
padding: 7px 7px;
margin: 0;
}

Step3. 插入jQuery和脚本包

function simple_tooltip(target_items, name){
 $(target_items).each(function(i){
		$("body").append("<div class='" name "' id='" name i "'><p>" $(this).attr('title') "</p></div>");
		var my_tooltip = $("#" name i); // #是你div里id的名字,如果你需要添加多个框,那就给id编号,从0开始

		$(this).removeAttr("title").mouseover(function(){
				my_tooltip.css({opacity:0.8, display:"none"}).fadeIn(400); //渐变深度
		}).mousemove(function(kmouse){
				my_tooltip.css({left:kmouse.pageX 15, top:kmouse.pageY 15});
		}).mouseout(function(){
				my_tooltip.fadeOut(400);
		});
	});
}
$(document).ready(function(){
	 simple_tooltip("a.tip","sunflowamedia"); // a标签里要设Class名,不然你整个页面的a都会带有这个效果,后面id要保持和前面#号里一致。
});
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
6条评论
  1. #1

    majw说道:

    建议楼主以后在每个这类帖子里放出下载,不然一段一段代码复制自己整合太麻烦了。

    • OK,我会提供一个下载Demo的地方,这样的方式也会保留,大家可以自由选择。

  2. #2

    May28说道:

    楼主这个和魔兽世界英雄榜以及NGACN里的提示框一样吗?
    如何才能做到像英雄榜那样的效果呢?

    • 你好,你能给我个你说的效果的链接吗,我去看看。

      • May28说道:

        类似http://cn.wowarmory.com/character-sheet.xml?r=%E5%86%AC%E6%B3%89%E8%B0%B7&n=%E4%B8%8A%E6%B5%B7%E7%A5%9E%E8%AF%9D 这样的页面,上面的图标在鼠标悬停后的效果,以及一些文字连接鼠标悬停效果。
        他大概也是CSS+jQuery,但不知道具体的应用方法。。。。
        您能帮分析一下吗?

        • 你好,这个效果和我这个教程是差不多的,他鼠标悬停后显示的只是一张图片,但图片是后台数据库读取玩家数据的资料。你只要把我这个效果里悬停的内容自己换张图片就一样的效果了。




TOP