JQUERY DIV浮动提示信息

最新推荐文章于 2021-11-01 09:23:09 发布

weixin_30472035

最新推荐文章于 2021-11-01 09:23:09 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yannis/archive/2011/09/14/2175411.html

本文详细介绍了如何使用JavaScript实现自定义样式和动画效果的提示框，包括使用DOM操作来创建提示框元素，并通过CSS来设置样式，利用setTimeout函数实现淡入淡出的动画效果。

    function showTips(tips, height, time) {
var windowWidth = document.documentElement.clientWidth;
var tipsDiv = '<div class="tipsClass">' + tips + '</div>';

        $('body').append(tipsDiv);
        $('div.tipsClass').css({
'top': height + 'px',
'left': (windowWidth / 2) - (tips.length * 13 / 2) + 'px',
'position': 'absolute',
'padding': '3px 5px',
'background': 'red',
'font-size': 12 + 'px',
'margin': '0 auto',
'text-align': 'center',
'width': 'auto',
'color': '#fff',
'opacity': '0.8'
        }).show();
        setTimeout(function () { $('div.tipsClass').fadeOut(); }, (time * 1000));
    }