js滑动提示效果代码分享


Posted in Javascript onMarch 10, 2016

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

Javascript 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
Jun 08 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
浅析Node.js非对称加密方法
Jan 29 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
ES6 十大特性简介
Dec 09 Javascript
js实现页面跳转的五种方法推荐
Mar 10 #Javascript
js实现页面跳转的五种方法推荐
Mar 10 #Javascript
js实现上一页下一页的效果【附代码】
Mar 10 #Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
Mar 10 #Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 #Javascript
node.js实现爬虫教程
Aug 25 #Javascript
ES6中如何使用Set和WeakSet
Mar 10 #Javascript
You might like
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
浅谈类似于(function(){}).call()的js语句
2015/03/30 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
js随机生成26个大小写字母
2016/02/12 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
工作自我评价分享
2013/12/01 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
安全教育实施方案
2014/03/02 职场文书
战略合作协议书范本
2014/04/18 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
工作自我评价范文
2015/03/05 职场文书
居委会工作总结2015
2015/05/18 职场文书
大学运动会通讯稿
2015/07/18 职场文书
KTV员工管理制度
2015/08/06 职场文书
比较node.js和Deno
2021/04/27 Javascript