[Hỏi đáp] Cách làm Smashable Christmas Lights

  Bài viết hay nhất1
http://www.schillmania.com/projects/snowstorm/lights/

Devs có thể giúp mình cách làm cái này ko? khi rê chuột vào đèn là bị vỡ, rất thú vị. forum mình là punbb
Cảm ơn!
  Bài viết hay nhất2
Chèn đoạn sau vào đâu bạn thích
Code:
<div id="lights" style="display: block;">
  <!-- lights go here -->
 <div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 0px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px 0px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 0px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 32px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px 0px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 32px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 64px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px 0px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 64px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 96px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px -32px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 96px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 128px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px -32px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 128px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 160px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px -32px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 160px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 192px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px -64px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 192px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 224px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px -64px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 224px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 256px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -64px -64px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 256px; top: 0px; display: none; margin-left: 0px; margin-top: 0px; opacity: 1;"><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -100px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -100px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -100px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -100px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -100px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -100px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -100px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -100px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -100px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 288px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -64px -96px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 288px; top: 0px; display: none; margin-left: 0px; margin-top: 0px; opacity: 1;"><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -150px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -150px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -150px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -150px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -150px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -150px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -150px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -150px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -150px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 320px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px -96px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 320px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 352px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px -96px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 352px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 384px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px 0px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 384px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 416px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px 0px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 416px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 448px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px 0px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 448px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 480px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px -32px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 480px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 512px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -64px -32px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 512px; top: 0px; display: none; margin-left: 0px; margin-top: 0px; opacity: 1;"><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -50px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -50px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -50px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -50px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -50px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -50px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -50px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -50px;"></div><div class="xlsf-fragment" style="left: 0px; top: 0px; margin-left: 0px; margin-top: 0px; opacity: 1; background-position: -250px -50px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 544px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px -32px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 544px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 576px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px -64px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 576px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 608px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px -64px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 608px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 640px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px -64px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 640px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 672px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px -96px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 672px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 704px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px -96px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 704px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 736px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px -96px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 736px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div><div class="xlsf-fragment" style="background-position: -50px -150px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 768px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px 0px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 768px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 800px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px 0px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 800px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 832px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px 0px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 832px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div><div class="xlsf-fragment" style="background-position: -50px 0px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 864px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px -32px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 864px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 896px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px -32px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 896px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 928px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) 0px -32px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 928px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div><div class="xlsf-fragment" style="background-position: -50px -50px;"></div></div><div class="xlsf-light undefined top" style="width: 32px; height: 32px; left: 960px; top: 0px; background: url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-32x32-top.png) -32px -64px no-repeat;"></div><div class="xlsf-fragment-box" style="left: 960px; top: 0px;"><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div><div class="xlsf-fragment" style="background-position: -50px -100px;"></div></div></div>
