欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

2种jQuery 实现刮刮卡效果

程序员文章站 2023-11-03 08:00:57
其中拖拽刮涂层效果使用jquery ui的draggable方法 以下是源代码: 代码如下:  

其中拖拽刮涂层效果使用jquery ui的draggable方法

以下是源代码:

代码如下:


 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "https://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
 <html xmlns="https://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 p{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 p{position:absolute;top:0px;right:0px;width:100%;height:20px;background:#ccc;}
 </style>
 <script type="text/javascript" src="https://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
 <script src="https://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 p").draggable({
 revert:function() {
 var a = $("#keleyi p").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 p").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>
 <p>说明:不支持ie6!</p>
 <p> </p>
 <p>效果一(拖拽灰条):</p>
 <p id="keleyi">
 <p></p>
 请完全刮开查看中奖结果。
 </p>
 <p> </p>
 <p>效果二(点击灰条):</p>
 <p id="layout2">
 <p></p>
 请完全刮开查看中奖结果。
 </p>
 <br />
 </body>
 </html>