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 面向对象全新理练之原型继承
Dec 03 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
浅析java线程中断的办法
Jul 29 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
最简单的JS实现json转csv的方法
Jan 10 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 模拟POST|GET操作实现代码
2010/07/20 PHP
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
python redis存入字典序列化存储教程
2020/07/16 Python
马来西亚航空官方网站:Malaysia Airlines
2017/07/28 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
运动员口号
2014/06/09 职场文书
家具商场的活动方案
2014/08/16 职场文书
观后感格式
2015/06/19 职场文书
2015党建工作简报
2015/07/21 职场文书
遗嘱格式范本
2015/08/07 职场文书
导游词之镇江焦山
2019/11/21 职场文书
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python
JS实现九宫格拼图游戏
2022/06/28 Javascript