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 动态循环输出表格具体方法
Nov 23 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
javascript 全角转换实现代码
2009/07/17 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python计算两个日期相差天数的方法示例
2017/05/23 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
Python提取转移文件夹内所有.jpg文件并查看每一帧的方法
2019/06/27 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python 19个值得学习的编程技巧
2020/08/15 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
一套软件测试笔试题
2014/07/25 面试题
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
基层党员对照检查材料
2014/09/24 职场文书
裁员通知
2015/04/25 职场文书
北京爱情故事观后感
2015/06/12 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python