`

基于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半透明抽屉式手风琴

    本项目“jQuery半透明抽屉式手风琴”是利用jQuery技术实现的一种交互式设计，它融合了半透明效果和抽屉式展开的图片切换功能，为用户提供了一种独特且吸引人的用户体验。 首先，我们来解析一下这个项目的组成部分：...

    动感的Tip提示效果，基于jquery的代码实现

    在基于jQuery实现动态Tip提示时，我们需要考虑以下几个关键知识点： 1. **jQuery选择器**：jQuery提供了丰富的选择器，如`id`选择器(`#id`)、类选择器(`.class`)、元素选择器(`tagname`)等，用于定位DOM元素。在...

    jquery 相交半透明圆形

    本教程将深入讲解如何利用jQuery实现相交的半透明圆形，以及如何创建动态的“半透明泡泡”效果。 首先，我们需要理解jQuery的基本用法。jQuery对象通常以"$"开头，例如`$(document).ready()`表示文档加载完成后执行...

    jquery半透明拖拽窗口插件

    在本案例中，"jquery半透明拖拽窗口插件"是基于jQuery实现的一个功能丰富的组件，它允许用户在网页上创建具有半透明效果的可拖动、可最大化和最小化的浮动窗口。 首先，让我们来了解这个插件的基本工作原理。浮动...

    jquery弹出半透明遮罩层

    在提供的压缩包文件"jquery弹出半透明遮罩层"中，很可能包含了一个实现上述功能的示例代码。你可以通过学习和理解这个代码，来掌握如何使用jQuery创建和控制半透明遮罩层。同时，为了适应不同的项目需求，你还可以...

    基于 jquery 的 html 贪吃蛇 简单实现

    【标题】基于jQuery的HTML贪吃蛇简单实现 在网页游戏中，贪吃蛇是一款非常经典且受欢迎的小游戏，它的核心机制是通过用户操作控制蛇移动，吃食物后蛇身增长，碰到边界或自身则游戏结束。这个项目是利用jQuery库，...

    最简单的投票模型 基于JQuery jsp实现.rar

    最简单的投票模型 基于JQuery jsp实现.rar 最简单的投票模型 基于JQuery jsp实现.rar 最简单的投票模型 基于JQuery jsp实现.rar 最简单的投票模型 基于JQuery jsp实现.rar

    jquery.tip 点击加分效果，漂亮的tip

    jQuery.tip插件则是基于jQuery构建的，它的核心功能是提供一种美观、易于定制的提示信息展示方式。在网页上，当用户点击某个元素时，tip会以弹出层的形式出现，显示相关信息。这种提示通常包含额外的上下文信息、...

    基于jQuery实现瀑布流效果

    基于jQuery实现瀑布流效果，主要涉及以下几个核心知识点： 1. **jQuery库**：jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。在实现瀑布流时，我们利用jQuery提供的API...

    jQuery半透明注册表单.zip

    在Web开发领域，创建吸引用户的界面设计是至关重要的，而jQuery半透明注册表单就是一种实现这一目标的有效方式。本文将深入探讨如何利用CSS、JavaScript（特别是jQuery库）以及HTML5来构建一个既美观又功能强大的半...

    jQuery半透明过渡切换手风琴.zip

    jQuery半透明过渡切换手风琴是一种独特且富有创意的网页交互元素，它将传统的手风琴效果与现代的半透明过渡动画相结合，为用户带来更加动态且视觉吸引人的体验。在网页设计中，手风琴效果常用于节省空间，通过折叠和...

    基于jquery实现的web版excel

    【标题】"基于jQuery实现的Web版Excel"是一种在网页端模拟Excel功能的技术，它允许用户在浏览器上创建、编辑和处理电子表格，无需安装Microsoft Excel或其他类似软件。这一技术通常依赖于JavaScript库，比如jQuery，...

    jQuery半透明抽屉式手风琴代码.zip

    【jQuery半透明抽屉式手风琴代码】是一种利用JavaScript库jQuery实现的交互式网页设计元素，它在网页中常用于构建高效的导航菜单或信息展示模块。这种效果将多个内容区块（如链接、图片或文本）以折叠的形式排列，...

    Jquery Tip 插件使用

    jQuery Tip插件是基于JavaScript库jQuery构建的，它提供了一种简单的方法来创建和管理页面上的提示信息。通过自定义样式和事件绑定，开发者可以定制出符合项目需求的各种提示效果。 ### 2. 安装与引入 首先，确保...

    基于jQuery的Ajax聊天室程序

    【基于jQuery的Ajax聊天室程序】是一个典型的Web交互应用，它利用了Ajax技术来实现实时的、无需页面刷新的用户交流。Ajax（Asynchronous JavaScript and XML）是一种在不重新加载整个网页的情况下，能够更新部分网页...

    jQuery原生半透明导航下拉效果

    在本文中，我们将深入探讨如何使用jQuery实现一个具有半透明特性的原生导航下拉效果。这个效果在现代网页设计中非常流行，因为它为用户提供了一种直观且吸引人的交互方式。我们将从基础概念开始，逐步讲解如何配置...

    基于jQuery的HTML5移动端音乐播放器源码.zip

    基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器源码 基于jQuery的HTML5移动端音乐播放器...

    基于jquery实现的多选下拉框

    **基于jQuery实现的多选下拉框** 在Web开发中，传统的HTML下拉框（`&lt;select&gt;`元素）通常只支持单选，但有时我们可能需要一个可多选的下拉框来提供用户更多的选择灵活性。这篇教程将详细介绍如何利用jQuery库来创建...

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