45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:如何通过js滑动提示效果代码?

如何通过js滑动提示效果代码?

2016-03-22 19:26:26 来源:www.45fan.com 【

如何通过js滑动提示效果代码?

本文实例为大家分享了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程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/43268.html
Tags: 提示 效果 滑动
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部