jQuery刮彩票兑奖效果

效益体验:

2种jQuery 实现刮刮卡效果,jquery刮刮卡

里头拖拽刮涂层效果使用jquery UI的draggable方法

以下是源代码:

复制代码 代码如下:

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
 <html xmlns=”;
 <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=”;
 <script
src=””
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(“恭喜你获得四千万欧元大奖!”).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(“恭喜您收获伍仟万日币大奖!”).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>

那边给大家享用的是那一个常用的刮奖的特效代码,希望小同伴们能够欣赏。

达成刮刮卡效果,jquery刮刮卡
当中拖拽刮涂层效果使用jquery UI的draggable方法 以下是源代码: 复制代码
代码如下: !DOCTYPE html PUBLI…

里面拖拽刮涂层效果使用jquery UI的draggable方法

网页上有非常多拉住的操作,比方拖动树状列表,可牵引的图形等。

里头拖拽刮涂层效果使用jquery
UI的draggable方法,请参考:

以下是源代码:

1.原生拖放落成

以下是源代码:

复制代码 代码如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>jQuery UI Autocomplete - Default functionality</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="external nofollow" >
 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
 <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <style>
 .drag{
 width: 200px;
 height: 200px;
 background-color: red;
 position: absolute;
 left:0;
 top:0;
 }
 </style>
 <script>
 $(function() {
 var _move = false;//判断目标对象书否处于移动状态
 var _x, _y;//鼠标离控件左上角的相对x.y坐标
 $('.drag').click(function(event) {
 }).mousedown(function(e) {//当按下鼠标左键时
 _move = true;//标记移动为true,开始移动
 _x = e.pageX - parseInt($('.drag').css('left'));//得到左上角的x的位置
 _y = e.pageY - parseInt($('.drag').css('top'));//得到左上角的y的位置
 $('.drag').fadeTo('20', 0.5);//单击后开始拖动

 });

 $(document).mousemove(function(e) {//监听鼠标移动
 if(_move) {
 var x = e.pageX - _x;//计算移动的距离
 var y = e.pageY - _y;
 $('.drag').css({top:y, left:x});
 }
 }).mouseup(function() {
 _move = false;
 $('.drag').fadeTo('fast', 1);
 });
 });
 </script>
</head>
<body>
 <div class="drag"></div>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图