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 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
javascript中的return和闭包函数浅析
Jun 06 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
js实现密码强度检验
Jan 15 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
Vue Components 数字键盘的实现
Sep 18 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
使用php清除bom示例
2014/03/03 PHP
php实现短信发送代码
2015/07/05 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
python文件操作之目录遍历实例分析
2015/05/20 Python
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python中的引用知识点总结
2019/05/20 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
python如何爬取动态网站
2020/09/09 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
大学活动总结模板
2014/07/10 职场文书
个人授权委托书范本
2014/09/14 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
医生个人年度总结
2015/02/28 职场文书