CSS
Code:
#lights {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.xlsf-light {
    position: absolute;
}
.xlsf-fragment-box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 50px;
    height: 50px;
    display: none;
}
.xlsf-fragment {
    position: absolute;
    background: transparent url(http://www.schillmania.com/projects/snowstorm/lights/image/bulbs-50x50-fragments.png) no-repeat 0px 0px;
    width: 50px;
    height: 50px;
}
Thử dùng JS này xem
Code:
// Christmas Light Smashfest
// Adapted from XLSF 2007 as originally used on http://schillmania.com/?theme=2007&christmas=1

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

var Y = {
 // shortcuts
 A: YAHOO.util.Anim,
 D: YAHOO.util.Dom,
 E: YAHOO.util.Event,
 UE: YAHOO.util.Easing,
 CA: YAHOO.util.ColorAnim,
 BG: YAHOO.util.BgPosAnim
}

function XLSF(oTarget,urlBase) {
  var writeDebug = soundManager._wD;
  var urlBase = (urlBase?urlBase:'lights/');
  writeDebug('XLSF()');
  var IS_MOON_COMPUTER = false;
  var isIE = navigator.userAgent.match(/msie/i);
  var self = this;
  var xlsf = self;
  var animDuration = 1;
  this.oFrag = document.createDocumentFragment();
  this.oTarget = (oTarget?oTarget:document.documentElement);
  this.oExplosionBox = document.createElement('div');
  this.oExplosionBox.className = 'xlsf-fragment-box';
  this.oExplosionFrag = document.createElement('div');
  this.oExplosionFrag.className = 'xlsf-fragment';
  this.lights = [];
  this.lightClasses = {
    pico: 32,
    tiny: 50,
    small: 64,
    medium: 72,
    large: 96   
  }

  if (window.innerWidth || window.innerHeight) {
    var screenX = window.innerWidth; // -(!isIE?24:2);
    var screenY = window.innerHeight;
  } else {
    var screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth); // -(!isIE?8:0);
    var screenY = (document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight);
  }

  this.lightClass = (screenX>1800?'small':'pico'); // kind of light to show (32px to 96px square)

  if (window.location.href.match(/size=/i)) {
    this.lightClass = window.location.href.substr(window.location.href.indexOf('size=')+5);
  }

  this.lightXY = this.lightClasses[this.lightClass]; // shortcut to w/h

  this.lightGroups = {
    left: [],
    top: [],
    right: [],
    bottom: []
  }
  this.lightSmashCounter = 0;
  this.lightIndex = 0;
  this.lightInterval = 500;
  this.timer = null;
  this.bgBaseX = 0;
  this.bgBaseY = 0;
  this.soundIDs = 0;
  this.soundPan = {
    panValue: 75,
    left: 0,
    mid: 481,
    right: 962
  }

  this.cover = document.createElement('div');
  this.cover.className = 'xlsf-cover';
  document.documentElement.appendChild(this.cover);

  this.initSounds = function() {
   for (var i=0; i<6; i++) {
     soundManager.createSound({
       id: 'smash'+i,
       url: urlBase+'sound/glass'+i+'.mp3',
       autoLoad: true,
       multiShot: true,
      volume:50
     });
   }
    self.initSounds = function() {} // safety net
  }

  this.appendLights = function() {
   writeDebug('xlsf.appendLights()');
    self.oTarget.appendChild(self.oFrag);
    self.oFrag = document.createDocumentFragment();
  }

  function ExplosionFragment(nType,sClass,x,y,vX,vY) {
    var self = this;
    this.o = xlsf.oExplosionFrag.cloneNode(true);
    this.nType = nType;
    this.sClass = sClass;
    this.x = x;
    this.y = y;
    this.w = 50;
    this.h = 50;
    this.bgBaseX = 0;
    this.bgBaseY = this.h*this.nType;
    this.vX = vX*(1.5+Math.random());
    this.vY = vY*(1.5+Math.random());
    this.oA = null;
    this.oA2 = null;
    this.burstPhase = 1; // starting background offset point
    this.burstPhases = 4; // 1+offset (ignore large size)
    this.o.style.backgroundPosition = ((this.w*-this.burstPhase)+'px '+(this.h*-nType)+'px');

    // boundary checks
    if (self.sClass == 'left') {
      this.vX = Math.abs(this.vX);
    } else if (self.sClass == 'right') {
      this.vX = Math.abs(this.vX)*-1;
    }

    this.burstTween = function() {
      // determine frame to show
      var phase = 1+Math.floor((this.currentFrame/this.totalFrames)*self.burstPhases);
      if (phase != self.burstPhase) {
        self.burstPhase = phase;
        self.o.style.backgroundPosition = ((self.w*-self.burstPhase)+'px '+(self.h*-nType)+'px');
      }
    }

    this.burst = function() {
      self.oA = new Y.A(self.o,{marginLeft:{to:(self.vX*8)},marginTop:{to:(self.vY*8)}},animDuration,Y.UE.easeOutStrong);
      self.oA.onTween.subscribe(self.burstTween);
      self.oA.animate();
    }

    this.hide = function() {
      if (!isIE) self.o.style.opacity = 0;
    }

    this.reset = function() {
      self.o.style.left = '0px';
      self.o.style.top = '0px';
      self.o.style.marginLeft = '0px';
      self.o.style.marginTop = '0px';
      if (!isIE) self.o.style.opacity = 1;
    }

    this.animate = function() {
      self.reset();
      self.burst();
    }

  }

  function Explosion(nType,sClass,x,y) {
    var oParent = this;
    var self = this;
    this.o = null;
    this.nType = nType;
    this.sClass = sClass;
    this.x = x;
    this.y = y;
    this.boxVX = 0;
    this.boxVY = 0;
    this.o = xlsf.oExplosionBox.cloneNode(true);
    this.o.style.left = x+'px';
    this.o.style.top = y+'px';
    this.fragments = [];

    var mX = x;
    var mY = y;

    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,-5,-5));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,0,-5));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,5,-5));

    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,-5,0));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,0,0));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,5,0));

    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,5,-5));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,5,0));
    this.fragments.push(new ExplosionFragment(nType,sClass,mX,mY,5,5));

    this.init = function() {
      for (var i=self.fragments.length; i--;) {
        self.o.appendChild(self.fragments[i].o);
      }
      if (!IS_MOON_COMPUTER) {
        // faster rendering, particles get cropped
        xlsf.oFrag.appendChild(self.o);
      } else {
        // slower rendering, can overlay body
        xlsf.oFrag.appendChild(self.o);
      }
    }

    this.reset = function() {
      // clean-up
      // self.o.parentNode.removeChild(self.o);
      self.o.style.display = 'none';
      self.o.style.marginLeft = '0px';
      self.o.style.marginTop = '0px';
      self.o.style.left = self.x+'px';
      self.o.style.top = self.y+'px';
      if (!isIE) self.o.style.opacity = 1;
      for (var i=self.fragments.length; i--;) {
        self.fragments[i].reset();
      }
    }

    this.trigger = function(boxVX,boxVY) {
      self.o.style.display = 'block';
      self.boxVX = boxVX;
      self.boxVY = boxVY;
      // boundary checks
      if (self.sClass == 'right') {
        self.boxVX = Math.abs(self.boxVX)*-1;
      } else if (self.sClass == 'left') {
        self.boxVX = Math.abs(self.boxVX);
      }
      for (var i=self.fragments.length; i--;) {
        self.fragments[i].animate();
      }
      if (!isIE && (IS_MOON_COMPUTER)) {
        var oAExplode = new Y.A(self.o,{marginLeft:{to:100*self.boxVX},marginTop:{to:150*self.boxVY},opacity:{to:0.01}},animDuration,Y.UE.easeInStrong);
      } else {
        // even IE 7 sucks w/alpha-transparent PNG + CSS opacity. Boo urns.
        var oAExplode = new Y.A(self.o,{marginLeft:{to:100*self.boxVX},marginTop:{to:150*self.boxVY}},animDuration,Y.UE.easeInStrong);
      }
      oAExplode.onComplete.subscribe(self.reset);
      oAExplode.animate();
    }

    this.init();

  }

  function Light(sSizeClass,sClass,nType,x,y) {
    var self = this;
    this.o = document.createElement('div');
    this.sClass = sClass;
    this.sSizeClass = sSizeClass;
    this.nType = (nType||0);
    this.useY = (sClass == 'left' || sClass == 'right');
    this.state = null;
    this.broken = 0;
    this.w = xlsf.lightClasses[sSizeClass];
    this.h = xlsf.lightClasses[sSizeClass];
    this.x = x;
    this.y = y;
    this.bg = urlBase+'image/bulbs-'+this.w+'x'+this.h+'-'+this.sClass+'.png';
    this.o.style.width = this.w+'px';
    this.o.style.height = this.h+'px';
    this.o.style.background = 'url('+this.bg+') no-repeat 0px 0px';
    this.bgBaseX = (self.useY?-self.w*this.nType:0);
    this.bgBaseY = (!self.useY?-self.h*this.nType:0);
    this.glassType = parseInt(Math.random()*6);
    this.oExplosion = null;
    this.soundID = 'smash'+this.glassType;
    var panValue = xlsf.soundPan.panValue; // eg. +/- 80%
    this.pan = parseInt(this.x<=xlsf.soundPan.mid?-panValue+((this.x/xlsf.soundPan.mid)*panValue):(this.x-xlsf.soundPan.mid)/(xlsf.soundPan.right-xlsf.soundPan.mid)*panValue);

    this.initSound = function() {
    }

    this.setBGPos = function(x,y) {
      self.o.style.backgroundPosition = ((self.bgBaseX+x)+'px '+(self.bgBaseY+y)+'px');
    }

    this.setLight = function(bOn) {
      if (self.broken || self.state == bOn) return false;
      if (!self.w || !self.h) self.getDimensions();
      self.state = bOn;
      if (self.useY) {
        self.setBGPos(0,-this.h*(bOn?0:1));
      } else {
        self.setBGPos(-this.w*(bOn?0:1),0);
      }
    }

    this.getDimensions = function() {
      self.w = self.o.offsetWidth;
      self.h = self.o.offsetHeight;
      self.bgBaseX = (self.useY?-self.w*self.nType:0);
      self.bgBaseY = (!self.useY?-self.h*self.nType:0);
    }

    this.on = function() {
      self.setLight(1);
    }

    this.off = function() {
      self.setLight(0);
    }

    this.flickr = function() {
      self.setLight(Math.random()>=0.5?1:0);
    }

    this.toggle = function() {
      self.setLight(!self.state?1:0);
    }

    this.explode = function(e) {
      self.oExplosion.trigger(0,1); // boooom!
    }

    this.smash = function(e) {
      if (self.broken) return false;
      self.broken = true;
      if (soundManager && soundManager.ok()) {
        soundManager.play(self.soundID,{pan:self.pan});
        // soundManager.sounds[self.soundID].play({pan:self.pan});
        // if (self.bonusSound != null) window.setTimeout(self.smashBonus,1000);
      }
      self.explode(e);
      var rndFrame = 2; // +parseInt(Math.random()*3);
      if (self.useY) {
        self.setBGPos(0,self.h*-rndFrame);
      } else {
        self.setBGPos(self.w*-rndFrame,0);
      }
      xlsf.lightSmashCounter++;
    }

    this.smashBonus = function() {
      // soundManager.play(self.bonusSounds[self.bonusSound],urlBase+'sound/'+self.bonusSounds[self.bonusSound]+'.mp3');
    }

    this.reset = function() {
      if (!self.broken) return false;
      self.broken = false;
      self.state = null;
      xlsf.lightSmashCounter--;
      self.flickr();
    }

    this.init = function() {
      self.o.className = 'xlsf-light '+this.sizeClass+' '+this.sClass;
      self.o.style.left = self.x+'px';
      self.o.style.top = self.y+'px';
      self.o.style.width = self.w+'px';
      self.o.style.height = self.h+'px';
      self.o.onmouseover = self.smash;
      self.o.onclick = self.smash;
      self.flickr();
      xlsf.oFrag.appendChild(self.o);
      self.oExplosion = new Explosion(self.nType,self.sClass,self.x,self.y);
    }

    this.init();
    
  } // Light()

  this.createLight = function(sClass,nType,x,y) {
    var oLight = new Light(self.lightClass,sClass,nType,x,y);
    self.lightGroups[sClass].push(oLight);
    self.lights.push(oLight);
    return oLight;
  }

  this.rotateLights = function() {
    self.lights[self.lightIndex==self.lights.length?self.lights.length-1:self.lightIndex].off();
    self.lightIndex++;
    if (self.lightIndex == self.lights.length) {
      self.lightIndex = 0;
    }
    self.lights[self.lightIndex].on();
  }

  this.randomLights = function() {
    self.lights[parseInt(Math.random()*self.lights.length)].toggle();
  }

  
  this.destroyLights = function() {
    self.startSequence(self.destroyLight,20);
  }

  this.destroyLight = function() {
    var groupSize = 2; // # to smash at a time
    if (self.lightSmashCounter<self.lights.length) {
      var limit = Math.min(self.lightSmashCounter+groupSize,self.lights.length);
      for (var i=self.lightSmashCounter; i<limit; i++) {
        self.lights[self.lightSmashCounter].smash();
      }
    } else {
      self.stopSequence();
    }

  }

  this.uberSmash = function() {
    // make everything explode - including your CPU.
    self.stopSequence();
    var ebCN = Y.D.getElementsByClassName;
  }

  this.smashGroup = function(oGroup) {
    for (var i=oGroup.length; i--;) {
      oGroup[i].smash();
    }
  }

  this.startSequence = function(fSequence,nInterval) {
    if (self.timer) self.stopSequence();
    self.timer = window.setInterval(fSequence,(typeof nInterval != 'undefined'?nInterval:self.lightInterval));
  }

  this.stopSequence = function() {
    if (self.timer) {
      window.clearInterval(self.timer);
      self.timer = null;
    }
  }

  var i=0;
  var j=0;

  $('lights').style.display = 'block';

  // start lights to the right of <h1>
  var offset = 0; // parseInt(document.getElementsByTagName('h1')[0].offsetWidth)+16;

  var jMax = Math.floor((screenX-offset-16)/self.lightXY);
  var iMax = Math.floor((screenY-offset-16)/self.lightXY);

  for (j=0; j<jMax; j++) {
    this.createLight('top',parseInt(j/3)%4,offset+j*self.lightXY,0);
  }

  this.appendLights();
  this.startSequence(self.randomLights);
  
}

