变幻的盒子(原创)

PROMULGATOR

爷，@风靡全球%

北京市草场地四海网吧

← 智能随机分组系统

→ css自定义文件图片上传

相关代码

变幻的盒子(原创)

随鼠标变幻的动态线条

3D盒子（原创）

css 3D盒子（原创）

css动画盒子旋转

css3立体盒子特效

Html

Css

Js

 #content {
	margin:20px auto 0;
}
.d2 {
	width:50px;
	height:50px;
	color:white;
	text-align:center;
	font-size:14px;
	background:red;
	line-height:50px;
	position:absolute;
	left:10px;
	top:40px;
}

window.onload = function() {
      var onOff = true;
      //获取body里面的所有div
      var d2 = $('content').getElementsByTagName('div');
      var arr = ['red', 'blue', 'black', 'green'];
      //生成100个div事件
      $('Div100').onclick = function() {
          $('content').innerHTML = '';
          if (onOff) {
              for (var i = 0; i < 100; i++) {
                  $('content').innerHTML += '<div class="d2">' + i + '</div>';
                  d2[i].style.left = 10 + (i * 60) + 'px';
              }
              onOff = true;
          }
      }
      //每隔10个换行
      $('Div10').onclick = function() {
          for (var i = 0; i < 100; i += 10) {
              for (var j = 0; j < 10; j++) {
                  d2[i + j].style.left = 10 + (j * 60) + 'px';
                  d2[i + j].style.top = 40 + (i * 6) + 'px';
              }
          }
      }
      //每隔一个换色,4个换一次
      $('DivCol').onclick = function() {
          for (var i = 0; i < 100; i += 4) {
              for (var j = 0; j < 4; j++) {
                  d2[i + j].style.background = arr[j];
              }
          }
      }
      //生成V字DIV
      $('DivV').onclick = function() {
          $('content').innerHTML = '';
          for (var i = 0; i < 11; i++) {
              $('content').innerHTML += '<div class="d2">' + i + '</div>';
              if (i < 6) {
                  d2[i].style.left = 10 + (i * 60) + 'px';
                  d2[i].style.top = 40 + (i * 60) + 'px';
              } else {
                  d2[i].style.left = 10 + (i * 60) + 'px';
                  d2[i].style.top = 400 - ((i - 4) * 60) + 'px';
              }
          }
      }
      //生成倒V字DIV
      $('DivDv').onclick = function() {
          $('content').innerHTML = '';
          for (var i = 0; i < 11; i++) {
              $('content').innerHTML += '<div class="d2">' + i + '</div>';
              if (i < 6) {
                  d2[i].style.left = 10 + (i * 60) + 'px';
                  d2[i].style.top = 340 - (i * 60) + 'px';
              } else {
                  d2[i].style.left = 10 + (i * 60) + 'px';
                  d2[i].style.top = 40 + (i * 60) - 300 + 'px';
              }
          }
      }
  };

function $(id) {
      return document.getElementById(id);
  }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

变幻的盒子(原创)

代码描述：js实现div盒子的变幻

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>变幻的盒子(原创)-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号