代码改变世界

实现tip浮层

2014-04-07 15:48  大额_skylar  阅读(365)  评论(0)  编辑  收藏  举报

 

 

 

 

实现简单的tip浮层：

 

html代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>demo标题</title>
    <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js" charset="utf-8"></script>
        <link rel="stylesheet" href="http://a.tbcdn.cn/s/kissy/1.3.0/css/dpl/base.css" />
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="tip.css" />
        <style>
                p {
                        margin-left:20px;
                }
                li {
                          display: block;
                          width: 200px;
                          height: 200px;
                          background: grey;
                          border: 2px solid white;
                        }
        </style>
</head>
<body>
<h2>基本模式</h2>



<ul class="base-style">
        <li id="tip1">test1</li>
        <li id="tip2">test2</li>
        <li id="tip3">test3</li>
        <li id="tip4"></li>
        <li id="tip5"></li>
        <li id="tip6"></li>
        <li id="tip7"></li>
        <li id="tip8"></li>
        <li id="tip9"></li>
        <li id="tip10"></li>
        <li id="tip11"></li>
        <li id="tip12"></li>
</ul>



<script>
    var S = KISSY;
    if (S.Config.debug) {
        var srcPath = "../../../";
        S.config({
            packages:[
                {
                    name:"gallery",
                    path:srcPath,
                    charset:"utf-8",
                    ignorePackageNameInUri:true
                }
            ]
        });
    }

    S.use('gallery/tip/1.0/index', function (S, Tip) {
                var init = function(){

                        new Tip('#tip1',{
                                headerText:'跟随鼠标定位',
                                contentText:'鼠标定位点为左下角，默认mouseHook:true',
                                delayIn:100,
                                fleeting:false,
                                closeable:true
                        });

                        new Tip('#tip2',{
                                headerText:'相对定位',
                                contentText:'points:["tl","br"],mouseHook:false',
                                points:['tl','br'],
                                mouseHook:false,
                                delayIn:100
                        });

                        new Tip('#tip3',{
                                headerText:'相对定位',
                                contentText:'不需要箭头,points:["tr","bl"],arrow:false',
                                points:['tr','bl'],
                                mouseHook:false,
                                arrow:false,
                                delayIn:100
                        });

                        new Tip('#tip4',{
                                headerText:'相对定位',
                                contentText:'带箭头,points:["tr","bl"],arrow:true',
                                points:['tl','bl'],
                                offsetX:-15,
                                mouseHook:false,
                                delayIn:100
                        });

                        new Tip('#tip5',{
                                headerText:'相对定位',
                                contentText:'points:["lb","tr"],arrow:false',
                                points:['lb','tr'],
                                mouseHook:false,
                                arrow:false,
                                delayIn:100
                        });

                        new Tip('#tip6',{
                                headerText:'定位到很远',
                                contentText:'points:["lb","tr"],offsetX:-123',
                                points:['lb','tr'],
                                mouseHook:false,
                                offsetX:-132,
                                arrow:false,
                                delayIn:100
                        });

                        new Tip('#tip7',{
                                headerText:'鼠标跟随定位',
                                contentText:'跟随鼠标移动而移动 withMouseMove:true',
                                withMouseMove:true,
                                arrow:false,
                                delayIn:100
                        });

                        new Tip('#tip8',{
                                contentText:'没有标题,headerText:""',
                                arrow:false,
                                delayIn:100
                        });

                        new Tip('#tip9',{
                                headerText:'没有正文,contentText:""',
                                contentText:'',
                                arrow:false,
                                delayIn:100
                        });

                        new Tip('#tip10',{
                                headerText:'定义offsetX和offsetY',
                                contentText:'points:["lb","tr"],offsetX:-20,offsetY:-100',
                                mouseHook:false,
                                offsetX:-30,
                                offsetY:-100,
                                points:['lb','tr'],
                                arrow:false,
                                delayIn:100
                        });

                        new Tip('#tip11',{
                                headerText:'鼠标跟随的offsetX和offsetY',
                                contentText:'withMouseMove:true,offsetX:-20,offsetY:-100',
                                withMouseMove:true,
                                offsetX:-30,
                                offsetY:-100,
                                arrow:false,
                                delayIn:100
                        });

                        new Tip('#tip12',{
                                headerText:'带箭头的offsetX和offsetY',
                                contentText:'arrow:true,points:["lb","tr"],offsetX:-120,offsetY:-30',
                                withMouseMove:true,
                                mouseHook:false,
                                arrow:true,
                                offsetX:-128,
                                offsetY:-30,
                                points:['tc','bc'],
                                delayIn:100,
                                smarty:false
                        });

                        new Tip('#simpletip');

                        new Tip('#t1',{
                                contentText:'鼠标可以移入Tip',
                                fleeting:false,
                                delayIn:100
                        });

                        new Tip('#t2',{
                                contentText:'鼠标不可以移入Tip',
                                delayIn:100
                        });

                       

                };

                S.ready(function(){
                        init(); 
                });
        // var tip = new Tip("#tip");
    })
