<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹幕</title> <style type="text/css"> * { padding:0; margin:0; list-style: none; text-decoration: none; } #zz { background-color: #000000; width:900px; height: 400px; margin: 0 auto; margin-top: 15px; color:#ffffff; } #ds { position: relative; background-color: #000000; width:900px; height: 100%; margin: 0 auto; margin-top: 15px; color:#ffffff; overflow: hidden; } .ss { display: block; width: 100%; text-align: right; position: absolute; top:10px; left: 20px; } #sent { width:898px; height:70px; margin:0 auto; background: #ffffff; border-style:inset; border: 1px solid #d5d5d5; border-top:none; box-shadow:-2px 0 #dddddd, 2px 0 #dddddd, 0 2px #dddddd; position: relative; } #dm { width:498px; height:32px; margin:20px 0px 20px 10px; border:1px solid #d5d5d5; color:#6e6e6e; } #st { line-height: 30px; color:#ffffff; border:none; background: #00A2D6; padding:0px 15px; text-align: center; cursor: pointer; } #dw { position: absolute; left:400px; top:27px; font-size: 14px; color:#6e6e6e; } #yc { position: relative; } #rr { line-height: 30px; color:#ffffff; border:none; background: #006600; padding:0px 15px; text-align: center; cursor: pointer; } span { color:#ffa178; cursor: pointer; font-size: 20px; } input { background: #ffffff; color:#3c3c3c; border:1px solid #d5d5d5; padding-left: 10px; padding-right: 10px; line-height: 30px; outline: none; } .colorDiv ul.colorDivUl li p.name, .colorDiv ul.colorDivUl li .fontSizeDiv, .colorDiv ul.colorDivUl li .fontSizeDiv a, .colorDiv ul.colorDivUl li .backColorDiv, .colorDiv ul.colorDivUl li .backColorDiv p.backColor, .colorDiv ul.colorDivUl li .backColorDiv p.colorText, .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a , a.colorHint{ float: left; } .clear { clear: both; } a.colorHint { display: block; width: 60px; height: 30px; line-height: 30px; margin: 22px 5px 0 70px; text-align: center; color: white; background: #990000;} .colorDiv { width: 280px; height: 220px; background: white; border: 1px solid #ccc; border-radius: 4px; padding-top: 15px; position: absolute; left: 0; bottom: 74px; z-index: 9999; display: none; } .colorDiv ul.colorDivUl { width: 100%; height: 100%; } .colorDiv ul.colorDivUl li { margin-bottom: 15px; } .colorDiv ul.colorDivUl li p.name { width: 50px; height: 27px; line-height: 27px; text-align: center; font-size: 14px; } .colorDiv ul.colorDivUl li .fontSizeDiv { width: 210px; height: 27px; } .colorDiv ul.colorDivUl li .fontSizeDiv a { display: block; width: 30px; height: 23px; line-height: 23px; text-align: center; font-size: 13px; border: 1px solid white; border-radius: 4px; color:#333; margin: 0 5px;} .colorDiv ul.colorDivUl li .fontSizeDiv a.active { border-color: #ff0066; background: #ffedee; } .colorDiv ul.colorDivUl li .backColorDiv { width: 210px; height: 27px; } .colorDiv ul.colorDivUl li .backColorDiv p.backColor, .colorDiv ul.colorDivUl li .backColorDiv p.colorText { width: 55px; height: 25px; line-height: 25px; text-align: center; } .colorDiv ul.colorDivUl li .backColorDiv p.backColor { border: 1px solid #ccc; background: #ffffff; margin-right: 12px; } .colorDiv ul.colorDivUl li .backColorDiv p.colorText { font-size: 12px; border: 1px solid #ccc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs { width: 210px; height: 132px; border-left: 1px solid #333; border-bottom: 1px solid #333; margin-top: 10px; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a { width: 10px; height: 10px; border: 1px solid #333; border-bottom: none; border-left: none; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a:hover { border-top: 1px solid white; border-right: 1px solid white; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a000000 { background: #000000; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a003300 { background: #003300; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a006600 { background: #006600; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a009900 { background: #009900; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00cc00 { background: #00cc00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00ff00 { background: #00ff00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a3a0000 { background: #3a0000; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a333300 { background: #333300; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a336600 { background: #336600; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a339900 { background: #339900; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a339900 { background: #339900; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33cc00 { background: #33cc00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33ff00 { background: #33ff00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a660000 { background: #660000; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a663300 { background: #663300; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a666600 { background: #666600; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a669900 { background: #669900; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66cc00 { background: #66cc00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66ff00 { background: #66ff00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a333333 { background: #333333; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a000033 { background: #000033; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a003333 { background: #003333; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a006633 { background: #006633; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a009933 { background: #009933; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00cc33 { background: #00cc33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00ff33 { background: #00ff33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a330033 { background: #330033; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a333333 { background: #333333; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a336633 { background: #336633; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a339933 { background: #339933; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33cc33 { background: #33cc33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33ff33 { background: #33ff33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a660033 { background: #660033; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a663333 { background: #663333; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a666633 { background: #666633; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a669933 { background: #669933; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66cc33 { background: #66cc33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66ff33 { background: #66ff33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a666666 { background: #666666; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a000066 { background: #000066; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a003366 { background: #003366; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a006666 { background: #006666; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a009966 { background: #009966; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00cc66 { background: #00cc66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00ff66 { background: #00ff66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a330066 { background: #330066; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a333366 { background: #333366; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a336666 { background: #336666; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a339966 { background: #339966; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33cc66 { background: #33cc66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33ff66 { background: #33ff66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a660066 { background: #660066; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a663366 { background: #663366; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a666666 { background: #666666; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a669966 { background: #669966; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66cc66 { background: #66cc66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66ff66 { background: #66ff66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a999999 { background: #999999; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a000099 { background: #000099; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a003399 { background: #003399; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a006699 { background: #006699; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a009999 { background: #009999; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00cc99 { background: #00cc99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00ff99 { background: #00ff99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a330099 { background: #330099; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a333399 { background: #333399; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a336699 { background: #336699; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a339999 { background: #339999; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33cc99 { background: #33cc99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33ff99 { background: #33ff99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a660099 { background: #660099; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a663399 { background: #663399; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a666699 { background: #666699; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a669999 { background: #669999; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66cc99 { background: #66cc99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66ff99 { background: #66ff99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acccccc { background: #cccccc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a0000cc { background: #0000cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a0033cc { background: #0033cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a0066cc { background: #0066cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a0099cc { background: #0099cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00cccc { background: #00cccc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00ffcc { background: #00ffcc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a3300cc { background: #3300cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a3333cc { background: #3333cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a3366cc { background: #3366cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a3399cc { background: #3399cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33cccc { background: #33cccc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33ffcc { background: #33ffcc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a6600cc { background: #6600cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a6633cc { background: #6633cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a6666cc { background: #6666cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a6699cc { background: #6699cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66cccc { background: #66cccc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66ffcc { background: #66ffcc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affffff { background: #ffffff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a0000ff { background: #0000ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a0033ff { background: #0033ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a0066ff { background: #0066ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a0099ff { background: #0099ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00ccff { background: #00ccff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00ffff { background: #00ffff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a3300ff { background: #3300ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a3333ff { background: #3333ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a3366ff { background: #3366ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a3399ff { background: #3399ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33ccff { background: #33ccff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a33ffff { background: #33ffff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a6600ff { background: #6600ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a6633ff { background: #6633ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a6666ff { background: #6666ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a6699ff { background: #6699ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66ccff { background: #66ccff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a66ffff { background: #66ffff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff0000 { background: #ff0000; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a990000 { background: #990000; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a993300 { background: #993300; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a996600 { background: #996600; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a999900 { background: #999900; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99cc00 { background: #99cc00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99ff00 { background: #99ff00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc0000 { background: #cc0000; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc3300 { background: #cc3300; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc6600 { background: #cc6600; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc9900 { background: #cc9900; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acccc00 { background: #cccc00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.accff00 { background: #ccff00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff0000 { background: #ff0000; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff3300 { background: #ff3300; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff6600 { background: #ff6600; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff9900 { background: #ff9900; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affcc00 { background: #ffcc00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affff00 { background: #ffff00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00ff00 { background: #00ff00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a990033 { background: #990033; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a993333 { background: #993333; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a996633 { background: #996633; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a999933 { background: #999933; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99cc33 { background: #99cc33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99ff33 { background: #99ff33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc0033 { background: #cc0033; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc3333 { background: #cc3333; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc6633 { background: #cc6633; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc9933 { background: #cc9933; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acccc33 { background: #cccc33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.accff33 { background: #ccff33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff0033 { background: #ff0033; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff3333 { background: #ff3333; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff6633 { background: #ff6633; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff9933 { background: #ff9933; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affcc33 { background: #ffcc33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affff33 { background: #ffff33; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a0000ff { background: #0000ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a990066 { background: #990066; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a993366 { background: #993366; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a996666 { background: #996666; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a999966 { background: #999966; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99cc66 { background: #99cc66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99ff66 { background: #99ff66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc0066 { background: #cc0066; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc3366 { background: #cc3366; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc6666 { background: #cc6666; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc9966 { background: #cc9966; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acccc66 { background: #cccc66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.accff66 { background: #ccff66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff0066 { background: #ff0066; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff3366 { background: #ff3366; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff6666 { background: #ff6666; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff9966 { background: #ff9966; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affcc66 { background: #ffcc66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affff66 { background: #ffff66; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affff00 { background: #ffff00; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a990099 { background: #990099; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a993399 { background: #993399; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a996699 { background: #996699; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a999999 { background: #999999; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99cc99 { background: #99cc99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99ff99 { background: #99ff99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc0099 { background: #cc0099; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc3399 { background: #cc3399; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc6699 { background: #cc6699; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc9999 { background: #cc9999; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acccc99 { background: #cccc99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.accff99 { background: #ccff99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff0099 { background: #ff0099; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff3399 { background: #ff3399; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff6699 { background: #ff6699; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff9999 { background: #ff9999; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affcc99 { background: #ffcc99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affff99 { background: #ffff99; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a00ffff { background: #00ffff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a9900cc { background: #9900cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a9933cc { background: #9933cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a9966cc { background: #9966cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a9999cc { background: #9999cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99cccc { background: #99cccc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99ffcc { background: #99ffcc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc00cc { background: #cc00cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc33cc { background: #cc33cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc66cc { background: #cc66cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc99cc { background: #cc99cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acccccc { background: #cccccc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.accffcc { background: #ccffcc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff00cc { background: #ff00cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff33cc { background: #ff33cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff66cc { background: #ff66cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff99cc { background: #ff99cc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affcccc { background: #ffcccc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affffcc { background: #ffffcc; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff00ff { background: #ff00ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a9900ff { background: #9900ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a9933ff { background: #9933ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a9966ff { background: #9966ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a9999ff { background: #9999ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99ccff { background: #99ccff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.a99ffff { background: #99ffff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc00ff { background: #cc00ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc33ff { background: #cc33ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc66ff { background: #cc66ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.acc99ff { background: #cc99ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.accccff { background: #ccccff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.accffff { background: #ccffff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff00ff { background: #ff00ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff33ff { background: #ff33ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff66ff { background: #ff66ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.aff99ff { background: #ff99ff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affccff { background: #ffccff; } .colorDiv ul.colorDivUl li .backColorDiv .colorDivs a.affffff { background: #ffffff; } /*# sourceMappingURL=css.css.map */ </style> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div id="zz"> <div id="ds"></div> </div> <div id="sent"> <div id="yc"> <a href="javascript:;" class="colorHint">样式</a> <div class="colorDiv"> <ul class="colorDivUl"> <li> <p class="name">字号</p> <div class="fontSizeDiv"> <a href="javascript:;" data-size="22px">大号</a> <a href="javascript:;" data-size="18px">中号</a> <a href="javascript:;" data-size="14px">小号</a> </div> <div class="clear"></div> </li> <li> <p class="name">颜色</p> <div class="backColorDiv"> <p class="backColor"></p> <p class="colorText">#ffffff</p> <div class="clear"></div> <div class="colorDivs"> <a href="javascript:;" class="a000000" data-color="000000"></a> <a href="javascript:;" class="a000000" data-color="000000"></a> <a href="javascript:;" class="a003300" data-color="003300"></a> <a href="javascript:;" class="a006600" data-color="006600"></a> <a href="javascript:;" class="a009900" data-color="009900"></a> <a href="javascript:;" class="a00cc00" data-color="00cc00"></a> <a href="javascript:;" class="a00ff00" data-color="00ff00"></a> <a href="javascript:;" class="a3a0000" data-color="3a0000"></a> <a href="javascript:;" class="a333300" data-color="333300"></a> <a href="javascript:;" class="a336600" data-color="336600"></a> <a href="javascript:;" class="a339900" data-color="339900"></a> <a href="javascript:;" class="a33cc00" data-color="33cc00"></a> <a href="javascript:;" class="a33ff00" data-color="33ff00"></a> <a href="javascript:;" class="a660000" data-color="660000"></a> <a href="javascript:;" class="a663300" data-color="663300"></a> <a href="javascript:;" class="a666600" data-color="666600"></a> <a href="javascript:;" class="a669900" data-color="669900"></a> <a href="javascript:;" class="a66cc00" data-color="66cc00"></a> <a href="javascript:;" class="a66ff00" data-color="66ff00"></a> <a href="javascript:;" class="a333333" data-color="333333"></a> <a href="javascript:;" class="a000033" data-color="000033"></a> <a href="javascript:;" class="a003333" data-color="003333"></a> <a href="javascript:;" class="a006633" data-color="006633"></a> <a href="javascript:;" class="a009933" data-color="009933"></a> <a href="javascript:;" class="a00cc33" data-color="00cc33"></a> <a href="javascript:;" class="a00ff33" data-color="00ff33"></a> <a href="javascript:;" class="a330033" data-color="330033"></a> <a href="javascript:;" class="a333333" data-color="333333"></a> <a href="javascript:;" class="a336633" data-color="336633"></a> <a href="javascript:;" class="a339933" data-color="339933"></a> <a href="javascript:;" class="a33cc33" data-color="33cc33"></a> <a href="javascript:;" class="a33ff33" data-color="33ff33"></a> <a href="javascript:;" class="a660033" data-color="660033"></a> <a href="javascript:;" class="a663333" data-color="663333"></a> <a href="javascript:;" class="a666633" data-color="666633"></a> <a href="javascript:;" class="a669933" data-color="669933"></a> <a href="javascript:;" class="a66cc33" data-color="66cc33"></a> <a href="javascript:;" class="a66ff33" data-color="66ff33"></a> <a href="javascript:;" class="a666666" data-color="666666"></a> <a href="javascript:;" class="a000066" data-color="000066"></a> <a href="javascript:;" class="a003366" data-color="003366"></a> <a href="javascript:;" class="a006666" data-color="006666"></a> <a href="javascript:;" class="a009966" data-color="009966"></a> <a href="javascript:;" class="a00cc66" data-color="00cc66"></a> <a href="javascript:;" class="a00ff66" data-color="00ff66"></a> <a href="javascript:;" class="a330066" data-color="330066"></a> <a href="javascript:;" class="a333366" data-color="333366"></a> <a href="javascript:;" class="a336666" data-color="336666"></a> <a href="javascript:;" class="a339966" data-color="339966"></a> <a href="javascript:;" class="a33cc66" data-color="33cc66"></a> <a href="javascript:;" class="a33ff66" data-color="33ff66"></a> <a href="javascript:;" class="a660066" data-color="660066"></a> <a href="javascript:;" class="a663366" data-color="663366"></a> <a href="javascript:;" class="a666666" data-color="666666"></a> <a href="javascript:;" class="a669966" data-color="669966"></a> <a href="javascript:;" class="a66cc66" data-color="66cc66"></a> <a href="javascript:;" class="a66ff66" data-color="66ff66"></a> <a href="javascript:;" class="a999999" data-color="999999"></a> <a href="javascript:;" class="a000099" data-color="000099"></a> <a href="javascript:;" class="a003399" data-color="003399"></a> <a href="javascript:;" class="a006699" data-color="006699"></a> <a href="javascript:;" class="a009999" data-color="009999"></a> <a href="javascript:;" class="a00cc99" data-color="00cc99"></a> <a href="javascript:;" class="a00ff99" data-color="00ff99"></a> <a href="javascript:;" class="a330099" data-color="330099"></a> <a href="javascript:;" class="a333399" data-color="333399"></a> <a href="javascript:;" class="a336699" data-color="336699"></a> <a href="javascript:;" class="a339999" data-color="339999"></a> <a href="javascript:;" class="a33cc99" data-color="33cc99"></a> <a href="javascript:;" class="a33ff99" data-color="33ff99"></a> <a href="javascript:;" class="a660099" data-color="660099"></a> <a href="javascript:;" class="a663399" data-color="663399"></a> <a href="javascript:;" class="a666699" data-color="666699"></a> <a href="javascript:;" class="a669999" data-color="669999"></a> <a href="javascript:;" class="a66cc99" data-color="66cc99"></a> <a href="javascript:;" class="a66ff99" data-color="66ff99"></a> <a href="javascript:;" class="acccccc" data-color="cccccc"></a> <a href="javascript:;" class="a0000cc" data-color="0000cc"></a> <a href="javascript:;" class="a0033cc" data-color="0033cc"></a> <a href="javascript:;" class="a0066cc" data-color="0066cc"></a> <a href="javascript:;" class="a0099cc" data-color="0099cc"></a> <a href="javascript:;" class="a00cccc" data-color="00cccc"></a> <a href="javascript:;" class="a00ffcc" data-color="00ffcc"></a> <a href="javascript:;" class="a3300cc" data-color="3300cc"></a> <a href="javascript:;" class="a3333cc" data-color="3333cc"></a> <a href="javascript:;" class="a3366cc" data-color="3366cc"></a> <a href="javascript:;" class="a3399cc" data-color="3399cc"></a> <a href="javascript:;" class="a33cccc" data-color="33cccc"></a> <a href="javascript:;" class="a33ffcc" data-color="33ffcc"></a> <a href="javascript:;" class="a6600cc" data-color="6600cc"></a> <a href="javascript:;" class="a6633cc" data-color="6633cc"></a> <a href="javascript:;" class="a6666cc" data-color="6666cc"></a> <a href="javascript:;" class="a6699cc" data-color="6699cc"></a> <a href="javascript:;" class="a66cccc" data-color="66cccc"></a> <a href="javascript:;" class="a66ffcc" data-color="66ffcc"></a> <a href="javascript:;" class="affffff" data-color="ffffff"></a> <a href="javascript:;" class="a0000ff" data-color="0000ff"></a> <a href="javascript:;" class="a0033ff" data-color="0033ff"></a> <a href="javascript:;" class="a0066ff" data-color="0066ff"></a> <a href="javascript:;" class="a0099ff" data-color="0099ff"></a> <a href="javascript:;" class="a00ccff" data-color="00ccff"></a> <a href="javascript:;" class="a00ffff" data-color="00ffff"></a> <a href="javascript:;" class="a3300ff" data-color="3300ff"></a> <a href="javascript:;" class="a3333ff" data-color="3333ff"></a> <a href="javascript:;" class="a3366ff" data-color="3366ff"></a> <a href="javascript:;" class="a3399ff" data-color="3399ff"></a> <a href="javascript:;" class="a33ccff" data-color="33ccff"></a> <a href="javascript:;" class="a33ffff" data-color="33ffff"></a> <a href="javascript:;" class="a6600ff" data-color="6600ff"></a> <a href="javascript:;" class="a6633ff" data-color="6633ff"></a> <a href="javascript:;" class="a6666ff" data-color="6666ff"></a> <a href="javascript:;" class="a6699ff" data-color="6699ff"></a> <a href="javascript:;" class="a66ccff" data-color="66ccff"></a> <a href="javascript:;" class="a66ffff" data-color="66ffff"></a> <a href="javascript:;" class="aff0000" data-color="ff0000"></a> <a href="javascript:;" class="a990000" data-color="990000"></a> <a href="javascript:;" class="a993300" data-color="993300"></a> <a href="javascript:;" class="a996600" data-color="996600"></a> <a href="javascript:;" class="a999900" data-color="999900"></a> <a href="javascript:;" class="a99cc00" data-color="99cc00"></a> <a href="javascript:;" class="a99ff00" data-color="99ff00"></a> <a href="javascript:;" class="acc0000" data-color="cc0000"></a> <a href="javascript:;" class="acc3300" data-color="cc3300"></a> <a href="javascript:;" class="acc6600" data-color="cc6600"></a> <a href="javascript:;" class="acc9900" data-color="cc9900"></a> <a href="javascript:;" class="acccc00" data-color="cccc00"></a> <a href="javascript:;" class="accff00" data-color="ccff00"></a> <a href="javascript:;" class="aff0000" data-color="ff0000"></a> <a href="javascript:;" class="aff3300" data-color="ff3300"></a> <a href="javascript:;" class="aff6600" data-color="ff6600"></a> <a href="javascript:;" class="aff9900" data-color="ff9900"></a> <a href="javascript:;" class="affcc00" data-color="ffcc00"></a> <a href="javascript:;" class="affff00" data-color="ffff00"></a> <a href="javascript:;" class="a00ff00" data-color="00ff00"></a> <a href="javascript:;" class="a990033" data-color="990033"></a> <a href="javascript:;" class="a993333" data-color="993333"></a> <a href="javascript:;" class="a996633" data-color="996633"></a> <a href="javascript:;" class="a999933" data-color="999933"></a> <a href="javascript:;" class="a99cc33" data-color="99cc33"></a> <a href="javascript:;" class="a99ff33" data-color="99ff33"></a> <a href="javascript:;" class="acc0033" data-color="cc0033"></a> <a href="javascript:;" class="acc3333" data-color="cc3333"></a> <a href="javascript:;" class="acc6633" data-color="cc6633"></a> <a href="javascript:;" class="acc9933" data-color="cc9933"></a> <a href="javascript:;" class="acccc33" data-color="cccc33"></a> <a href="javascript:;" class="accff33" data-color="ccff33"></a> <a href="javascript:;" class="aff0033" data-color="ff0033"></a> <a href="javascript:;" class="aff3333" data-color="ff3333"></a> <a href="javascript:;" class="aff6633" data-color="ff6633"></a> <a href="javascript:;" class="aff9933" data-color="ff9933"></a> <a href="javascript:;" class="affcc33" data-color="ffcc33"></a> <a href="javascript:;" class="affff33" data-color="ffff33"></a> <a href="javascript:;" class="a0000ff" data-color="0000ff"></a> <a href="javascript:;" class="a990066" data-color="990066"></a> <a href="javascript:;" class="a993366" data-color="993366"></a> <a href="javascript:;" class="a996666" data-color="996666"></a> <a href="javascript:;" class="a999966" data-color="999966"></a> <a href="javascript:;" class="a99cc66" data-color="99cc66"></a> <a href="javascript:;" class="a99ff66" data-color="99ff66"></a> <a href="javascript:;" class="acc0066" data-color="cc0066"></a> <a href="javascript:;" class="acc3366" data-color="cc3366"></a> <a href="javascript:;" class="acc6666" data-color="cc6666"></a> <a href="javascript:;" class="acc9966" data-color="cc9966"></a> <a href="javascript:;" class="acccc66" data-color="cccc66"></a> <a href="javascript:;" class="accff66" data-color="ccff66"></a> <a href="javascript:;" class="aff0066" data-color="ff0066"></a> <a href="javascript:;" class="aff3366" data-color="ff3366"></a> <a href="javascript:;" class="aff6666" data-color="ff6666"></a> <a href="javascript:;" class="aff9966" data-color="ff9966"></a> <a href="javascript:;" class="affcc66" data-color="ffcc66"></a> <a href="javascript:;" class="affff66" data-color="ffff66"></a> <a href="javascript:;" class="affff00" data-color="ffff00"></a> <a href="javascript:;" class="a990099" data-color="990099"></a> <a href="javascript:;" class="a993399" data-color="993399"></a> <a href="javascript:;" class="a996699" data-color="996699"></a> <a href="javascript:;" class="a999999" data-color="999999"></a> <a href="javascript:;" class="a99cc99" data-color="99cc99"></a> <a href="javascript:;" class="a99ff99" data-color="99ff99"></a> <a href="javascript:;" class="acc0099" data-color="cc0099"></a> <a href="javascript:;" class="acc3399" data-color="cc3399"></a> <a href="javascript:;" class="acc6699" data-color="cc6699"></a> <a href="javascript:;" class="acc9999" data-color="cc9999"></a> <a href="javascript:;" class="acccc99" data-color="cccc99"></a> <a href="javascript:;" class="accff99" data-color="ccff99"></a> <a href="javascript:;" class="aff0099" data-color="ff0099"></a> <a href="javascript:;" class="aff3399" data-color="ff3399"></a> <a href="javascript:;" class="aff6699" data-color="ff6699"></a> <a href="javascript:;" class="aff9999" data-color="ff9999"></a> <a href="javascript:;" class="affcc99" data-color="ffcc99"></a> <a href="javascript:;" class="affff99" data-color="ffff99"></a> <a href="javascript:;" class="a00ffff" data-color="00ffff"></a> <a href="javascript:;" class="a9900cc" data-color="9900cc"></a> <a href="javascript:;" class="a9933cc" data-color="9933cc"></a> <a href="javascript:;" class="a9966cc" data-color="9966cc"></a> <a href="javascript:;" class="a9999cc" data-color="9999cc"></a> <a href="javascript:;" class="a99cccc" data-color="99cccc"></a> <a href="javascript:;" class="a99ffcc" data-color="99ffcc"></a> <a href="javascript:;" class="acc00cc" data-color="cc00cc"></a> <a href="javascript:;" class="acc33cc" data-color="cc33cc"></a> <a href="javascript:;" class="acc66cc" data-color="cc66cc"></a> <a href="javascript:;" class="acc99cc" data-color="cc99cc"></a> <a href="javascript:;" class="acccccc" data-color="cccccc"></a> <a href="javascript:;" class="accffcc" data-color="ccffcc"></a> <a href="javascript:;" class="aff00cc" data-color="ff00cc"></a> <a href="javascript:;" class="aff33cc" data-color="ff33cc"></a> <a href="javascript:;" class="aff66cc" data-color="ff66cc"></a> <a href="javascript:;" class="aff99cc" data-color="ff99cc"></a> <a href="javascript:;" class="affcccc" data-color="ffcccc"></a> <a href="javascript:;" class="affffcc" data-color="ffffcc"></a> <a href="javascript:;" class="aff00ff" data-color="ff00ff"></a> <a href="javascript:;" class="a9900ff" data-color="9900ff"></a> <a href="javascript:;" class="a9933ff" data-color="9933ff"></a> <a href="javascript:;" class="a9966ff" data-color="9966ff"></a> <a href="javascript:;" class="a9999ff" data-color="9999ff"></a> <a href="javascript:;" class="a99ccff" data-color="99ccff"></a> <a href="javascript:;" class="a99ffff" data-color="99ffff"></a> <a href="javascript:;" class="acc00ff" data-color="cc00ff"></a> <a href="javascript:;" class="acc33ff" data-color="cc33ff"></a> <a href="javascript:;" class="acc66ff" data-color="cc66ff"></a> <a href="javascript:;" class="acc99ff" data-color="cc99ff"></a> <a href="javascript:;" class="accccff" data-color="ccccff"></a> <a href="javascript:;" class="accffff" data-color="ccffff"></a> <a href="javascript:;" class="aff00ff" data-color="ff00ff"></a> <a href="javascript:;" class="aff33ff" data-color="ff33ff"></a> <a href="javascript:;" class="aff66ff" data-color="ff66ff"></a> <a href="javascript:;" class="aff99ff" data-color="ff99ff"></a> <a href="javascript:;" class="affccff" data-color="ffccff"></a> <a href="javascript:;" class="affffff" data-color="ffffff"></a> </div> </div> <div class="clear"></div> </li> </ul> </div> <input id="rr" type="button" value="弹幕开关"/> <input id="dm" type="text"/> <input id="st" type="submit" value="发送 >"/> <div id="dw">点击输入弹幕(仅限25字以内)</div> </div> </div> </body> <script type="text/javascript"> var thisColor,fontSize; $(function(){ $('.fontSizeDiv a').on('click',function(){ fontSize = $(this).attr('data-size'); $('.fontSizeDiv a').removeClass('active'); $(this).addClass('active'); }); $('a.colorHint').on('click',function(){ $('.colorDiv').toggle(); }); $('.colorDivs a').on('click',function(){ thisColor = $(this).attr('data-color'); $('p.backColor').css({ 'background-color':'#'+thisColor }); $('p.colorText').text('#'+thisColor); }); }); var ds = document.getElementById('ds'); var dm = document.getElementById('dm'); var rr = document.getElementById('rr'); var st = document.getElementById('st'); var dw = document.getElementById('dw'); var num = 0; var pmh = ds.offsetHeight; var pmw = ds.offsetWidth; function mu() { var dd = document.createElement('div'); dd.setAttribute('class','ss'); dd.innerHTML = dm.value; dm.value=''; ds.appendChild(dd); dd.style.fontSize = fontSize; dd.style.color = '#'+thisColor; dd.style.left = '900px'; dd.style.top = Math.floor(Math.random()*(pmh-30))+'px'; var l = pmw-dd.offsetWidth; var tim = null; tim = setInterval(function(){ l--; if( l <= (0-dd.offsetWidth) ){ clearInterval(tim); ds.removeChild(dd); } dd.style.left = l+'px'; },20) } rr.onclick=function() { num++; if(num%2==0) { rr.style.background = '#006600'; ds.style.display='block'; num=0; } else { rr.style.background = '#dddddd'; ds.style.display='none'; } }; st.onclick=function() { if(dm.value!=''&&dm.value.length<=25) { mu(); } else { alert('输入不能超过25个字符!'); } }; document.onkeydown=function(even) { var event=even||window.event; if(event.keyCode==13) { if(dm.value!=''&&dm.value.length<=25) { mu(); } } }; dm.onclick=function() { dw.style.display='none'; setInterval(obj,10); }; function obj() { if(dm.value!=''&&dm.value.length<=25) { st.style.background='#ffa178'; } else { st.style.background='#00A2D6'; } } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » jQuery仿A站弹幕效果代码 喜欢 (0)or分享 (0)
