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截取指定长度字符串代码
Aug 21 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
js删除数组中的元素delete和splice的区别详解
Feb 03 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的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
jquery中this的使用说明
2010/09/06 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
详解小程序如何避免多次点击,重复触发事件
2019/04/08 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
2019/06/18 Javascript
微信小程序实现录音功能
2019/11/22 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
python对html代码进行escape编码的方法
2015/05/04 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
Python内建模块struct实例详解
2018/02/02 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
一行python实现树形结构的方法
2019/08/09 Python
如何基于python生成list的所有的子集
2019/11/11 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
《花钟》教学反思
2016/02/17 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
探究Mysql模糊查询是否区分大小写
2021/06/11 MySQL
Ruby处理CSV数据方法详解
2022/04/18 Ruby