demo简介：可以通过修改参数，改变显示的姓名。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 6 <!--<link rel="stylesheet" href="520.css"/>--> 7 <style> 8 ul, 9 li { 10 padding: 0; 11 margin: 0; 12 } 13 .container { 14 width: 440px; 15 height: 200px; 16 background-color: #eeeeee; 17 position: relative; 18 overflow: hidden; 19 background: url("http://5.26923.com/download/pic/000/338/5592302fe1ef0eb6168da88d12cc6c12.jpg") no-repeat; 20 background-size: 440px 200px; 21 color: #ff0000; 22 border: 1px solid #f00; 23 } 24 .container p { 25 display: inline-block; 26 background: url("http://i4.tinypic.com/23uy4bb.gif") no-repeat; 27 width: 200px; 28 height: 200px; 29 background-size: 200px 200px; 30 } 31 .container li { 32 width: 100%; 33 height: 100%; 34 position: absolute; 35 overflow: hidden; 36 top: 30px; 37 left: 30px; 38 } 39 .container li b { 40 position: absolute; 41 font-size: 20px; 42 font-family: 'Microsoft yahei'; 43 } 44 .container li.second { 45 left: 10em; 46 } 47 .container li.third { 48 left: 18em; 49 } 50 .container li.first > b:nth-child(1) { 51 top: 0em; 52 left: 0em; 53 } 54 .container li.first > b:nth-child(2) { 55 top: 0em; 56 left: 1.5em; 57 } 58 .container li.first > b:nth-child(3) { 59 top: 0em; 60 left: 3em; 61 } 62 .container li.first > b:nth-child(4) { 63 top: 0em; 64 left: 4.5em; 65 } 66 .container li.first > b:nth-child(5) { 67 top: 1.5em; 68 left: 0em; 69 } 70 .container li.first > b:nth-child(6) { 71 top: 3em; 72 left: 0em; 73 } 74 .container li.first > b:nth-child(7) { 75 top: 3em; 76 left: 1.5em; 77 } 78 .container li.first > b:nth-child(8) { 79 top: 3em; 80 left: 3em; 81 } 82 .container li.first > b:nth-child(9) { 83 top: 3em; 84 left: 4.5em; 85 } 86 .container li.first > b:nth-child(10) { 87 top: 4.5em; 88 left: 4.5em; 89 } 90 .container li.first > b:nth-child(11) { 91 top: 6em; 92 left: 0em; 93 } 94 .container li.first > b:nth-child(12) { 95 top: 6em; 96 left: 1.5em; 97 } 98 .container li.first > b:nth-child(13) { 99 top: 6em; 100 left: 3em; 101 } 102 .container li.first > b:nth-child(14) { 103 top: 6em; 104 left: 4.5em; 105 } 106 .container li.second > b:nth-child(1) { 107 top: 0em; 108 left: 0em; 109 } 110 .container li.second > b:nth-child(2) { 111 top: 0em; 112 left: 1.5em; 113 } 114 .container li.second > b:nth-child(3) { 115 top: 0em; 116 left: 3em; 117 } 118 .container li.second > b:nth-child(4) { 119 top: 0em; 120 left: 4.5em; 121 } 122 .container li.second > b:nth-child(5) { 123 top: 1.5em; 124 left: 4.5em; 125 } 126 .container li.second > b:nth-child(6) { 127 top: 3em; 128 left: 0em; 129 } 130 .container li.second > b:nth-child(7) { 131 top: 3em; 132 left: 1.5em; 133 } 134 .container li.second > b:nth-child(8) { 135 top: 3em; 136 left: 3em; 137 } 138 .container li.second > b:nth-child(9) { 139 top: 3em; 140 left: 4.5em; 141 } 142 .container li.second > b:nth-child(10) { 143 top: 4.5em; 144 left: 0em; 145 } 146 .container li.second > b:nth-child(11) { 147 top: 6em; 148 left: 0em; 149 } 150 .container li.second > b:nth-child(12) { 151 top: 6em; 152 left: 1.5em; 153 } 154 .container li.second > b:nth-child(13) { 155 top: 6em; 156 left: 3em; 157 } 158 .container li.second > b:nth-child(14) { 159 top: 6em; 160 left: 4.5em; 161 } 162 .container li.third > b:nth-child(1) { 163 top: 0em; 164 left: 0.75em; 165 } 166 .container li.third > b:nth-child(2) { 167 top: 0em; 168 left: 2.25em; 169 } 170 .container li.third > b:nth-child(3) { 171 top: 0em; 172 left: 3.75em; 173 } 174 .container li.third > b:nth-child(4) { 175 top: 1.5em; 176 left: 0em; 177 } 178 .container li.third > b:nth-child(5) { 179 top: 1.5em; 180 left: 4.5em; 181 } 182 .container li.third > b:nth-child(6) { 183 top: 3em; 184 left: 0em; 185 } 186 .container li.third > b:nth-child(7) { 187 top: 3em; 188 left: 4.5em; 189 } 190 .container li.third > b:nth-child(8) { 191 top: 4.5em; 192 left: 0em; 193 } 194 .container li.third > b:nth-child(9) { 195 top: 4.5em; 196 left: 4.5em; 197 } 198 .container li.third > b:nth-child(10) { 199 top: 6em; 200 left: 0.75em; 201 } 202 .container li.third > b:nth-child(11) { 203 top: 6em; 204 left: 2.25em; 205 } 206 .container li.third > b:nth-child(12) { 207 top: 6em; 208 left: 3.75em; 209 } 210 211 </style> 212 <title>520表白日</title> 213 <script> 214 $(function(){ 215 var name='牛大宝';//这里可以改成你自己的名字 216 var li=$('.container>li'); 217 function show(name){ 218 name=name.split(""); 219 li.each(function(i){ 220 li.eq(i).children('b').html(name[i]); 221 }); 222 } 223 show(name); 224 var con=$('.container'); 225 con.mouseenter(function(){ 226 li.each(function(i){ 227 var b=li.eq(i).children('b'); 228 b.each(function(j){ 229 // console.log(b.eq(j).text()); 230 }); 231 }); 232 $(this).children('p').hide(); 233 }); 234 con.mouseleave(function(){ 235 $(this).children('p').show(); 236 }); 237 }); 238 </script> 239 </head> 240 <body> 241 <ul class="container"> 242 <p></p><p></p> 243 <li class="first"> 244 <b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b> 245 </li> 246 <li class="second"> 247 <b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b> 248 </li> 249 <li class="third"> 250 <b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b> 251 </li> 252 </ul> 253 </body> 254 </html>
