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 Math.ceil() 函数使用介绍
Dec 11 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
基于js判断浏览器是否支持webGL
Apr 18 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微信API接口类
2016/08/22 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python单链表实现代码实例
2013/11/21 Python
简单学习Python time模块
2016/04/29 Python
python批量修改ssh密码的实现
2019/08/08 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python 装饰器重要在哪
2021/02/14 Python
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
在C语言中"指针和数组等价"到底是什么意思?
2014/03/24 面试题
计算机专业毕业生自荐信
2013/12/31 职场文书
海南地接欢迎词
2014/01/14 职场文书
元旦获奖感言
2014/03/08 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
教师节主持词开场白
2015/05/29 职场文书
比较node.js和Deno
2021/04/27 Javascript
总结Pyinstaller打包的高级用法
2021/06/28 Python
php png失真的原因及解决办法
2021/10/24 PHP