jQuery+css는 눈부신 동적 블록 드리프트 효과를 달성합니다.

jQuery+css는 눈부신 동적 블록 드리프트 효과를 달성합니다._jquery

WBOY

풀어 주다： 2016-05-16 15:17:22

원래의

1851명이 탐색했습니다.

이 글의 예시는 jQuery+css로 구현한 동적 블록 드리프트 효과를 설명합니다. 자세한 내용은 다음과 같습니다.

런닝 효과 스크린샷은 다음과 같습니다.

구체적인 코드는 다음과 같습니다.

<!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>
  <title></title>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" >
    function createColor() {
      var color = [];
      for (var i = 0; i < 3; i++) {
        color.push(Math.round(Math.random() * 256));
      }
      return "rgb(" + color.join(",") + ")"
    }
    function createRect(left, top, index) {
      var width = Math.round(Math.random() * 150) + 10;
      var height = Math.round(Math.random() * 150) + 10;
      left = left > width &#63; left - width : left;
      top = top > height &#63; top - height : top;
      var html = [];
      html.push('<div id="rect_'+index+'" class="rect shadow radius" style="background:');
      html.push(createColor());
      html.push(';left:');
      html.push(left);
      html.push('px;top:');
      html.push(top);
      html.push('px;width:');
      html.push(width);
      html.push('px; height:');
      html.push(height);
      html.push('px;"></div>');
      return html.join("");
    }
    function initRect() {
      var body = $("#body");
      var width = body.width();
      var height = body.height();
      var index = new Date().getTime();
      body.append(createRect(Math.round(Math.random() * width), Math.round(Math.random() * height), index));
      setAnimate(index, height);
    }
    function setAnimate(index, height) {
      var rect = $("#rect_" + index);
      var top = parseInt(rect.position().top);
      var selfHeight = rect.height();
      if (top > height - selfHeight) {
        rect.remove();
        initRect();
      } else {
        var filter = top / height;
        rect.css({ "top": (top + 5) + "px", "opacity": filter });
        setTimeout(function () {
          setAnimate(index, height);
        }, 33);
      }
    }
    function initAllRect() {
      for (var i = 0; i < 20; i++) {
        initRect();
      }
    }
    $(document).ready(function () {
      initAllRect();
    });
  </script>
  <style type="text/css" >
  .rect {
        background:#DDDDDD;
        width:100px;
        height:100px;
        position:absolute;
  }
  .radius 
  {
    border-radius:8px;
      -moz-border-radius:8px;
      -webkit-border-radius:8px;
  }
  .shadow 
  {
    -moz-box-shadow:-5px -5px 5px #999 inset;
      -webkit-box-shadow:-5px -5px 5px #999 inset;
      box-shadow:-5px -5px 5px #999 inset; 
  }
  #body { height:700px; width:100%; background:black; margin:0; }
  </style>
</head>
<body>
<div id="body" class="shadow radius">
</div>
</body>
</html>

로그인 후 복사

더 많은 jQuery 관련 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 "jQuery 애니메이션 및 특수 효과 사용 요약" 및 "일반적인 클래식 특수 효과 요약"을 확인할 수 있습니다. jQuery"

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.