利用jQuery实现弹跳球碰撞动画特效



19 72 25



特效描述:利用jQuery实现 弹跳球碰撞 动画特效,利用jQuery实现弹跳球碰撞动画特效

代码结构

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代码

<div></div>
<script>
var blocks = 10;
var paddleWidth = 125;
var paddleHeight = 8;
var ballSize = 28;
var speed = 3;
/*for (i=1;i<=blocks;i++) {
  $('body').append('<div class="block"></div>');
}*/
$('body').append('<div class="ball" style="width:'+ballSize+'px;height:'+ballSize+'px;"></div><div class="paddle" style="width:'+paddleWidth+'px;height:'+paddleHeight+'px;"></div>');
/* CHANGE HUE */
setInterval(function() {$('.ball').css('background','hsla('+H+',100%,70%,1)');},40);
var H = 0;
setInterval(function() {
  if(H <= 360) {H++;}
  else {H = 0;}
},20);
/* PADDLE INTERACTION */
$(document).bind('mouseenter touchstart',function(e) {
  e.preventDefault();
  $(this).bind('mousemove touchmove',function(e) {
    mouseX = e.originalEvent.pageX;
    $('.paddle').css('left',mouseX-(paddleWidth/2)+'px');
  });
});
$(document).bind('mouseleave touchend',function(e) {
  $(document).unbind('mousemove touchmove');
});
var ballX = 0;
var ballY = 0;
var moveX = speed;
var moveY = speed;
setInterval(function() {
  var paddleX = Math.round($('.paddle').position().left);
  var paddleY = Math.round($('.paddle').position().top);
  var height = $(document).height();
  var width = $(document).width();
  ballX = ballX+(moveX);
  if (ballX >= width-ballSize) {moveX = -speed;}
  else if (ballX <= 0) {moveX = +speed;}
  ballY = ballY+(moveY);
  if (ballY >= height-ballSize) {moveY = -speed;}
  else if (ballY <= 0) {moveY = +speed;}
  if (moveY > 0 && ballY >= paddleY-ballSize && ballY <= paddleY+paddleHeight) {
    if (ballX >= paddleX-ballSize && ballX <= paddleX+paddleWidth) {
      moveY = -speed;
      $('.paddle').addClass('wave').css({
        'color':'hsla('+H+',100%,70%,1)',
        'border':'2px solid hsla('+H+',100%,70%,1)'
      });
      setTimeout(function() {$('.wave').removeClass('wave');},400);
    }
  }
  $('.ball').css({
    '-webkit-transform':'translate3D('+ballX+'px,'+ballY+'px,0)',
    '-moz-transform':'translate3D('+ballX+'px,'+ballY+'px,0)'
  });   
  $('.block').each(function(){
    var blockWidth = $(this).width();
    var blockHeight = $(this).height();
    var blockX = Math.round($(this).position().left);
    var blockY = Math.round($(this).position().top);
    if (moveY < 0 && ballY >= blockY-ballSize && ballY <= blockY+blockHeight) {
      if (ballX >= blockX-ballSize && ballX <= blockX+blockWidth) {
        moveY = +speed;
        $(this).addClass('wave').css('color','hsla('+H+',100%,70%,1)').delay(400).fadeOut(100);
      }
    }
  });
},1);
setInterval(function () {
  var floatTypes = Array('floatOne','floatTwo','floatThree','floatFour','floatFive');
  var floatType = floatTypes[Math.floor(Math.random()*floatTypes.length)];
  $('body').append('<div class="tail" style="width:'+ballSize+'px;height:'+ballSize+'px;left:'+ballX+'px;top:'+ballY+'px;-webkit-animation:'+floatType+' .9s 1;-moz-animation:'+floatType+' .9s 1;box-shadow:inset 0 0 0 2px hsla('+H+',100%,70%,1);background:hsla('+H+',100%,70%,1);"></div>');
  $('.tail').each(function() {
    var div = $(this);
    setTimeout(function() {$(div).remove();},800);
  });
},20);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#FFFFFF">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5光标动画 html5光标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到