`

基于jquery的半透明tip的实现

 
阅读更多

趁工作之余，做了一个半透明的tooltip组件，show一下

 

(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);

 

.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; 
}

 

<!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>

 

效果



 

  • 大小: 3.6 KB
分享到：
| 类之间的关系
评论
发表评论

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

相关推荐

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款jquery实现表单输入提示的Autobox插件(基于jquery.ui) 29.一款美化表单下拉列表、复选框等的jquery combobox插件实例 30.站长必备jquery实现combox自动筛选,高亮显示功能 4)菜单 1.jquery+CSS超炫丽横向...

    jQuery实现文章二维码扫码打赏功能特效源码.zip

    // 鼠标悬停时，二维码半透明 $('#donate-tip').fadeIn(200); // 显示打赏提示 }, function() { $(this).fadeTo(200, 1); // 鼠标离开时，恢复原状 $('#donate-tip').fadeOut(200); } ); ``` 4. **响应式...

    jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答

    4. **不显示隔离层**：将`opacity`设置为0即可不显示对话框背后的半透明隔离层。 5. **自动关闭功能**：通过设置`timeout`参数，可以实现对话框在指定时间后自动关闭。 6. **防止重复窗口**：通过传递一个`id`参数值...

    jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)

    3. `#tip .t_box` 是提示框的内部容器，具有半透明背景（通过 `filter:alpha(opacity=50)` 和 `-moz-opacity:0.5` 实现）和边框，以提供阴影效果。 4. `#tip .t_box div` 包含了图片，设置了内边距和背景色，以突出...

    Jquery特效大全

    它允许在页面上显示带有半透明遮罩层的弹窗，通常用于显示重要的通知或警告信息。 **2.2 Simple Modal** Simple Modal 是另一个简单的 jQuery 模态对话框插件。它提供了基本的弹出框功能，并且可以很容易地集成到...

    微信打开网址添加在浏览器中打开提示的办法

    这段CSS代码定义了一个全屏的黑色半透明遮罩层（`.weixin-tip`），其中包含一个提示文本或图片（`.weixin-tip p`）。默认情况下，遮罩层是隐藏的（`display: none`），当检测到用户在微信中打开页面时才会显示。 接...

    HTML实现遮罩层的方法 HTML中如何使用遮罩层

    HTML中的遮罩层是一种常见的网页设计技术，用于创建一种半透明或者全透明的覆盖层，以达到阻止用户与页面其他部分交互的效果。这通常用于加载提示、弹出窗口或者进行页面更新时，防止用户进行不必要的操作。在本例中...

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