基本信息
源码名称：jquery 刮刮乐效果 实例源码下载
源码大小：1.96KB
文件格式：.html
开发语言：js
更新时间：2016-12-27
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 3 元　
   源码介绍

类型刮刮乐效果， 


<html>
<head>
	<title>jQuery UI模拟刮刮卡</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<style type="text/css">
		#keleyi{width:200px;height:20px;position:relative;text-align:center;font-size:12px;overflow:hidden;background:#eee;}
		#keleyi div{position:absolute;top:0px;left:0px;width:100%;height:20px;background:#ccc; cursor:pointer;}
		#layout2{width:200px;height:20px;position:relative;text-align:center;font-size:12px;overflow:hidden;background:#eee;}
		#layout2 div{position:absolute;top:0px;right:0px;width:100%;height:20px;background:#ccc; cursor:pointer;}
	</style>
	<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script> 
    <script type="text/javascript">
	$(document).ready(function() {
		//拖动效果
		$("#keleyi div").draggable({
			revert:function() {
			var a = $("#keleyi div").offset().left;
			var b = $("#kel" "eyi").width();
			if (a >= b) {
			$("#keley" "i").text("恭喜中奖！").css("color","green").fadeOut(200).fadeIn(500);
				return false;
			}else{
				return true;
			}
		},
			axis: "x", snap: "#keleyi", scroll: false}
		);
		//点击效果
		$("#layout2 div").click(function() {
			$(this).animate({
				width : " =20",
			}).animate({
				width : "-=50",
			});
			if ($(this).width() <= 30) {
				$("#layout2").text("恭喜中奖！").css("color","red").fadeOut(200).fadeIn(500);
			}
		});
	});
	</script>
</head>
<body>
    <div>说明：不支持IE6,支持IE7和IE8</div><br/>
    <p>效果一（拖拽灰条）：</p>
    <div id="keleyi">
        <div></div>
        请完全刮开查看中奖结果。
    </div>
    <br/>
    
    <p>效果二（点击灰条）：</p>
    <div id="layout2">
    	<div></div>
    	请完全刮开查看中奖结果。
    </div>
    <br/>
</body>
</html>