脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js正方形颜色从下往上升

js实现正方形颜色从下往上升的效果

 更新时间：2014年08月04日 10:16:15   投稿：whsnow  
大家有没有看到类似颜色从下往上升的效果，在本例将与大家介绍下此效果的具体实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script src="jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
  interid=setInterval(Showgao,1);
  var i=1;
  $('#top').height(8);
  $('#buttom').css('marginTop',42);
  $('#buttom').css('background','#d6d6d6');
  function Showgao()
  {
    var oldH=$('#buttom').css('marginTop');
    var h= oldH.substr(0,oldH.indexOf('px'));
    $('#buttom').css('marginTop',h-1);
    $('#buttom').height(i);
    i++;
    if(i==42){clearInterval(interid);}
  }
  
  interid1=setInterval(Showgao1,1);
  var i1=1;
  $('#top1').height(4);
  $('#buttom1').css('marginTop',46);
  $('#buttom1').css('background','red');
  function Showgao1()
  {
    var oldH=$('#buttom1').css('marginTop');
    var h= oldH.substr(0,oldH.indexOf('px'));
    $('#buttom1').css('marginTop',h-1);
    $('#buttom1').height(i1);
    i1++;
    if(i1==30){clearInterval(interid1);}
  }
});
</script>
<body>
<style>
  .container{width:20px;height:50px;border:1px solid #999;font-size:10px;float:left;margin-left:5px;}
</style>
<div class="container" onclick="javascript:alert(1);" >
   <div id="top">82%</div>
   <div id="buttom"></div>
</div>
<div class="container" onclick="javascript:alert(1);" >
   <div id="top1" >62%</div>
   <div id="buttom1"></div>
</div>
</body>
</html>
您可能感兴趣的文章:

相关文章

  • webpack入门必知必会

    webpack入门必知必会

    本文主要介绍了webpack入门的一些简单命令和基本配置信息，从代码拆分、打包、压缩的角度和传统的前端项目进行对比，希望以此加深大家对webpack基础知识的印象。下面跟着小编一起来看下吧
    2017-01-01
  • JavaScript分水岭CommonJS对比ES模块分析

    JavaScript分水岭CommonJS对比ES模块分析

    这篇文章主要为大家介绍了JavaScript分水岭CommonJS对比ES模块分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • js函数定时器实现定时读取系统实时连接数

    js函数定时器实现定时读取系统实时连接数

    这篇文章主要介绍了使用js函数定时器实现定时读取系统实时连接数,需要的朋友可以参考下
    2014-04-04
  • 微信web端后退强制刷新功能的实现代码

    微信web端后退强制刷新功能的实现代码

    这篇文章主要介绍了微信web端后退强制刷新功能的实现代码,需要的朋友可以参考下
    2018-03-03
  • javascript表单验证和Window详解

    javascript表单验证和Window详解

    这篇文章主要详细介绍了javascript表单验证和Window，并附上了示例代码，非常使用，对于我们更好的了解表单验证和Window很有帮助，这里推荐给大家
    2014-12-12
  • javascript 原型链维护和继承详解

    javascript 原型链维护和继承详解

    本文通过实例详细向我们分析了javascript原型链维护和继承的问题，十分的详尽，十分的全面，这里推荐给大家。
    2014-11-11
  • 很棒的Bootstrap选项卡切换效果

    很棒的Bootstrap选项卡切换效果

    这篇文章主要为大家分享了一款很棒的Bootstrap选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 使用纯javascript实现放大镜效果

    使用纯javascript实现放大镜效果

    本文给大家分享的是使用纯javascript实现放大镜效果的代码，并附上封装的步骤，做电商程序的小伙伴们一定不要错过。
    2015-03-03
  • layui动态绑定事件的方法

    layui动态绑定事件的方法

    今天小编就为大家分享一篇layui动态绑定事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 学习Bootstrap滚动监听 附调用方法

    学习Bootstrap滚动监听 附调用方法

    这篇文章主要为大家全面解析Bootstrap中滚动监听的使用方法，感兴趣的小伙伴们可以参考一下
    2016-07-07

最新评论