jquery半透明tip提示效果
发布时间：2015-12-30 编辑：jiaochengji.com
本文介绍了jquery实现的半透明tip提示效果的实例代码，感兴趣的朋友参考下。
例子，一个半透明的tooltip组件。
复制代码 代码示例:
(function($){
jquery.fn.extend({
showTip:function(settings)
{
var defaultOptions = {tipInfo:$(this).attr("title"), isAnimate:false};
var panel = '<div class="chart-panel">' +
'<div class="chart-spanBG"></div>'+
'<div class="chart-span">'+
'<div class="container">' +
'<div class="ctn"></div>' +
'</div>' +
'<div class="shadow"></div>' +
'</div>'+
'</div>';
$(this).each(function(){
//初始化配置信息,与运算
var options = jQuery.extend(defaultOptions,settings);
if(!options.tipInfo)
{
return;
}
$(this).removeAttr("title");
$(this).mouseover(function(){
//设置提示信息最小宽度为163
var oToolTip = $(panel);
$(oToolTip).find('.ctn').append(options.tipInfo);
//添加淡入效果
if(options.isAnimate)
{
$(oToolTip).fadeIn("slow");
} else{
$(oToolTip).show();
}
$(this).after(oToolTip);
//计算提示信息的top、left和width
var position = $(this).position();
var width = $(this).width();
var oTipTop = position.top;
var oTipLeft = position.left + width +5;
$(oToolTip).css("top" , oTipTop + "px").css("left" , oTipLeft + "px");
$(this).mouseout(function(){
$(oToolTip).remove();
});
});
});
return this;
}
})
})(jQuery);
jquery.fn.extend({
showTip:function(settings)
{
var defaultOptions = {tipInfo:$(this).attr("title"), isAnimate:false};
var panel = '<div class="chart-panel">' +
'<div class="chart-spanBG"></div>'+
'<div class="chart-span">'+
'<div class="container">' +
'<div class="ctn"></div>' +
'</div>' +
'<div class="shadow"></div>' +
'</div>'+
'</div>';
$(this).each(function(){
//初始化配置信息,与运算
var options = jQuery.extend(defaultOptions,settings);
if(!options.tipInfo)
{
return;
}
$(this).removeAttr("title");
$(this).mouseover(function(){
//设置提示信息最小宽度为163
var oToolTip = $(panel);
$(oToolTip).find('.ctn').append(options.tipInfo);
//添加淡入效果
if(options.isAnimate)
{
$(oToolTip).fadeIn("slow");
} else{
$(oToolTip).show();
}
$(this).after(oToolTip);
//计算提示信息的top、left和width
var position = $(this).position();
var width = $(this).width();
var oTipTop = position.top;
var oTipLeft = position.left + width +5;
$(oToolTip).css("top" , oTipTop + "px").css("left" , oTipLeft + "px");
$(this).mouseout(function(){
$(oToolTip).remove();
});
});
});
return this;
}
})
})(jQuery);
2，css代码
复制代码 代码示例:
.chart-panel {
Z-INDEX: 99999;
LEFT: 0%;
MARGIN-LEFT: 0px;
ZOOM: 1;
POSITION: absolute;
TOP: 20%;
Display: none
}
.chart-spanBG {
background-color: #FFFFCC;
POSITION: absolute;
FILTER: alpha(opacity:50);
opacity: 0.50;
width: 100%;
height: 100%
}
.chart-span {
width: auto;
height: auto;
margin: auto;
POSITION: relative
}
.chart-panel .container {
Z-INDEX: 2;
BORDER-RIGHT: #999 1px solid;
BORDER-TOP: #999 1px solid;
MARGIN: 0px;
OVERFLOW: hidden;
BORDER-LEFT: #999 1px solid;
BORDER-BOTTOM: #999 1px solid;
POSITION: relative
}
.chart-panel .shadow {
Z-INDEX: 1;
width:100%;
height:100%;
POSITION: absolute;
TOP: 0px;
LEFT: 0px
}
.chart-panel H5 {
FONT-WEIGHT: normal;
font-size:10px;
margin: 3px;
white-space:nowrap;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
.chart-panel .ctn {
BACKGROUND: Transparent;
}
Z-INDEX: 99999;
LEFT: 0%;
MARGIN-LEFT: 0px;
ZOOM: 1;
POSITION: absolute;
TOP: 20%;
Display: none
}
.chart-spanBG {
background-color: #FFFFCC;
POSITION: absolute;
FILTER: alpha(opacity:50);
opacity: 0.50;
width: 100%;
height: 100%
}
.chart-span {
width: auto;
height: auto;
margin: auto;
POSITION: relative
}
.chart-panel .container {
Z-INDEX: 2;
BORDER-RIGHT: #999 1px solid;
BORDER-TOP: #999 1px solid;
MARGIN: 0px;
OVERFLOW: hidden;
BORDER-LEFT: #999 1px solid;
BORDER-BOTTOM: #999 1px solid;
POSITION: relative
}
.chart-panel .shadow {
Z-INDEX: 1;
width:100%;
height:100%;
POSITION: absolute;
TOP: 0px;
LEFT: 0px
}
.chart-panel H5 {
FONT-WEIGHT: normal;
font-size:10px;
margin: 3px;
white-space:nowrap;
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#000000;
}
.chart-panel .ctn {
BACKGROUND: Transparent;
}
3，html代码部分
复制代码 代码示例:
<!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>
<title>无标题页</title>
<script type="text/javascript" src="../../lib/jquery/jquery-1.4.2.js">
</script>
<script type="text/javascript" src="tooltip.js">
</script>
<link type="text/css" rel="stylesheet" href="tooltip.css" />
<script type="text/javascript">
$(document).ready(function(){
//所有的Input同意添加tooltip
var content1 = {
tipInfo: "<H5>Information tips</H5><H5>This is the information,it is semitransparent</H5>"
};
var content2 = {
tipInfo: "<H5>Information tips</H5><H5>This is the information,it is semitransparent</H5>",
isAnimate: true
};
$("#URLTest").showTip(content1);
$("#m").showTip(content2);
});
</script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<input type="text" id="m"/><a href="" id="URLTest">URLTest</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<script type="text/javascript" src="../../lib/jquery/jquery-1.4.2.js">
</script>
<script type="text/javascript" src="tooltip.js">
</script>
<link type="text/css" rel="stylesheet" href="tooltip.css" />
<script type="text/javascript">
$(document).ready(function(){
//所有的Input同意添加tooltip
var content1 = {
tipInfo: "<H5>Information tips</H5><H5>This is the information,it is semitransparent</H5>"
};
var content2 = {
tipInfo: "<H5>Information tips</H5><H5>This is the information,it is semitransparent</H5>",
isAnimate: true
};
$("#URLTest").showTip(content1);
$("#m").showTip(content2);
});
</script>
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<input type="text" id="m"/><a href="" id="URLTest">URLTest</a>
</body>
</html>
效果图，如下：
您可能感兴趣的文章：
半透明效果 blur.js
jquery半透明设置实现代码
jQuery实现textarea文本框半透明文本提示效果
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
jquery 半透明遮罩效果示例
jquery半透明tip提示效果
网页特效之让css使网页图片半透明
jQuery工具提示插件 Coda Bubble
jPageFlip
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
[关闭]