jQuery+css3温控器样式代码免费下载

jQuery+css3实现的一款交互式温控器样式代码,点击加减按钮可以调节温度大小,温度加减时还有漂亮的动画效果。

JS代码

<script> 
var gradi = 19; 
var max = 34; 
var min = 2; 
 
function updateGr(){ 
  $(".heat").text("" + gradi); 
  $(".ext").text("" + gradi); 
  $(".number").css("transform", "translate(-50%, -50%) rotate("+ (-180 + gradi * 10)+"deg)"); 
  $(".shadow").css("transform", "translate(-50%, -50%) rotate("+ (-180 + gradi * 10)+"deg)"); 
  $(".fill").css("animation", "none"); 
  $(".shadow").css("animation", "none"); 
} 
 
 
$(".minus").mousedown(function(){  
  if(gradi > min){ 
    gradi--; 
    updateGr(); 
    if(gradi >= 18){ 
      $(".fill1").css("transform", "rotate("+ (gradi - 18) * 10 +"deg)").css("transition-delay", "0s"); 
    }else if(gradi == 17){ 
      $(".fill2").css("transform", "rotate("+ gradi * 10 +"deg)").css("transition-delay", "0.5s");   
    }else{ 
      $(".fill2").css("transform", "rotate("+ gradi * 10 +"deg)").css("transition-delay", "0s"); 
    } 
  } 
}); 
 
$(".plus").mousedown(function(){ 
  if(gradi < max){ 
    gradi++; 
    updateGr(); 
    if(gradi > 19){ 
      $(".fill1").css("transform", "rotate("+ (gradi - 18) * 10 +"deg)").css("transition-delay", "0s"); 
    }else if(gradi == 19){ 
      $(".fill1").css("transform", "rotate("+ (gradi - 18) * 10 +"deg)").css("transition-delay", "1s");  
    }else{ 
      $(".fill2").css("transform", "rotate("+ gradi * 10 +"deg)").css("transition-delay", "0s"); 
    } 
  }   
}); 
 
</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录