var xlsf = null;
var urlBase = null;

function smashInit() {
  if (navigator.userAgent.match(/msie 6/i)) {
    return false;
  }
  xlsf = new XLSF(document.getElementById('lights'),urlBase?urlBase:null);
  if ($('loading')) {
    $('loading').style.display = 'none';   
  }
  xlsf.initSounds();
}

soundManager.setup({
  flashVersion: 9,
  preferFlash: false,
  url: 'lights/',
  onready: function() {
    smashInit();
  },
  ontimeout: function() {
    smashInit();
  }
});
  Bài viết hay nhất3
ko còn cách nào ngắn hơn hả bạn, dài quá
  Bài viết hay nhất4
thì code của nó dài như vậy mà bạn
  Bài viết hay nhất5

@KTV2 wrote:thì code của nó dài như vậy mà bạn
Bạn ơi mình cũng đang mún cài cái đó nhưng ko hiểu ý của bạn lắm, cái câu " cài vào chỗ nào bạn thích" có nghĩa là sao vậy? Nghe nó mơ hồ quá. Bạn có thể cho ví dụ minh họa được không ?
  Bài viết hay nhất6
Bạn có thể cho đoạn đó vào overall_header hoặc overall_footer_begin hoặc trong bất kì template nào
  Bài viết hay nhất7
