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 相关文章推荐
JQuery 学习笔记 选择器之二
Jul 23 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 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实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
详解PHP中的Traits
2015/07/29 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
分页栏的web标准实现
2011/11/01 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
关于vue 项目中浏览器跨域的配置问题
2020/11/10 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
Python Socket编程入门教程
2014/07/11 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
python绘制玫瑰的实现代码
2020/03/02 Python
python用什么编辑器进行项目开发
2020/06/17 Python
集体婚礼证婚词
2014/01/13 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
法律七进实施方案
2014/03/15 职场文书
个人委托书如何写
2014/09/25 职场文书
高考诚信考试承诺书
2015/04/29 职场文书