css3 点击爆炸下落

最新推荐文章于 2022-12-27 11:25:37 发布
weixin_30340819
最新推荐文章于 2022-12-27 11:25:37 发布
阅读量234
点赞数
CC 4.0 BY-SA版权
文章标签： ux javascript ViewUI
原文链接：http://www.cnblogs.com/lhrs/p/4121124.html
  一个代码简洁，效果明显的jquery+
  css3特效
  
点击div块状，会自动破碎并散落到网页底部
  
效果预览：http://www.huiyi8.com/css3/
 
  $(document).ready(
  function
  () {
 
  // Generate the clips. In this case I'm using 5 (or 25 pieces)
 
  (genClips = 
  function
  () {
 
  // For easy use
 
  $t = $('.clipped-box
  ');
 
  // Like I said, we'
  re using 5!
 
  var 
  amount = 5;
 
  // Get the width of each clipped rectangle.
 
  var 
  width = $t.width() / amount;
 
  var 
  height = $t.height() / amount;
 
  // The total is the square of the amount
 
  var 
  totalSquares = Math.pow(amount, 2);
 
  // The HTML of the content
 
  var 
  html = $t.find(
  '.content'
  ).html();
 
  var 
  y = 0;
 
  for
  (
  var 
  z = 0; z <= (amount*width); z = z+width) { 
 
  $(
  '<div class="clipped" style="clip: rect('
  +y+
  'px, '
  +(z+width)+
  'px, '
  +(y+height)+
  'px, '
  +z+
  'px)">'
  +html+
  '</div>'
  ).appendTo($t);
 
  if
  (z === (amount*width)-width) {
 
  y = y + height;
 
  z = -width;
 
  }
 
  if
  (y === (amount*height)) {
 
  z = 9999999;
 
  }
 
  }
 
  })();
 
  // A quick random function for selecting random numbers
 
  function 
  rand(min, max) {
 
  return 
  Math.floor(Math.random() * (max - min + 1)) + min;
 
  }
 
  // A variable check for when the animation is mostly over
 
  var 
  first = 
  false
  ,
 
  clicked = 
  false
  ;
 
  // On click
 
  $(
  '.clipped-box div'
  ).on(
  'click'
  , 
  function
  () {
 
  if
  (clicked === 
  false
  ) {
 
  clicked = 
  true
  ;
 
  $(
  '.clipped-box .content'
  ).css({
  'display' 
  : 
  'none'
  });   
 
  // Apply to each clipped-box div.
 
  $(
  '.clipped-box div:not(.content)'
  ).each(
  function
  () {
 
  // So the speed is a random speed between 90m/s and 120m/s. I know that seems like a lot
 
  // But otherwise it seems too slow. That's due to how I handled the timeout.
 
  var 
  v = rand(120, 90),
 
  angle = rand(80, 89), 
  // The angle (the angle of projection) is a random number between 80 and 89 degrees.
 
  theta = (angle * Math.PI) / 180, 
  // Theta is the angle in radians
 
  g = -9.8; 
  // And gravity is -9.8. If you live on another planet feel free to change
 
  // $(this) as self
 
  var 
  self = $(
  this
  );
 
  // time is initially zero, also set some random variables. It's higher than the total time for the projectile motion
 
  // because we want the squares to go off screen. 
 
  var 
  t = 0,
 
  z, r, nx, ny,
 
  totalt =  15;
 
  // The direction can either be left (1), right (-1) or center (0). This is the horizontal direction.
 
  var 
  negate = [1, -1, 0],
 
  direction = negate[ Math.floor(Math.random() * negate.length) ];
 
  // Some random numbers for altering the shapes position
 
  var 
  randDeg = rand(-5, 10), 
 
  randScale = rand(0.9, 1.1),
 
  randDeg2 = rand(30, 5);
 
  // Because box shadows are a bit laggy (by a bit I mean 'box shadows will not work on individual clipped divs at all') 
 
  // we're altering the background colour slightly manually, in order to give the divs differentiation when they are
 
  // hovering around in the air.
 
  var 
  color = $(
  this
  ).css('backgroundColor
  ').split('
  rgb(
  ')[1].split('
  )
  ')[0].split('
  , 
  '),
 
  colorR = rand(-20, 20),  // You might want to alter these manually if you change the color
 
  colorGB = rand(-20, 20),  // To get the right consistency.
 
  newColor = '
  rgb(
  '+(parseFloat(color[0])+colorR)+'
  , 
  '+(parseFloat(color[1])+colorGB)+'
  , 
  '+(parseFloat(color[2])+colorGB)+'
  )
  ';
 
  // And apply those
 
  $(this).css({
 
  '
  transform
  ' : '
  scale(
  '+randScale+'
  ) skew(
  '+randDeg+'
  deg) rotateZ(
  '+randDeg2+'
  deg)
  ', 
 
  '
  background
  ' : newColor
 
  });
 
  // Set an interval
 
  z = setInterval(function() {    
 
  // Horizontal speed is constant (no wind resistance on the internet)
 
  var ux = ( Math.cos(theta) * v ) * direction;
 
  // Vertical speed decreases as time increases before reaching 0 at its peak
 
  var uy = ( Math.sin(theta) * v ) - ( (-g) * t);
 
  // The horizontal position
 
  nx = (ux * t);
 
  // s = ut + 0.5at^2
 
  ny = (uy * t) + (0.5 * (g) * Math.pow(t, 2));
 
  // Apply the positions  
 
  $(self).css({'
  bottom
  ' : (ny)+'
  px
  ', '
  left
  ' : (nx)+'
  px
  '});
 
  // Increase the time by 0.10
 
  t = t + 0.10;
 
  // If the time is greater than the total time clear the interval
 
  if(t > totalt) {
 
  clicked = false;
 
  first = true;
 
  $('
  .clipped-box
  ').css({'
  top
  ' : '
  -1000px
  ', '
  transition
  ' : '
  none
  '});
 
  $(self).css({'
  left
  ' : '
  0
  ', '
  bottom
  ' : '
  0
  ', '
  opacity
  ' : '
  1
  ', '
  transition
  ' : '
  none
  ', '
  transform
  ' : '
  none
  '});
 
  // Finally clear the interval
 
  clearInterval(z);
 
  }
 
  }, 10); // Run this interval every 10ms. Changing this will change the pace of the animation
 
  });
 
  }
 
  });
 
  r = setInterval(function() {
 
  // This is a bit rough but it does the job
 
  if(first === true) {
 
  // I'
  ve just put 
  this 
  in 
  so the deleted box will come down again after its been clicked.
 
  // That way you can keep pressing delete.
 
  $(
  '.clipped-box'
  ).css({
  'top' 
  : 
  '0'
  , 
  'transition' 
  : 
  ''
  });
 
  $(
  '.clipped-box div'
  ).css({
  'opacity' 
  : 
  '1'
  , 
  'transition' 
  : 
  ''
  , 
  'background-color' 
  : 
  ''
  });
 
  $(
  '.content'
  ).css({
  'display' 
  : 
  'block'
  });
 
  first = 
  false
  ;
 
  }
 
  }, 300);
 
  });