使用CSS+JavaScript生成Tips(Bubble)

最新推荐文章于 2023-09-18 13:37:42 发布

treeMountain

最新推荐文章于 2023-09-18 13:37:42 发布

阅读量671

点赞数

分类专栏： JavaScript CSS

JavaScript 同时被 2 个专栏收录

31 篇文章

订阅专栏

CSS

14 篇文章

订阅专栏

本文介绍两种使用JavaScript和CSS实现的提示框效果。一种通过自定义JavaScript类在鼠标悬停时显示提示信息；另一种利用jQuery插件实现复选框旁的气泡提示，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

CSS样式表：Toolbar.css

body{font:12px/1.8 arial;} 
a,a:visited{color:#3366cc;text-decoration:none;} 
a:hover{color:#f60;text-decoration:underline;} 
.tip{width:200px;border:2px solid #ddd;padding:8px;background:#f1f1f1;color:#666;} 
img{border:none;}

JavaScript类： Toolbar.js

var tip = { $: function (ele) {
    if (typeof (ele) == "object")
        return ele;
    else if (typeof (ele) == "string" || typeof (ele) == "number")
        return document.getElementById(ele.toString());
    return null;
},
    mousePos: function (e) {
        var x, y;
        var e = e || window.event;
        return { x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
            y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
        };
    },
    start: function (obj) {
        var self = this;
        var t = self.$("mjs:tip");
        obj.onmousemove = function (e) {
            var mouse = self.mousePos(e);
            t.style.left = mouse.x + 10 + 'px';
            t.style.top = mouse.y + 10 + 'px';
            t.innerHTML = obj.getAttribute("tips");
            t.style.display = '';
        };
        obj.onmouseout = function () {
            t.style.display = 'none';
        };
    }
}

前台调用：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JSLibraryDemo.aspx.cs" Inherits="JSLibraryDemo" %>

<!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 runat="server">
    <title>JS类库测试</title>    
    <script type="text/javascript" src="JSLibrary/Toolbar.js"></script>   
    <link type="text/css" rel="Stylesheet" href="css/Toolbar.css" />
</head>
<body>
    <form id="form1" runat="server">
        <ol> 
         <li> 
         <a href="#" target="_blank"><img src="q8.png" onmouseover="tip.start(this)" tips="项目中用到的一个简单的JS图片展示效果，支持大图小图原始图展示" /></a>
         </li> 
         <li> 
         <a href="#" target="_blank" onmouseover="tip.start(this)" tips="11月16日，我有幸参加了11月份的UCD杭州书友会，写了点感受与大家分享……">关于用户研究的一点思考</a> 
         </li> 
         <li> 
         <a href="#" target="_blank" onmouseover="tip.start(this)" tips="早上挤城铁，挤得要命，来了个猛男，大吼一声“我是display:block”的，这一行老子独占了……">WEB重构拾趣</a> 
         </li> 
         </ol> 
         <div id="mjs:tip" class="tip" style="position:absolute;left:0;top:0;display:none;"></div>  
    </form>
</body>
</html>

二、鼠标移到控件上弹出Bubble，本案例是checkbox弹出bubble，也可以用其它控件弹出bubble。采用了Jquery+JavaScript+CSS技术。弹出bubble美观，但唯一缺陷是只能在控件上方弹出。

效果图：

前台调用代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TipDemo.aspx.cs" Inherits="TipDemo" %>

<!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 runat="server">
    <title></title>      
    <link rel="Stylesheet" type="text/css" href="css/Tip.css" />
    <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.careyTip.js"></script>    
    <style type="text/css">
     #process{list-style-type:none;}
     #process li{float:left;width:250px; margin-right:5px;}
     #process li:hover{background-color:#66a9d1;}
    </style>
    <script type="text/javascript">
        $(function () {
            $("#biyi").parent().careyTip("做出刀模用啤机啤成各种形状，增加产品的观赏性");
            $("#dianmianguang").parent().careyTip("在印刷品的表面覆盖了一层光亮的保护膜，是产品看起来光亮高档，使产品不易褪色，可防水防潮");
            $("#shuangmian").parent().careyTip("在印刷品的表面覆盖了一层光亮的保护膜，是产品看起来光亮高档，使产品不易褪色，可防水防潮");
            $("#shuangmianya").parent().careyTip("在印刷品表面覆盖了一层比较雾的保护膜，是相对光胶而言的，使产品看起来高档有质感，如果需要局部UV的就必须过哑胶");
            $("#danmianya").parent().careyTip("在印刷品表面覆盖了一层比较雾的保护膜，是相对光胶而言的，使产品看起来高档有质感，如果需要局部UV的就必须过哑胶");
            $("#zhenkong").parent().careyTip("适用于表格、单页、联单、票据、优惠券之类的，便于撕开");
            $("#haoma").parent().careyTip("用于各类优惠券，联单等，每张的号码都不同，便于区分管理");         
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin-top:200px;">
        <ul id="process">           
            <li><input id="biyi" type="checkbox" value="biyi" name="houxu" /><label for="biyi">啤异型</label></li>        
            <li><input id="dianmianguang" type="checkbox" value="danmianguang" name="houxu" /><label for="dianmianguang">单面光胶</label></li>
            <li><input id="shuangmian" type="checkbox" value="shuangmian" name="houxu" /><label for="shuangmian">双面光胶</label></li>
            <li><input id="danmianya" type="checkbox" value="danmianya" name="houxu" /><label for="danmianya">单面哑胶</label></li>
            <li><input id="shuangmianya" type="checkbox" value="shuangmianya" name="houxu" /><label for="shuangmianya">双面哑胶</label></li>     
            <li><input id="zhenkong" type="checkbox" value="zhenkong" name="houxu" /><label for="zhenkong">打针孔</label></li>
            <li><input id="haoma" type="checkbox" value="haoma" name="houxu" /><label for="haoma">打号码</label></li>    
            <li><input id="zheye" type="checkbox" value="zheye" name="houxu" /><label for="zheye">折页</label></li>            
        </ul>
    </div>
    </form>
</body>
</html>

本案例下载：http://download.youkuaiyun.com/detail/lovegonghui/9247723