脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js滑动提示效果

js滑动提示效果代码分享

 更新时间：2016年03月10日 16:13:29   作者：我_爱编程  
这篇文章主要为大家分享了js滑动提示效果代码，实现方法简单，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • ES6新特性之函数的扩展实例详解

    ES6新特性之函数的扩展实例详解

    这篇文章主要介绍了ES6新特性之函数的扩展,实例形式较为详细的分析了ES6针对函数参数、运算符及相关新特性的扩展操作与注意事项,需要的朋友可以参考下
    2017-04-04
  • JS中强制类型转换的实现

    JS中强制类型转换的实现

    JavaScript中有几种强制类型转换的方法，可以将一个数据类型转换为另一个数据类型，具有一定的参考价值，感兴趣的可以了解一下
    2023-05-05
  • IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

    IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法

    最近有个需求须要实现左右拖拽功能，页面右边是个iframe页面，在chrome测试通过之后，发现在ie8上面效果不是很理想，查阅相关资料找到可以使用ie自带的setCapture和releaseCapture来解决,需要的朋友可以参考下
    2016-10-10
  • bootstrap IE8 兼容性处理

    bootstrap IE8 兼容性处理

    这篇文章主要为大家详细介绍了bootstrap IE8 兼容性处理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • JavaScript 常见的继承方式汇总

    JavaScript 常见的继承方式汇总

    这篇文章主要汇总了JavaScript 常见的继承方式，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
    2020-09-09
  • JavaScript中的 new 命令

    JavaScript中的 new 命令

    这篇文章主要介绍了JavaScript中的new 命令，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 详解JavaScript基于面向对象之继承实例

    详解JavaScript基于面向对象之继承实例

    这篇文章主要介绍了JavaScript基于面向对象之继承实例,需要的朋友可以参考下
    2015-12-12
  • Bootstrap 源代码分析(未完待续)

    Bootstrap 源代码分析(未完待续)

    这篇文章主要为大家详细分析了Bootstrap部分源代码，先提供给大家学习，感兴趣的小伙伴们可以参考一下
    2016-08-08
  • javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现

    javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现

    首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用canvas，我却就只会拿几个div凑和。不过没关系，因为做出来的同样是游戏。哈！废话最近有点多，感兴趣的朋友可以了解下
    2013-01-01
  • js的indexOf方法使用

    js的indexOf方法使用

    indexOf() 方法可返回数组中某个指定的元素位置，本文就来介绍一下js的indexOf方法使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2023-05-05

最新评论