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

04.09.15 18:301

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!

04.09.15 19:482

KTV2

Chèn đoạn sau vào đâu bạn thích

Code:: <div id="lights" style="display: block;">  <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(); } });

04.09.15 20:113

hoang02hp

ko còn cách nào ngắn hơn hả bạn, dài quá

05.09.15 11:024

KTV2

thì code của nó dài như vậy mà bạn

05.09.15 11:255

ChauLe3

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 ?

05.09.15 12:196

KTV2

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

05.09.15 12:427

anhoang_qn

test code chưa mà share thế bạn -_-

05.09.15 14:378

KTV2

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

05.09.15 15:359

duythanhbt7321

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 :'(

05.09.15 15:3610

hoang02hp

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/

05.09.15 15:3711

hoang02hp

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à.

05.09.15 15:4412

KTV2

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

05.09.15 15:5413

hoang02hp

đã thay css, thêm vào js, bật js
Kết quả: ko bị đơ, còn đèn vẫn thế :((

05.09.15 16:0014

KTV2

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

05.09.15 16:1615

hoang02hp

có ai giúp mình được nữa ko đây :(

23.12.15 9:0316

hoang02hp

Cho phép em đào mộ bài này (sắp tớ 25/12 oy)
Có ai giúp dc e hôn