圣诞节到了，祝大家圣诞快乐！
模拟抽奖体验效果：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>
转载自：http://hovertree.com/h/bjae/bgbv6iy5.htm
更多： http://www.cnblogs.com/jihua/p/webfront.html
时间： 2024-08-17 08:37:35