你的位置:首页 > 网页设计

[网页设计]祝圣诞节快乐好运气!


圣诞节到了,祝大家圣诞快乐!

模拟抽奖体验效果: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