js滑动提示效果代码分享

时间：2021-05-29 07:45:34|栏目：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程序设计有所帮助。

上一篇：react axios 跨域访问一个或多个域名问题

栏目：JavaScript代码

下一篇：详解JSON1：使用TSQL查询数据和更新JSON数据

本文标题：js滑动提示效果代码分享

本文地址：http://www.codeinn.net/misctech/131246.html

更多JavaScript代码

JavaScript代码

js滑动提示效果代码分享

阅读排行

推荐教程