test code chưa mà share thế bạn -_-
  Bài viết hay nhất8
mình vô cái trang đó rồi view ra chứ chưa thử, ngay cái câu
@hoang02hp wrote:ko còn cách nào ngắn hơn hả bạn, dài quá
là biết có thể code hoạt động được mà dài quá còn sử dụng hay không thì chưa test
  Bài viết hay nhất9
Cho em hỏi code này để làm gì vậy?
P/s: Em lia chuột vào mấy bóng đèn thì nó vỡ ra :'(
  Bài viết hay nhất10
Mình add vô nhưng dây đèn ko hết và rê chuột vào thì ko vỡ. Thanh toolbar che mất đèn, từ đầu tới cuối thì chỉ có ACP, Toolbar,..... còn bấm đc, còn lại đơ hết
demo: http://english-everyday.forumvi.com/
  Bài viết hay nhất11

@duythanhbt7321 wrote:Cho em hỏi code này để làm gì vậy?
P/s: Em lia chuột vào mấy bóng đèn thì nó vỡ ra :'(
Cái đèn này mục đích rê chuột vào là bị vỡ mà.
  Bài viết hay nhất12
Tạm thời bạn gỡ code ra để mình xem lại coi thiếu gì nhé, khi xong rồi mình sẽ đưa lên
  Bài viết hay nhất13
đã thay css, thêm vào js, bật js
Kết quả: ko bị đơ, còn đèn vẫn thế :((
  Bài viết hay nhất14

@hoang02hp wrote:đã thay css, thêm vào js, bật js
Kết quả: ko bị đơ, còn đèn vẫn thế :((
Bạn tạm thời xoa hết các code liên quan tới nó đi để mình xem lại coi thiếu cái gì nhé, khi nào xong mình sẽ đưa cho bạn
  Bài viết hay nhất15
có ai giúp mình được nữa ko đây :(
  Bài viết hay nhất16
Cho phép em đào mộ bài này (sắp tớ 25/12 oy)
Có ai giúp dc e hôn
You cannot reply to topics in this forum