圣诞节到了，祝大家圣诞快乐！
模拟抽奖体验效果：http://hovertree.com/texiao/jquerytree/3/
效果图如下：
祝大家圣诞节快乐！ http://www.cnblogs.com/jihua/p/Chrismas.html
代码如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>jquery随机抽奖 - 何问起</title><base target="_blank"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /><style>.mainHovertree,.beginHovertree,.endHovertree{width:30px;height:30px; border:solid silver 1px;display:inline-block;margin-left:5px; border-radius: 60px;padding: 30px 30px;} .mainHovertree{background-color:red}#resultHovertree{width:100px;height:100px;background-repeat:no-repeat} a{color:blue} </style> <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> </head> <body> <div> <h2>随机抽奖</h2> <div class="beginHovertree"></div><div class="endHovertree"></div><div class="mainHovertree"></div> <br /> <br /><input type="button" id="startHovertree" value="开始" /> <input type="button" id="stopHovertree" value="停止" style="display:none" /> <input type="button" id="replayHovertree" value="再来" style="display:none" /> <br /> <div id="resultHovertree"></div>第三个圆的颜色会自动改变。<br /> 点击开始按钮，第一个圆会获取第三个圆当时的颜色，并且第三个圆隐藏； <br />点击停止按钮，第三个圆会慢慢出现，当完全显示时的颜色赋给第二个圆。 <br />如果第一个和第二个圆颜色相同就中奖，否则没中奖。 <br /><br /><br /> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/jquery/8.htm">demo 1</a> <a href="http://hovertree.com/h/bjae/css3circle.htm">画圆</a> <a href="http://hovertree.com/h/bjae/bgbv6iy5.htm">原文</a> <br /> 本实践实用的jquery函数有toggle() ,show(),hide(),.css()等。 </div> <script> $(document).ready(function () { var int = self.setInterval("colorHoverTree()", 400) $("#startHovertr" + "ee").on("click", function () { $("#startHovertre" + "e").hide(); $(".beginHover" + "tree").css("background-color", $(".mainHo" + "vertree").css("background-color")); $(".mainHo" + "vertree").toggle(); $("#stopHov" + "ertree").show(); }) $("#stopHovertree").on("click", function () { $("#stopHovertr" + "ee").hide(); $(".mainH" + "overtree").toggle(2000, function () { $(".endHovertre" + "e").css("background-color", $(".mainHovert" + "ree").css("background-color")); if (($(".beginHo" + "vertree").css("background-color")) == ($(".endHovertree").css("background-color"))) { $("#resultHovertree").css("background-image", "url(images/zjhovertree.gif)") } else { $("#resultHov" + "ertree").css("background-image", "url(images/nohovertrees.jpg)") } $("#replayHo" + "vertree").show(); }); }) $("#replayHovert" + "ree").on("click", function () { $(this).hide(); $('.beginHov' + 'ertree').css("background-color", "white") $('.endHover' + "tree").css("background-color", "white") $("#resultHovertree").css("background-image", "url()") $("#startHo" + "vertree").show(); }) }); function colorHoverTree() { switch(hoverTreeRandom(3)) { case 1: $(".mainHover" + "tree").css("background-color", "red"); break; case 2: $(".mainHovertre" + "e").css("background-color", "green"); break; case 3: $(".mainHover" + "tree").css("background-color", "yellow"); break; } } function hoverTreeRandom(n){ return Math.floor(Math.random()*n+1) } </script> </body> </html>
