漂亮的js提示信息成效-JavaSript-爱易网页

漂亮的js提示信息成效

日期：2014-05-16　浏览次数：20367 次

漂亮的js提示信息效果

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
<br><br><br><br><br><br><br><br>
<input id='test'>

<br><br><br><br><br><br><br><br>
<a href='#' id='test2' onmouseover="tips.show('普通链接或按钮提示-灰色-鼠标离开消失-300像素', 'test2', null, '#000000', 300)" onmouseout="tips.hidden('test2')">普通链接或按钮提示</a>

<script>
//提示消息类
var tips = {
        temp : {},
        /***
        * 弹出提示
        *
        * @param  string  msg   提示文字内容
        * @param  string  id    要弹出提示的目标对象的id,如果id错误/null/false/0则主窗口弹出
        * @param  int     time  定时消失时间毫秒数,如果为null/0/false则不定时
        * @param  string  color 提示内容的背景颜色格式为#000000
        * @param  int     width 提示窗宽度,默认300
        */
        show : function(msg, id, time, color, width)
        {
                var target = this._get(id);
                if(!target) { id = 'window'; }

                //如果弹出过则移除重新弹出
                if(this._get(id+'_tips')) { this.remove(id); }

                //设置默认值
                msg    = msg   || 'error';
                color  = color || '#ea0000';
                width  = width || 300;
                time   = time  ? parseInt(time) : false;

                if(id=='window') {
                        var y = document.body.clientHeight/2+document.body.scrollTop;
                        var x = (document.body.clientWidth-width)/2;
                        var textAlign = 'center', fontSize = '15',fontWeight = 'bold';
                } else {
                        //获取对象坐标信息
                        for(var y=0,x=0; target!=null; y+=target.offsetTop, x+=target.offsetLeft, target=target.offsetParent);
                        var textAlign = 'left', fontSize = '12',fontWeight = 'normal';
                }

                //弹出提示
                var tipsDiv = this._create({display:'block',position:'absolute',zIndex:'1001',width:(width-2)+'px',left:(x+1)+'px',padding:'5px',color:'#ffffff',fontSize:fontSize+'px',backgroundColor:color,textAlign:textAlign,fontWeight:fontWeight,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id+'_text', innerHTML:msg, onclick:function(){tips.hidden(id);}});
                document.body.appendChild(tipsDiv);
                tipsDiv.style.top = (y-tipsDiv.offsetHeight-12)+'px';
                document.body.appendChild(this._create({display:'block',position:'absolute',zIndex:'1000',width:(width+10)+'px',height:(tipsDiv.offsetHeight-2)+'px',left:x+'px',top:(y-tipsDiv.offsetHeight-11)+'px',backgroundColor:color,filter:'Alpha(Opacity=50)',opacity:'0.7'}, {id:id+'_bg'}));
                if(id!='window') {
                        var arrow = this._create({display:'block',position:'absolute',overflow:'hidden',zIndex:'999',width:'20px',height:'10px',left:(x+20)+'px',top:(y-13)+'px'}, {id:id+'_arrow'});
                        arrow.appendChild(this._create({display:'block',overflow:'hidden',width:'0px',height:'10px',borderTop:'10px solid '+color,borderRight:'10px solid #fff', borderLeft:'10px solid #fff',filter:'Alpha(Opacity=70)',opacity:'0.8'}));
                        document.body.appendChild(arrow);
                }

                //标记已经弹出
                this.temp[id] = id;

                //如果定时关闭
                if(time) { setTimeout(function(){tips.hidden(id);}, time) }

                return id;
        },
        /***
        * 隐藏提示
        *
        * @param  string  id  要隐藏提示的id,如果要隐藏主窗口提示id为window,如果要隐藏所有提示id为空即可
        */
        hidden : function(id)
        {
                if(!id) { for(var i in this.temp) { this.hidden(i); } return; }
                var t = this._get(id+'_text'), d = this._get(id+'_bg'), a = this._get(id+'_arrow');

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

漂亮的js提示信息成效

相关资料更多>

推荐阅读更多>