2种jQuery 实现刮刮卡效果


Posted in Javascript onFebruary 01, 2015

其中拖拽刮涂层效果使用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>

这里给大家分享的是十分常用的刮奖的特效代码,希望小伙伴们能够喜欢。

Javascript 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
百度移动版的url编码解码示例
Apr 29 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
JavaScript中函数声明与函数表达式的区别详解
Aug 18 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
JavaScript字符串对象
Jan 14 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 #Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 #Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 #Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 #Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 #Javascript
JavaScript插件化开发教程(六)
Feb 01 #Javascript
JavaScript插件化开发教程(五)
Feb 01 #Javascript
You might like
PHP 图片上传代码
2011/09/13 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Nuxt的路由动画效果案例
2020/11/06 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
Python Tkinter GUI编程入门介绍
2015/03/10 Python
浅谈MySQL中的触发器
2015/05/05 Python
理解Python垃圾回收机制
2016/02/12 Python
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
如何实现更换Jupyter Notebook内核Python版本
2020/05/18 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
科室工作个人总结的自我评价
2013/10/29 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
结婚保证书范文
2014/04/29 职场文书
平安工地建设方案
2014/05/06 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript