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 相关文章推荐
JavaScript 的方法重载效果
Aug 07 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 Javascript
js实现简单的打印表格
Jan 15 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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
2020最新CPU的性能排名
2020/04/02 数码科技
PHP容易忘记的知识点分享
2013/04/30 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
解析Javascript中中括号“[]”的多义性
2013/12/03 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
详解Django通用视图中的函数包装
2015/07/21 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python logging模块的使用总结
2019/07/09 Python
Python 实现自动导入缺失的库
2019/10/29 Python
Python输出指定字符串的方法
2020/02/06 Python
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
详解HTML5新增标签
2017/11/27 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
营业经理岗位职责
2013/11/10 职场文书
料理师求职信
2014/01/30 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
检讨书模板
2015/01/29 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
八年级数学教学反思
2016/02/17 职场文书
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技