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 相关文章推荐
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
AngularJS实现根据不同条件显示不同控件
Apr 20 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
Aug 16 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
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
在WINDOWS中设置计划任务执行PHP文件的方法
2011/12/19 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
利用“多说”制作留言板、评论系统
2015/07/14 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
不安全的常用的js写法
2009/09/15 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
2011/11/17 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
2013/11/13 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
微信小程序仿RadioGroup改变样式的处理方案
2018/07/13 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
vue.js实现照片放大功能
2020/06/23 Javascript
Python多线程实例教程
2014/09/06 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
如何利用python发送邮件
2020/09/26 Python
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
营销专业应届生求职信
2013/11/26 职场文书
写给老师的表扬信
2014/01/21 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
现场施工员岗位职责
2015/04/11 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS