码迷,mamicode.com
首页 > Web开发 > 详细

js闪烁提示信息

时间:2020-02-08 09:23:23      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:har   div   document   https   isp   mic   alt   htm   ati   

点击某按钮,提示某信息,相信大家经常遇到,用别人的插件总需要修改点,但是修改起来又很费时间,所以干脆自己写吧,哈哈。代码及效果如下:

技术图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>闪烁提示信息</title>
<style>
#show_good{
    background:orange;
    position:absolute;
    display:none;
    border:2px solid #ffff00;
    border-radius:5px;
    text-align:center;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(function(){
    var windows_width = $(window).width();
    var windows_height = $(window).height();

    var div_width = 400;
    var div_height = 100;
    var div_left = (windows_width - div_width) / 2;
    var div_top = windows_height / 2 - div_height;
    var div_css = ‘left:‘ + div_left + ‘px;top:‘ + div_top + ‘px;width:‘ + div_width + ‘px;height:‘ + div_height + ‘px;‘;

    var content = ‘<div id="show_good" style="‘ + div_css + ‘">‘;
    content += ‘闪烁提示信息‘;
    content += ‘</div>‘;

    $(‘body‘).append(content);

    $(‘p‘).click(function(){
        $(‘#show_good‘).fadeIn(1000,function(){
            setTimeout(function(){
                $(‘#show_good‘).fadeOut(1000);
            },1000);
        });
    });
    //console.log(windows_width,windows_height,div_css);
  });
});
</script>
</head>
<body style="background:#ccc;">
<p>闪烁提示信息</p>

</body>
</html>

js闪烁提示信息

标签:har   div   document   https   isp   mic   alt   htm   ati   

原文地址:https://blog.51cto.com/qicaiji/2469705

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!