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 对象成员的可见性说明
Oct 16 Javascript
jQuery Jcrop插件实现图片选取功能
Nov 23 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
javascript常用函数(2)
Nov 05 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
laravel5.6实现数值转换
2019/10/23 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
js不是基础的基础
2006/12/24 Javascript
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
JS实现页面打印功能
2017/03/16 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
Python简单实现enum功能的方法
2016/04/25 Python
pandas数据清洗,排序,索引设置,数据选取方法
2018/05/18 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
Python地图绘制实操详解
2019/03/04 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Python如何使用函数做字典的值
2019/11/30 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
爱岗敬业演讲稿范文
2014/01/14 职场文书
财务总监管理职责范文
2014/03/09 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
排查整治工作方案
2014/06/09 职场文书
计算机软件专业求职信
2014/06/10 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
运动会宣传稿50字
2015/07/23 职场文书