jquery提示气泡

<link href="css/manhua_hoverTips.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="http://www.jq-school.com/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="js/manhua_hoverTips.js"></script>

<script type="text/javascript">

 $(function () {

            $("p").manhua_hoverTips(); //使用默认参数，所以不用调用最简洁(下面显示)

            $("#btn").manhua_hoverTips({ position: "l" }); //改变了显示的位置参数（右边显示）

            $("#tr").manhua_hoverTips({ position: "r" }); //改变了显示的位置参数（左边显示）

            $("#tb").manhua_hoverTips({ position: "b" }); //改变了显示的位置参数（下面显示）

        });

</script>

<body>

    <center>

        <form id="form1" runat="server">

        <div>

            <p tips="哈哈 是我。。。。。">afdsafdsfasd</p>

            <input id="btn" type="button" tips="我怎么了，怎么会？？？" value="button" />

            <br />

            <select id="tr" tips="是我。。。。。"><option></option>

            </select>

            <br />

            <input id="tb" tips="你要说什么......." type="radio" />

        </div>

        </form>

    </center>

</body>

body {

    background: #f7f7f7;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

}

.docBubble {position:absolute;max-width:240px; text-align:left;text-align:left;z-index:; display:none;}

.docBubble a{ margin-left:;}

.docBubble .icon{ background:none;}

.docBubble .title a {text-decoration: none;}

.docBubble .tl,.docBubble .tr,.docBubble .bl,.docBubble .inner,.docBubble .triangle-t,.docBubble .triangle-b,.docBubble .close{ background-image:url(../images/manhua_bubbletips.png);_background-image:url(../images/manhua_bubbletips_ie6.png); }

.docBubble .tl{ float:left; background-position:-20px ; }

.docBubble .tr{ position:absolute;right:-12px; top:;width:12px; height:12px; background-position:% ; }

.docBubble .bl{ position:absolute;left:; bottom:-12px;  width:12px; height:12px; background-position:-20px %; }

.docBubble .inner{ position: relative;left:12px; width:220px;  margin:12px  -12px ; max-width:220px; background-position:% %; padding: 12px 12px 2px; _padding-bottom:12px; }

.docBubble .triangle-t{ position:absolute; z-index:; top:-7px; width:15px; height:8px; overflow:hidden; }

.docBubble .triangle-b{ position:absolute; bottom:-18px; z-index:;  width:15px; height:11px; overflow:hidden; background-position: -10px; }

.docBubble .triangle-l{ position:absolute; left:-10px; z-index:; top:15px;  width:15px; height:18px; overflow:hidden; background:url(../images/manhua_bubbletips_l.png) no-repeat;_background-image:url(../images/manhua_bubbletips_l_ie6.png) no-repeat;  }

.docBubble .triangle-r{ position:absolute; right:-19px; z-index:; top:15px;  width:15px; height:18px; overflow:hidden; background:url(../images/manhua_bubbletips_r.png) no-repeat;_background-image:url(../images/manhua_bubbletips_r_ie6.png) no-repeat;  }

.docBubble .triangle-t,.docBubble .triangle-b{ right:20px;}

.docBubble .close{ position:absolute; z-index:; top:10px; right:2px; width:9px; height:9px; text-indent:-99em; overflow:hidden; background-position: -25px; cursor:pointer;}

.docBubble .inner .icon{ float:left; padding: 2px ;}

.docBubble .inner .icon img{ margin-right:10px; }

.docBubble .inner .cont{ overflow:hidden; zoom:; line-height:20px;}

.docBubble .inner .title{ margin:  2px ; font-size:12px;font-weight:bold;}

.docBubble .inner .lk-btn{ text-align:right;}

css(manhua_hoverTips.css)

/***

 * 漫画原创鼠标悬浮气泡提示Jquery插件

 * 编写时间：2012年11月14号

 * version:manhua_hoverTips.js

***/

$(function() {

    $.fn.manhua_hoverTips = function(options) {

        var defaults = {

            position : "t",            //箭头指向上(t)、箭头指向下(b)、箭头指向左(l)、箭头指向右(r)

            value :                 //小箭头偏离左边和上边的位置            

        };

        var options = $.extend(defaults,options);    

        var bid = parseInt(Math.random()*);

        var $this = $(this);

        $("body").prepend('<div class="docBubble" id="btip'+bid+'"><i class="triangle-'+options.position+'"></i><div class="tl"><div class="inner"><div class="cont"></div></div></div><div class="tr"></div><div class="bl"></div></div>');

        var $btip = $("#btip"+bid);

        var $btipClose = $("#btipc"+bid);

        var offset,h ,w ;

        var timer;

        $this.die().live("mousemove",function(){

            clearInterval(timer);

            offset = $(this).offset();

            h = $(this).height();

            w = $(this).width();

            $(".cont").html($(this).attr("tips"));

            switch(options.position){

                case "t" ://当它是上面的时候

                    $(".triangle-t").css('left',options.value);

                    $btip.css({ "left":offset.left  ,  "top":offset.top+h+  }).show();

                    break;

                case "b" ://当它是下面的时候

                    $(".triangle-b").css('left',options.value);

                    $btip.css({ "left":offset.left ,  "top":offset.top-h--$btip.height()  }).show();

                    break;

                case "l" ://当它是左边的时候

                    $(".triangle-l").css('top',options.value);

                    $btip.css({ "left":offset.left+w+  ,  "top":offset.top+h/--options.value }).show();

                    break;

                case "r" ://当它是右边的时候

                    $(".triangle-r").css('top',options.value);

                    $btip.css({ "left":offset.left--$btip.width()  ,  "top":offset.top+h/--options.value }).show();

                    break;

            }

        });

        $this.live("mouseout",function(){

            timer = setInterval(function (){

                 $btip.hide();

            }, );

        });

        $btip.live("mousemove",function(){

            clearInterval(window.timer);

            $btip.show();

        });

        $btip.live("mouseout",function(){

            $btip.hide();

        });

        $btipClose.live("click",function(e){

          $btip.hide();

        });

    }

});

