js滑动提示效果代码分享

前端技术 2023/09/08 JavaScript

本文实例为大家分享了js滑动提示效果，供大家参考，具体内容如下

js代码漂亮的动画效果；在靠右上角：背景颜色为红，字体颜色为白色  滑动 变大 上移  缓慢渐变消失

function tishi() {

  $(\"#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\");

  $(\"#tishi\").show().animate({
  width: \'300px\',
  height: \'37px\',
  top: \'-=10px\'
  , opacity: \'0.8\'
  }, \"slow\");
  $(\"#tishi\").show().animate({
  top: \'-=10px\'
  , opacity: \'0.6\'

  }, \"slow\");
  $(\"#tishi\").show().animate({
  top: \'-=10px\'
  , opacity: \'0.4\'
  }, \"slow\");
  $(\"#tishi\").show().animate({
  top: \'-=10px\'
  , opacity: \'0.2\'
  }, \"slow\");
  $(\"#tishi\").show().animate({
  top: \'-=10px\'
  , opacity: \'0.0\'
  }, \"slow\");
 }

前台代码，写在body里：

<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;
 -moz-border-radius:25px; /* 老的 Firefox */
text-align:center;left:70%; 
top: 10%; 
display: none\">请完善信息</div>

希望本文所述对大家学习javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/21176

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案