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 相关文章推荐
document.open() 与 document.write()的区别
Aug 13 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
JavaScript函数柯里化
Nov 07 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获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
CI(CodeIgniter)框架实现图片上传的方法
2017/03/24 PHP
php提取微信账单的有效信息
2018/10/01 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
前端开发部分总结[兼容性、DOM操作、跨域等](持续更新)
2010/03/04 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
js脚本实现数据去重
2014/11/27 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
angular4实现tab栏切换的方法示例
2017/10/21 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python爬取三国演义的实现方法
2016/09/12 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
python将list转为matrix的方法
2018/12/12 Python
详解Python3注释知识点
2019/02/19 Python
python cumsum函数的具体使用
2019/07/29 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
Python类的动态绑定实现原理
2020/03/21 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
两则小学生的自我评价分享
2013/11/14 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
中班开学寄语
2014/04/04 职场文书
就业协议书的作用
2014/04/11 职场文书
校园环保广播稿(3篇)
2014/09/15 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
自主招生自荐信范文
2015/03/04 职场文书
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python