suchen

Heim  >  Artikel  >  Web-Frontend  >  Javascript implementiert das einfache Laden zufälliger Farbquadrate_Javascript-Fähigkeiten

Javascript implementiert das einfache Laden zufälliger Farbquadrate_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:23:401338Durchsuche

Verwenden Sie Fragmente, um kleine Quadrate zu laden und einfache zufällige Farbblöcke zu implementieren. Geben Sie den Code direkt ein:
Rendering:

Spezifischer Code: 

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta charset="utf-8">
 <title>koringz</title>
 <link rel="stylesheet" href="css/demo.css">
</head>
<body>
 <div class="container">
  <div class="main">
   <div class="colorful"></div>
  </div>
 </div>
</body>
</html>

CSS-Code: 

* {
 -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
   box-sizing: border-box;
}
html {
 font-size: 10px;
 -webkit-tap-highlight-color: transparent;
}
body {
 margin: 0;
 padding: 0;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-size: 14px;
 line-height: 1.42857143;
 color: #333;
 background-color: rgba(211,232,132,0.8);
}
.container {
 overflow: visible;
}
.main {
 position: relative;
 width: 90%;
 height:200px;
 margin:auto;
}
.colorful {
 overflow: visible;
 width: 100%;
 height: 100%;
}

.colorful > a {
 float: left;
 display: block;
 width: 50px;
 height: 50px;
 zoom:2;
}

.colorful > a:hover {
 -webkit-animation:infinite 2s ease-in-out start-roll;
 -moz-animation:infinite 2s ease-in-out start-roll;
   animation:infinite 2s ease-in-out start-roll;
}
@-webkit-keyframes start-roll{
 0% {
  -webkit-transform: rotate(0deg); /*chrome*/
  -moz-transform: rotate(0deg); /*火狐*/
  -ms-transform: rotate(0deg); /*IE*/
  transform: rotate(0deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
  zoom:1;
 }
 50% {
  -webkit-transform: rotate(180deg); /*chrome*/
  -moz-transform: rotate(180deg); /*火狐*/
  -ms-transform: rotate(180deg); /*IE*/
  transform: rotate(180deg);
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: 1;
  filter: alpha(opacity=100);
   zoom:2;
 }
 100% {
  -webkit-transform: rotate(360deg); /*chrome*/
  -moz-transform: rotate(360deg); /*火狐*/
  -ms-transform: rotate(360deg); /*IE*/
  transform: rotate(360deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
  zoom:1;
 }
}
@-moz-keyframes start-roll{
 0% {
  -webkit-transform: rotate(0deg); /*chrome*/
  -moz-transform: rotate(0deg); /*火狐*/
  -ms-transform: rotate(0deg); /*IE*/
  transform: rotate(0deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
 50% {
  -webkit-transform: rotate(180deg); /*chrome*/
  -moz-transform: rotate(180deg); /*火狐*/
  -ms-transform: rotate(180deg); /*IE*/
  transform: rotate(180deg);
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
 100% {
  -webkit-transform: rotate(360deg); /*chrome*/
  -moz-transform: rotate(360deg); /*火狐*/
  -ms-transform: rotate(360deg); /*IE*/
  transform: rotate(360deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
}
@keyframes start-roll{
 0% {
  -webkit-transform: rotate(0deg); /*chrome*/
  -moz-transform: rotate(0deg); /*火狐*/
  -ms-transform: rotate(0deg); /*IE*/
  transform: rotate(0deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
 50% {
  -webkit-transform: rotate(180deg); /*chrome*/
  -moz-transform: rotate(180deg); /*火狐*/
  -ms-transform: rotate(180deg); /*IE*/
  transform: rotate(180deg);
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
 100% {
  -webkit-transform: rotate(360deg); /*chrome*/
  -moz-transform: rotate(360deg); /*火狐*/
  -ms-transform: rotate(360deg); /*IE*/
  transform: rotate(360deg);
  -webkit-transition: opacity .3s linear;
  transition: opacity .3s linear;
  opacity: .5;
  filter: alpha(opacity=50);
 }
}

JS-Code: 

(function (window) {
 var document = window.document;
 function on(elem, evtnm, eventhd) {
  var onevtnm = 'on' + evtnm;
  elem[onevtnm] = eventhd;
 }
 function grc() {
  var val = [], i = 0;
  while (++i <= 3) {
   val.push(Math.floor(Math.random() * 255));
  }
  return 'rgb(' + val.join() + ')';
 }
 function fbc() {
  var el = document.querySelectorAll('.colorful')[0],
   total = Math.floor(el.offsetWidth / 50) * Math.floor(el.offsetHeight / 50),
   df = document.createDocumentFragment(),
   a;
  while (total-- > 0) {
   a = document.createElement('a');
   a.style.backgroundColor = grc();
   df.appendChild(a);
  }
  el.appendChild(df);
 }
 on(window, 'load', function () {
  fbc();
 });
})(window)

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die JavaScript-Programmierung lernen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery-Traversal-Funktion siblings() Verwendung example_jqueryNächster Artikel：jquery-Traversal-Funktion siblings() Verwendung example_jquery

In Verbindung stehende Artikel

Mehr sehen