jQuery实现刮刮卡效果的实例代码和实现方法
- 更新时间：2019-11-23 17:58:54
- 编辑：程宜春
参考资料
- jQuery EasyUI开发指南 PDF 电子书 / 48.4 MB / 王波 推荐度：
- jQuery网页开发实例精解 PDF 电子书 / 57 MB / 黄格力 推荐度：
- 《HTML5+CSS3+jQuery应用之美》配套资源 配套资源 / 158.17 MB / [韩] Yamoo 著；武传海 译 推荐度：
- Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践 PDF 电子书 / 167.1 MB / 阮晓龙 推荐度：
- jQuery UI开发指南 PDF 电子书 / 6.02 MB / Eric Sarrion 推荐度：
正文内容
2种jQuery 实现刮刮卡效果
其中拖拽刮涂层效果使用jquery UI的draggable方法
以下是源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;}
#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;}
</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("恭喜您获得5000万美元大奖！").css("color","red").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("恭喜您获得5000万美元大奖！").css("color","red").fadeOut(200).fadeIn(500);
}
});
});
</script>
</head>
<body>
<div>说明：不支持IE6！</div>
<p> </p>
<p>效果一（拖拽灰条）：</p>
<div id="keleyi">
<div></div>
请完全刮开查看中奖结果。
</div>
<p> </p>
<p>效果二（点击灰条）：</p>
<div id="layout2">
<div></div>
请完全刮开查看中奖结果。
</div>
<br />
</body>
</html>
这里给大家分享的是十分常用的刮奖的特效代码，希望小伙伴们能够喜欢。
jQuery实例相关教程
-
jquery获取radio值实例
这篇文章主要介绍了jquery获取radio值实例,较为详细的总结了通过jQuery获取radio值的各种常用方法,需要的朋友可以参考下
发布时间：2019-08-28
-
jquery实现提示语淡入效果
本篇文章主要介绍了jquery实现提示语淡入效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
发布时间：2019-07-23
-
jQuery EasyUI开发指南
使用Java开发软件的开发人员一定会接触到前端开发，而前端开发有一个流行趋势，那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种
大小：48.4 MBjQuery电子书
-
jQuery Mobile从入门到精通
《jQuery Mobile从入门到精通》 一书以实例驱动的方式，用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识，并通过5个项目案例展现开发流程。全书分为4部分，共19章：第1部分为移动开
大小：168.7 MBjQuery
-
jQuery实战案例精粹
jQuery实战案例精粹 从Web开发的实际应用角度出发，结合当下热门的 jQuery插件技术，深入浅出地介绍了 jQuery高性能开发的技巧，是前端开发、设计人员的绝佳选择。 本书共 22章，介绍了 jQuer
大小：272 MBjQuery电子书
-
PHP与jQuery开发实例
这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格，探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目
大小：9.8 MBPHP开发
-
jQuery UI开发指南
《jQuery UI开发指南》 是jQuery UI的快速开发指南，全面介绍jQuery UI如何改进HTML页面展示，内容包括jQuery UI 1.8版本的下列扩展特性：选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历
大小：6.02 MB前端开发电子书
-
锋利的jQuery
《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版，事例选用全新升级的UI，编码更合乎词义化；提升jQueryMobile的章节目录；提升jQuery版本号转变的章节目录；提升jQuery特性提升和方法的章节目
大小：194.9 MBjQuery电子书
-
jQuery实战
jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员，jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员，无论起点如何。本书深入介绍了整个jQuery框架，此外
大小：99.0 MBjQuery电子书
-
Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践
本书是著名前端开发大牛阮晓龙老师爽作，HTML5、CSS3、jQuery、AJAX一站搞定，一本真正好学、实用又精彩的书，讲述了用HTML5 CSS3设计构建网站的必备知识，欢迎下载
大小：167.1 MBWeb前端电子书
