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 相关文章推荐
extjs 为某个事件设置拦截器
Jan 15 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
深入理解Angularjs中$http.post与$.post
May 19 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
微信小程序tab左右滑动切换功能的实现代码
Feb 08 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
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
简单实现js悬浮导航效果
2017/02/05 Javascript
Vue2组件tree实现无限级树形菜单
2017/03/29 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
node前端模板引擎Jade之标签的基本写法
2018/05/11 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python脚本设置系统时间的两种方法
2016/02/21 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
pytorch 实现tensor与numpy数组转换
2019/12/27 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
Linux操作面试题
2012/05/16 面试题
工程管理专业个人求职信范文
2013/12/07 职场文书
人力资源主管岗位职责
2014/01/29 职场文书
管理失职检讨书
2014/02/12 职场文书
银行贷款承诺书
2014/03/29 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
法制工作总结2015
2015/07/23 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python