js滑動提示效果

2024-04-27 15:01:55

字體：大中小

來源：轉載

供稿：網友

js代碼漂亮的動畫效果；在靠右上角：背景顏色為紅，字體顏色為白色滑動變大上移緩慢漸變消失

 1     function tishi() { 2  3             $("#tishi").attr("style", "border: 1px solid #000;position: absolute; z-index: 10; width:200px; height: 30px;color:white;background-color:Red;border-radius:25px;-moz-border-radius:25px; text-align:center;left:70%; top:10%; display: none"); 4  5             $("#tishi").show().animate({ 6                 width: '300px', 7                 height: '37px', 8                 top: '-=10px' 9               , opacity: '0.8'10             }, "slow");11             $("#tishi").show().animate({12                 top: '-=10px'13               , opacity: '0.6'14 15             }, "slow");16             $("#tishi").show().animate({17                 top: '-=10px'18               , opacity: '0.4'19             }, "slow");20             $("#tishi").show().animate({21                 top: '-=10px'22               , opacity: '0.2'23             }, "slow");24             $("#tishi").show().animate({25                 top: '-=10px'26                , opacity: '0.0'27             }, "slow");28         }

前臺代碼，寫在body里：

1 <div id="tishi" style="border: 1px solid #000;position: absolute; z-index: 10; width:200px; height: 30px;color:white;background-color:Red;border-radius:25px;2 -moz-border-radius:25px; /* 老的 Firefox */text-align:center;left:70%; top: 10%; display: none">請完善信息</div>