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实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
vue项目持久化存储数据的实现代码
Oct 01 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
教你如何用Node实现API的转发(某音乐)
Sep 20 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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
体育彩票排列三组选三算法分享
2014/03/07 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
Chrome Web App开发小结
2014/09/04 PHP
PHP连接access数据库
2015/03/27 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
2015/09/22 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
微信小程序 页面滑动事件的实例详解
2017/10/12 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
python中map()与zip()操作方法
2016/02/27 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
python select.select模块通信全过程解析
2017/09/20 Python
django定期执行任务(实例讲解)
2017/11/03 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
PHP面试题大全
2015/10/16 面试题
雅虎笔试题(字符串操作)
2015/03/24 面试题
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
中专生求职自荐信范文
2013/12/22 职场文书
学习新党章思想汇报
2014/01/09 职场文书
调查研究项目计划书
2014/04/29 职场文书
艺术教育实施方案
2014/05/03 职场文书
个人主要事迹材料
2014/08/26 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书