manhua_hoverTips.js

jquery提示气泡的更多相关文章

jquery $提示缺少对象$提示缺少对象
jquery $提示缺少对象项目中存在不同版本的jquery,有1.4也有1.2, 之前运行项目不会报错 " $提示缺少对象 ",但是我的IE9重置之后就报错,从网上找了一大堆, ...
jQuery提示组件toastr（取代alert）
给大家推荐一款jquery提示插件:toastr 它是一个可以取代alert的提示信息框,它在PC,移动设备上都有不错的UI效果. 具体使用方法如下: 1.首先在网页头站调用他需要的js和css文件. ...
jquery提示sucess
这是学习笔记. 今天做东西的时候,想把体验做好,于是打算再ajax success字段中添加函数实现提示sucess. 用了jquery的fadeIn 跟fadeOut,再fadeIn的callbac ...
jquery 提示语淡入效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
idea开启jquery提示及如何找到学习目标
idea开启jquery提示根据这些library就知道该学习哪些技术了
Eclipse通过Spket增加JQuery提示的方法
Eclipse通过Spket增加JQuery提示的方法 1.增加在线更新源:Help->Install New Software...->Add...->Name: "Sp ...
Android 红色小圆球提示气泡 BadgeView
今天给大家分享两个实用有简单的一个小圆球提示气泡: BadgeView 参考地址: https://github.com/qstumn/BadgeView; 个人地址:http://git ...
jquery提示消息，简单通用
jquery提示消息.简单通用 function showTips(txt,time,status) { var htmlCon = ''; if(txt != ''){ if(status != 0 ...
DSAPI多功能组件编程应用-DS提示气泡
首先下载DSAPI.dll.并在项目中引用. 该功能包括在DSAPI1.0.1.1及更高版本号,DLL请到本人资源里查找. Private Sub Button1_Click(sender As Ob ...

随机推荐

javascript获取ckeditor编辑器的值(实现代码)
CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.instan ...
jQuery基础与实例
一.简介 1.什么是jQuery jQuery是一个轻量级.快速简洁的javaScript库,能让我们方便快捷的选择元素操作元素属性. 2.下载地址 3.jQuery使用方式 $("div& ...
Android开发中Eclipse里的智能提示设置
今天开始学习一下Android开发,直接在Android Developers下载的一个开发工具包,然后再下了一个JDK,配置完环境变量等一系列的工作后环境就搭建好了,在新建好第一个Android项目 ...
[翻译]15个最常见的WCF面试问题
WCF和ASMX WebService的区别是什么? 最基本的区别在于,ASMX或者ASP.NET WebService是用来通过基于HTTP的SOAP来实现通讯.但WCF可以使用任意协议(HTTP, ...
C语言获取网页源代码的学习所得
研究了一天这个玩意感觉挺有意思的. 刚开始是什么都不懂,现在写出来一段代码感觉略微有点意思了. 下面我分享一下学习过程和自己的理解. 整体过程大概就是如下情况: 先搜了一下别人的写这个东西的代码. 研 ...
EXPLAIN PLAN获取SQL语句执行计划
一.获取SQL语句执行计划的方式 1. 使用explain plan 将执行计划加载到表plan_table,然后查询该表来获取预估的执行计划 2. 启用执行计划跟踪功能,即autotrace功能 3 ...
【BZOJ2199】 [Usaco2011 Jan]奶牛议会
Description 由于对Farmer John的领导感到极其不悦,奶牛们退出了农场,组建了奶牛议会.议会以“每头牛都可以获得自己想要的”为原则,建立了下面的投票系统: M只到场的奶牛 (1 & ...
Ubuntu 设置root用户登录
由于 Ubuntu 是基于 Debian 的 linux 操作系统,在默认的情况下,是没有超级用户(superuser, root)的,但有些系统操作必须有超级用户的权限才能进行,如手动释放内存等. ...
（转）关于linux中内核编程中结构体的赋值操作（结构体指定初始化）
网址:http://blog.chinaunix.net/uid-24807808-id-3219820.html 在看linux源码的时候,经常会看到类似于下面的结构体赋值的代码: struct d ...
CSS定义字体间距字体行与行间距
CSS定义字体行间距 line-height:xxpx; CSS定义字体间距下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性属性含义属性值 Word-s ...

jquery提示气泡

jquery提示气泡的更多相关文章

随机推荐

热门专题