</script>
</body>
</html>

 

 

style.css:

 

.base-style {
    width:160px;height:52px;
}
.base-style li {
    display:block;
    float:left;width:50px;height:50px;border:1px solid #ccc;margin-left:6px;margin-top:6px;
    cursor:pointer;
}

.custom-tip-style {
    width:300px;border:5px solid #116497;
    padding:0px;
    border-radius:4px;
}

.custom-tip-style .hd {
    background-color: #0D7CD0;
    color:white;
    font-size:11px;
    padding:4px;
}

.custom-tip-style .z-close {
    position:absolute;
    width:18px;height:14px;
    cursor:pointer;
    font:bold 10px/13px Tahoma,sans-serif;
    text-align:center;
    border:0px solid #aaa;
    background:#116497;
    color:white;
    text-indent:0;
    border-radius:3px;
    vertical-align:middle;
    text-decoration:none;
    display:block;
    top:4px;right:4px;
    display:none;
}

.custom-tip-style .bd{
    padding:5px;
    line-height:150%;
    background:#1E90FF;
    color:white;
    font-size:11px;
}

tip.css:

 

.z-tip {
        border-radius:4px;
        box-shadow:0px 0px 8px 1px #bbb;
        background:white;
        border:1px solid #cfcfcf;
        padding:8px;
        position:absolute;

        /*test*/
        left:100px;
        margin-top:20px;
    }
    .z-tip {
        max-width:350px;
        min-width:120px;
        /*
        *width:expression((this.width > 350) ? "350px" : this.width + "px" );
        */
    }
    .z-tip .z-taper {
        background:url('http://img03.taobaocdn.com/tps/i3/T1bEXSFXtgXXaSQP_X-16-16.png') no-repeat transparent;
        display:block;
        overflow:hidden;
        position:absolute;
    }
    .z-tip .z-close {
        position:absolute;
        width:18px;height:14px;
        cursor:pointer;
        font:bold 10px/13px Tahoma,sans-serif;
        text-align:center;
        border:1px solid #aaa;
        color:#777;
        text-indent:0;
        border-radius:3px;
        vertical-align:middle;
        text-decoration:none;
        display:block;
        top:4px;right:4px;
        display:none;

    }
    .tl .z-taper{
        background-position:0px 0px;
        width:16px;height:8px;
        top:-8px;
        left:15px;
    }

    .tc .z-taper{
        background-position:0px 0px;
        width:16px;height:8px;
        top:-8px;
        left:50%;
        margin-left:-8px;
    }

    .tr .z-taper{
        background-position:0px 0px;
        width:16px;height:8px;
        top:-8px;
        right:15px;
    }

    .br .z-taper{
        background-position:0px -8px;
        width:16px;height:8px;
        bottom:-8px;
        right:15px;
    }

    .bl .z-taper{
        background-position:0px -8px;
        width:16px;height:8px;
        bottom:-8px;
        left:15px;
    }

    .bc .z-taper{
        background-position:0px -8px;
        width:16px;height:8px;
        bottom:-8px;
        left:50%;
        margin-left:-8px;
    }

    .rt .z-taper{
        background-position:-8px 0px;
        width:8px;height:16px;
        right:-8px;
        top:15px;
    }

    .rb .z-taper{
        background-position:-8px 0px;
        width:8px;height:16px;
        right:-8px;
        bottom:15px;
    }

    .rc .z-taper{
        background-position:-8px 0px;
        width:8px;height:16px;
        right:-8px;
        top:50%;
        margin-top:-8px;
    }


    .lt .z-taper{
        background-position:0px 0px;
        width:8px;height:16px;
        left:-8px;
        top:15px;
    }

    .lb .z-taper{
        background-position:0px 0px;
        width:8px;height:16px;
        left:-8px;
        bottom:15px;
    }

    .lc .z-taper{
        background-position:0px 0px;
        width:8px;height:16px;
        left:-8px;
        top:50%;
        margin-top:-8px;
    }

 

在网上看了个写的非常好的tip浮层实现，收了...

原文地址：http://gallery.kissyui.com/tip/1.0/guide/index.html

GitHub：https://github.com/kissygalleryteam/tip