效果体验：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. StartUML的基础的使用，用例图，序列图

    转载地址  http://blog.csdn.NET/tianhai110 (下面参考了原博主的内容,也加入自己的内容,为了自己脑补,也方便其他看到的人脑补) 使用StartUML绘制用例图:     ...

  2. 【Win10 开发】读取PDF文档

    关于用来读取PDF文档的内容的API,其实在Win8.1的时候就有,不过没关系,既咱们讨论的是10的UAP,连同8.1的内容也包括进去,所以老周无数次强调:把以前的内容学好了,就可以在不学习任何新知识 ...

  3. 【转】WPF 单选的Checkbox

    今天同事要在DataGrid里用单选的Checkbox,我感觉很多余,因为正常DataGrid就可以单选,为什么还要加一列Checkbox,但是人家要求再那里,我就告诉他,可以用RadioButton ...

  4. 深入学习jQuery选择器系列第七篇——表单选择器

    × 目录 [1]表单元素 [2]对象属性 前面的话 无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的.jQuery专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素 表单 ...

  5. 深入理解javascript作用域系列第五篇——一张图理解执行环境和作用域

    × 目录 [1]图示 [2]概念 [3]说明[4]总结 前面的话 对于执行环境(execution context)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关 ...

  6. MVC实用架构设计（三）——EF-Code First（5）：二级缓存

    前言 今天我们来谈谈EF的缓存问题. 缓存对于一个系统来说至关重要,但是是EF到版本6了仍然没有见到有支持查询结果缓存机制的迹象.EF4开始会把查询语句编译成存储过程缓存在Sql Server中,据说 ...

  7. 认识AMD、CMD、UMD、CommonJS

    0.导言 JavaScript的生态系统一直在稳步增长,当各种组件混合使用时,就可能会发现不是所有的组件都能“和平共处”,为了解决这些问题,各种模块规范就出来了. 1.AMD(Asynchromous ...

  8. 应用程序框架实战十六:DDD分层架构之值对象（介绍篇）

    前面介绍了DDD分层架构的实体,并完成了实体层超类型的开发,同时提供了验证方面的支持.本篇将介绍另一个重要的构造块——值对象,它是聚合中的主要成分. 如果说你已经在使用DDD分层架构,但你却从来没有使 ...

  9. 小菜学习Winform（三）Socket点对点通信

    前言 Socket的英文原义是“孔”或“插座”,其实在网络编程中Socket就是这个意思,就像我们打电话,要首先知道对方的手机号一样,这个手机号就相当于一个Socket号.一个插座,在网络编程中就是i ...

  10. 条形码的应用三-----------从Excel文件中读取条形码

    条形码的应用三------从Excel文件中读取条形码 介绍 上一篇文章,我向大家展示了生成多个条形码并存储到Excel文件中的一个方法.后来我又有了个想法:既然条码插入到excel中了,我可不可以从 ...