|
49 | 49 | } |
50 | 50 | </style> |
51 | 51 | <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> |
52 | | -<script type="text/javascript"> |
53 | | - $(document).ready(function () { |
54 | | - var collums = 5; // 行 |
55 | | - var rows = 5 ; // 列 |
56 | | - var wrap = $("#wrap"); |
57 | | - var w = wrap.width /rows; |
58 | | - var h = wrap.height /collums; |
59 | | - |
60 | | - for(var r=0;r<rows;r++){ |
61 | | - for (var c=0;c<collums;c++){ |
62 | | - $('<li><div class="box"></div></li>').width(w).height(h).css({ |
63 | | - 'left':w*c+'px', |
64 | | - 'top':h*r+'px', |
65 | | - 'transform': 'scale(0.9) rotate(' + (Math.random() * 40 - 20) + 'deg) ' + |
66 | | - 'translateX(' + (30*c-60) + 'px)' + |
67 | | - 'translateY(' + (30*r-60) + 'px)' |
68 | | - }).find('.box').css({ |
69 | | - 'background-image':'url(images/' + (r * collums + c) + '.jpg)', |
70 | | - 'transform': 'scale(0.9)' |
71 | | - }).end().apptendTo(wrap) |
| 52 | +<script> |
| 53 | + $(function () { |
| 54 | + var collums = 5;//列 |
| 55 | + var rows = 5;//行 |
| 56 | + var wrap = $('#wrap'); |
| 57 | + var w = wrap.width() / rows; |
| 58 | + var h = wrap.height() / collums; |
| 59 | + |
| 60 | + |
| 61 | + for (var r = 0; r < rows; r++) { |
| 62 | + for (var c = 0; c < collums; c++) { |
| 63 | + |
| 64 | + $('<li><div class="box"></div></li>').width(w).height(h) |
| 65 | + .css({ |
| 66 | + 'left': w * c + 'px', |
| 67 | + 'top': h * r + 'px', |
| 68 | + 'transform': 'scale(0.9) rotate(' + (Math.random() * 40 - 20) + 'deg) ' + |
| 69 | + 'translateX(' + (30*c-60) + 'px)' + |
| 70 | + 'translateY(' + (30*r-60) + 'px)' |
| 71 | + }) |
| 72 | + .find('.box') |
| 73 | + .css({ |
| 74 | + 'background-image': 'url(images/' + (r * collums + c) + '.jpg)', |
| 75 | + 'transform': 'scale(0.9)' |
| 76 | + }) |
| 77 | + .end() |
| 78 | + .appendTo(wrap) |
72 | 79 | } |
73 | 80 | } |
| 81 | + |
74 | 82 | var change = true; |
75 | 83 | wrap.find('li').on('click', function () { |
76 | 84 | if (change == true) { |
|
133 | 141 | }) |
134 | 142 | </script> |
135 | 143 |
|
136 | | - |
137 | 144 | <body> |
138 | 145 | <canvas id="a"></canvas> |
139 | 146 | <script type="text/javascript"> |
140 | | - var c = document.getElementById("c"); |
141 | | - var ctx = c.getContext("2d"); |
142 | | - c.width = window.innerWidth; |
143 | | - c.height = window.innerHeight; |
| 147 | + var c=document.getElementById("c"); |
| 148 | + var ctx=c.getContext("2d"); |
| 149 | + c.width=window.innerWidth; |
| 150 | + c.height=window.innerHeight; |
144 | 151 | var string1 = "abcdefghijklmnopqrstuvwxyz"; |
145 | 152 | string1.split(""); |
146 | 153 | var fontsize = 20; |
|
0 commit comments