Js slide tip effect, js slide Effect
Js Code has a nice animation effect. In the top right corner, the background color is red, and the font color is white. sliding up slowly and gradually disappears.
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 }
Front-end code, written in the 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;/* Old Firefox */text-align: center; left: 70%; top: 10%; display: none "> complete the information </div>