效果体验：http://keleyi.com/a/bjad/uaq24pxt.htm

其中拖拽刮涂层效果使用jquery UI的draggable方法，请参考：http://keleyi.com/a/bjac/9dd21532ed1dbf23.htm

以下是源代码：

 <!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 />

 <a href="http://keleyi.com/a/bjad/uaq24pxt.htm" target="_blank">原文</a>

 </body>

 </html>

web前端：http://www.cnblogs.com/jihua/p/webfront.html

jQuery刮彩票兑奖效果的更多相关文章

  1. 简单入门canvas - 通过刮奖效果来学习

    一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...

  2. HTML5 Canvas实战之刮奖效果

    近年来由于移动设备对HTML5的较好支持,经常有活动用刮奖的效果,最近也在看H5方面的内容,就自己实现了一个,现分享出来跟大家交流. 1.效果 2.原理 原理很简单,就是在刮奖区添加两个canvas, ...

  3. HTML5实现刮奖效果

    原文:HTML5实现刮奖效果 要实现刮奖效果,最重要的是要找到一种方法:当刮开上层的涂层是就能看到下层的结果.而HTML5的canvas API中有一个属性globalCompositeOperati ...

  4. 使用MDScratchImageView实现刮奖效果

    使用MDScratchImageView实现刮奖效果 https://github.com/moqod/iOS-Scratch-n-See 最终效果: 其实这是使用了别人的东西而已:) 源码: // ...

  5. [AHOI2001]彩票摇奖

    [AHOI2001]彩票摇奖 题目描述 为了丰富人民群众的生活.支持某些社会公益事业,北塔市设置了一 项彩票.该彩票的规则是: (1) 每张彩票上印有 7 个各不相同的号码,且这些号码的取指范围为 1 ...

  6. P1074 彩票摇奖

    题目描述 为了丰富人民群众的生活.支持某些社会公益事业,北塔市设置了一项彩票.该彩票的规则是: (1) 每张彩票上印有 7 个各不相同的号码,且这些号码的取指范围为 1~33. (2) 每次在兑奖前都 ...

  7. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  8. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  9. jQuery图片旋转展示收缩效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Over：窗口函数（滑动聚合）

    Over 窗口函数在Select 子句中,对查询的结果集进行“滑动-聚合”运算:如果使用count,那么基于滑动窗口的聚合语义同 base+1 累加:如果使用sum,那么基于滑动窗口的聚合语义等同于数 ...

  2. A Simple OpenCASCADE Qt Demo-occQt

    A Simple OpenCASCADE Qt Demo-occQt eryar@163.com Abstract. OpenCASCADE have provided the Qt samples ...

  3. php面向对象基础

    1.类 由众多对象抽象出来的 它包含了对象通用的特性 2.对象 一切皆对象 它是由实例化出来的 例: 求两个圆之间阴影的面积 <!DOCTYPE html PUBLIC "-//W3C ...

  4. 【商业源码】生日大放送-Newlife商业源码分享

    今天是农历六月二十三,是@大石头的生日,记得每年生日都会有很劲爆的重量级源码送出,今天Newlife群和论坛又一次疯狂了,吃水不忘挖井人,好的东西肯定要拿到博客园分享.Newlife组件信息: 论坛: ...

  5. Util应用程序框架公共操作类(十):可空值类型扩展

    当你使用可空的值类型时,你会发现取值很不方便,比如Guid? obj,你要从obj中获取值,可以使用Value属性obj. Value,但obj可能为null,这时候就会抛出一个异常. 可空值类型提供 ...

  6. 通过配置http拦截器，来进行ajax请求验证用户登录的页面跳转

    在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...

  7. Objective-C中的深拷贝和浅拷贝

    在Objective-C中对象之间的拷贝分为浅拷贝和深拷贝.说白了,对非容器类的浅拷贝就是拷贝对象的地址,对象里面存的内容仍然是一份,没有新的内存被分配.对非容器类的深拷贝就是重写分配一块内存,然后把 ...

  8. ASP.NET Web API 异常日志记录

    如果在 ASP.NET MVC 应用程序中记录异常信息,我们只需要在 Global.asax 的 Application_Error 中添加代码就可以了,比如: public class MvcApp ...

  9. 关于有默认值的字段在用EF做插入操作时的思考（续）

    问题描述 今天下午(看现在这时间,应该是昨天下午了哈),园友 choon 写了这样一篇博文<关于有默认值的字段在用EF做插入操作时的思考>. 博文内容主要记录的是 choon 使用 EF ...

  10. 1Z0-053 争议题目解析701

    1Z0-053 争议题目解析701 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 701.A user receives the following error while per ...