经验分享程序开发文档资料数据资源其它资源

jQuery手机摇一摇抽油卡代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery手机摇一摇抽油卡代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery手机摇一摇抽油卡代码

HTML代码(index.html):

<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>jQuery手机摇一摇抽油卡代码</title>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/index.css">
<link type="text/css" rel="stylesheet" href="css/bottom.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/alert.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

</head>
<body>
<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12 topback">
		    <div class="toplogo">
				<img src="images/top.png">
			</div>
			<div class="yuanpan">
				<img src="images/yuanpan.png" id="yuanpan">
				<div class="hengqu">
					<img src="images/22.png" id="hengqu1">
					<img src="images/10.png" id="hengqu2">
					<img src="images/hengqu.png" id="hengqu3">					
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 center">
		    <div class="jihui">
				<p>你还有<span>5</span>次摇奖机会</p>
			</div>
			<div class="last">
				<div class="bd">
					<ul id="showloop">
						<li><p>好惊喜，黄鼠狼刚刚摇到&nbsp;<span>矿泉水1</span></p></li>
						<li><p>好惊喜，黄鼠狼刚刚摇到&nbsp;<span>矿泉水2</span></p></li>
						<li><p>好惊喜，黄鼠狼刚刚摇到&nbsp;<span>矿泉水3</span></p></li>
						<li><p>好惊喜，黄鼠狼刚刚摇到&nbsp;<span>矿泉水4</span></p></li>
					</ul>
				</div>
			</div>
			<script>
			jQuery(".last").slide({mainCell:".bd ul",autoPage:true,effect:"topLoop",autoPlay:true,pnLoop:false});
			</script>
		</div>
	</div>
</div>
<!-- 摇一摇 -->
<script type="text/javascript">	
	init();
	var AJAX_RETURN=true;
	var SHAKE_THRESHOLD = 2000;
	var last_update = 0;
	var x = y = z = last_x = last_y = last_z = 0;
	function init() {
	    if (window.DeviceMotionEvent) {
	        window.addEventListener('devicemotion', deviceMotionHandler, false);
	    } else {
	        alert('not support mobile event');
	    }
	}
	function deviceMotionHandler(eventData) {
	    var acceleration = eventData.accelerationIncludingGravity;
	    var curTime = new Date().getTime();
	    if ((curTime - last_update) > 100) {
	        var diffTime = curTime - last_update;
	        last_update = curTime;
	        x = acceleration.x;
	        y = acceleration.y;
	        z = acceleration.z;
	        var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;	
	        if (speed > SHAKE_THRESHOLD) {
	        	$(".container img").addClass("conanima");
	        	if(AJAX_RETURN){
				    autoPlay();
	        		yaoyiyao();  
	        	}
	        }
	        last_x = x;
	        last_y = y;
	        last_z = z;
	    }
	}
    function yaoyiyao(){
	   AJAX_RETURN=false;
	   alert('处理摇一摇后的操作！');
	   AJAX_RETURN=true;
	}	
	function autoPlay(){
		var myAuto = document.getElementById('myaudio');
		myAuto.play();
	}
</script>
<!-- 圆盘旋转 -->
<script type="text/javascript">
    var Du = 0;
    function fransform(){
        Du++;
        var Objnode = document.getElementById('yuanpan');
        Objnode.setAttribute('style','-webkit-transform:rotate('+ Du +'deg); -webkit-transform-origin: 50% 50%;');
        if(Du == 360){ Du = 0; }
    }
	$(document).ready(function(){
		setInterval(fransform,70);
	}); 
</script>
<!-- 弹出填写车牌号 -->
<div class="modal fade" id="address">
  <div class="modal-dialog">
      <div class="close" data-dismiss="modal" aria-label="Close"></div>
      <div class="modalbody">	      
        <form class="form-horizontal">
	    <div class="form-group">
		      <select id="carNum_0">
				<option value="贵">贵</option>
				<option value="京">京</option>			
				<option value="津">津</option>			
				<option value="黑">黑</option>			
				<option value="吉">吉</option>			
				<option value="辽">辽</option>			
				<option value="冀">冀</option>			
				<option value="豫">豫</option>			
				<option value="鲁">鲁</option>			
				<option value="晋">晋</option>			
				<option value="陕">陕</option>			
				<option value="蒙">蒙</option>			
				<option value="宁">宁</option>			
				<option value="甘">甘</option>			
				<option value="新">新</option>			
				<option value="青">青</option>			
				<option value="藏">藏</option>			
				<option value="鄂">鄂</option>			
				<option value="皖">皖</option>			
				<option value="苏">苏</option>			
				<option value="沪">沪</option>			
				<option value="浙">浙</option>			
				<option value="闵">闵</option>			
				<option value="湘">湘</option>			
				<option value="赣">赣</option>			
				<option value="川">川</option>			
				<option value="渝">渝</option>			
				<option value="云">云</option>			
				<option value="粤">粤</option>			
				<option value="桂">桂</option>			
				<option value="琼">琼</option>			
			  </select>
			  <select id="carNum_1">
				<option value="A">A</option>
				<option value="B">B</option>			
				<option value="C">C</option>			
				<option value="D">D</option>			
				<option value="E">E</option>			
				<option value="F">F</option>			
				<option value="G">G</option>			
				<option value="H">H</option>			
				<option value="I">I</option>			
				<option value="J">J</option>			
				<option value="K">K</option>			
				<option value="L">L</option>			
				<option value="M">M</option>			
				<option value="N">N</option>			
				<option value="O">O</option>			
				<option value="P">P</option>			
				<option value="Q">Q</option>			
				<option value="R">R</option>			
				<option value="S">S</option>			
				<option value="T">T</option>			
				<option value="U">U</option>			
				<option value="V">V</option>			
				<option value="W">W</option>			
				<option value="X">X</option>			
				<option value="Y">Y</option>			
				<option value="Z">Z</option>			
			  </select>
		      <input id="carNum" placeholder="车牌号" type="email">
		</div>
		<div class="form-btn">	  		
		      <button type="button" class="btn btn-primary btn-lg btn-block" id="saveaddress">保存</button>
	    </div>		
		<input type="hidden" id="station_id" value="${station_id}">	
		</form>
      </div>	  
  </div>
</div>
<script>
$(document).ready(function(){
	$('#address').modal('toggle');
}); 
</script>
<!--  底部菜单  -->
<div class="container-fluid menu">
    <div class="outimg row"><img src="images/bottom.png"></div>
	<div class="row">	        
		<div class="col-xs-3" url=""></div>
		<div class="col-xs-3" url=""></div>
		<div class="col-xs-3" url=""></div>
		<div class="col-xs-3" url=""></div>
	</div>
</div>
<script>
   $(function(){
      $(".menu .col-xs-3").click(function(){
	     var url=$(this).attr("url");
		 location.href=url;
	  });
   });
</script>
<audio id="myaudio" src="images/5018.mp3" controls="controls" hidden="true">
</body>
</html>

JS代码(alert.js):

document.writeln("<style type=\"text\/css\">");
	document.writeln("");
	document.writeln(".window{
	");
	document.writeln("width:290px;
	");
	document.writeln("position:fixed;
	");
	document.writeln("display:none;
	");
	document.writeln("bottom:30px;
	");
	document.writeln("left:50%;
	");
	document.writeln(" z-index:9999999;
	");
	document.writeln("margin:-50px auto 0 -145px;
	");
	document.writeln("padding:2px;
	");
	document.writeln("border-radius:0.6em;
	");
	document.writeln("-webkit-border-radius:0.6em;
	");
	document.writeln("-moz-border-radius:0.6em;
	");
	document.writeln("background-color:#ffffff;
	");
	document.writeln("-webkit-box-shadow:0 0 10px rgba(0,0,0,0.5);
	");
	document.writeln("-moz-box-shadow:0 0 10px rgba(0,0,0,0.5);
	");
	document.writeln("-o-box-shadow:0 0 10px rgba(0,0,0,0.5);
	");
	document.writeln("box-shadow:0 0 10px rgba(0,0,0,0.5);
	");
	document.writeln("font:14px\/1.5 Microsoft YaHei,Helvitica,Verdana,Arial,san-serif;
	");
	document.writeln("}
");
	document.writeln(".window .title{
	");
	document.writeln("");
	document.writeln("background-color:#A3A2A1;
	");
	document.writeln("line-height:26px;
	");
	document.writeln(" padding:5px 5px 5px 10px;
	");
	document.writeln("color:#ffffff;
	");
	document.writeln("font-size:16px;
	");
	document.writeln("border-radius:0.5em 0.5em 0 0;
	");
	document.writeln("-webkit-border-radius:0.5em 0.5em 0 0;
	");
	document.writeln("-moz-border-radius:0.5em 0.5em 0 0;
	");
	document.writeln("background-image:-webkit-gradient(linear,left top,left bottom,from( #585858 ),to( #565656 ));
	\/* Saf4+,Chrome *\/");
	document.writeln("background-image:-webkit-linear-gradient(#585858,#565656);
	\/* Chrome 10+,Saf5.1+ *\/");
	document.writeln("background-image:-moz-linear-gradient(#585858,#565656);
	\/* FF3.6 *\/");
	document.writeln("background-image:-ms-linear-gradient(#585858,#565656);
	\/* IE10 *\/");
	document.writeln("background-image:-o-linear-gradient(#585858,#565656);
	\/* Opera 11.10+ *\/");
	document.writeln("background-image:linear-gradient(#585858,#565656);
	");
	document.writeln("");
	document.writeln("}
");
	document.writeln(".window .content{
	");
	document.writeln("min-height:80px;
	");
	document.writeln("margin:0px;
	");
	document.writeln("overflow:auto;
	");
	document.writeln("padding:10px;
	");
	document.writeln("background:linear-gradient(#FBFBFB,#EEEEEE) repeat scroll 0 0 #FFF9DF;
	");
	document.writeln(" color:#222222;
	");
	document.writeln(" text-shadow:0 1px 0 #FFFFFF;
	");
	document.writeln("border-radius:0 0 0.6em 0.6em;
	");
	document.writeln("-webkit-border-radius:0 0 0.6em 0.6em;
	");
	document.writeln("-moz-border-radius:0 0 0.6em 0.6em;
	");
	document.writeln("}
");
	document.writeln(".window #txt{
	");
	document.writeln("min-height:30px;
	font-size:16px;
	line-height:22px;
	");
	document.writeln("}
");
	document.writeln(".window .txtbtn{
	");
	document.writeln("");
	document.writeln("background:#f1f1f1;
	");
	document.writeln("background-image:-webkit-gradient(linear,left top,left bottom,from( #DCDCDC ),to( #f1f1f1 ));
	\/* Saf4+,Chrome *\/");
	document.writeln("background-image:-webkit-linear-gradient( #ffffff,#DCDCDC );
	\/* Chrome 10+,Saf5.1+ *\/");
	document.writeln("background-image:-moz-linear-gradient( #ffffff,#DCDCDC );
	\/* FF3.6 *\/");
	document.writeln("background-image:-ms-linear-gradient( #ffffff,#DCDCDC );
	\/* IE10 *\/");
	document.writeln("background-image:-o-linear-gradient( #ffffff,#DCDCDC );
	\/* Opera 11.10+ *\/");
	document.writeln("background-image:linear-gradient( #ffffff,#DCDCDC );
	");
	document.writeln("border:1px solid #CCCCCC;
	");
	document.writeln("border-bottom:1px solid #B4B4B4;
	");
	document.writeln("color:#555555;
	");
	document.writeln("font-weight:bold;
	");
	document.writeln("text-shadow:0 1px 0 #FFFFFF;
	");
	document.writeln("border-radius:0.6em 0.6em 0.6em 0.6em;
	");
	document.writeln("display:block;
	");
	document.writeln("width:100%;
	");
	document.writeln("box-shadow:0 1px 3px rgba(0,0,0,0.2);
	");
	document.writeln("text-overflow:ellipsis;
	");
	document.writeln("white-space:nowrap;
	");
	document.writeln("cursor:pointer;
	");
	document.writeln("text-align:windowcenter;
	");
	document.writeln("font-weight:bold;
	");
	document.writeln("font-size:18px;
	");
	document.writeln("padding:6px;
	");
	document.writeln("margin:10px 0 0 0;
	");
	document.writeln("}
");
	document.writeln(".window .txtbtn:visited{
	");
	document.writeln("background-image:-webkit-gradient(linear,left top,left bottom,from( #ffffff ),to( #cccccc ));
	\/* Saf4+,Chrome *\/");
	document.writeln("background-image:-webkit-linear-gradient( #ffffff,#cccccc );
	\/* Chrome 10+,Saf5.1+ *\/");
	document.writeln("background-image:-moz-linear-gradient( #ffffff,#cccccc );
	\/* FF3.6 *\/");
	document.writeln("background-image:-ms-linear-gradient( #ffffff,#cccccc );
	\/* IE10 *\/");
	document.writeln("background-image:-o-linear-gradient( #ffffff,#cccccc );
	\/* Opera 11.10+ *\/");
	document.writeln("background-image:linear-gradient( #ffffff,#cccccc );
	");
	document.writeln("}
");
	document.writeln(".window .txtbtn:hover{
	");
	document.writeln("background-image:-webkit-gradient(linear,left top,left bottom,from( #ffffff ),to( #cccccc ));
	\/* Saf4+,Chrome *\/");
	document.writeln("background-image:-webkit-linear-gradient( #ffffff,#cccccc );
	\/* Chrome 10+,Saf5.1+ *\/");
	document.writeln("background-image:-moz-linear-gradient( #ffffff,#cccccc );
	\/* FF3.6 *\/");
	document.writeln("background-image:-ms-linear-gradient( #ffffff,#cccccc );
	\/* IE10 *\/");
	document.writeln("background-image:-o-linear-gradient( #ffffff,#cccccc );
	\/* Opera 11.10+ *\/");
	document.writeln("background-image:linear-gradient( #ffffff,#cccccc );
	");
	document.writeln("}
");
	document.writeln(".window .txtbtn:active{
	");
	document.writeln("background-image:-webkit-gradient(linear,left top,left bottom,from( #cccccc ),to( #ffffff ));
	\/* Saf4+,Chrome *\/");
	document.writeln("background-image:-webkit-linear-gradient( #cccccc,#ffffff );
	\/* Chrome 10+,Saf5.1+ *\/");
	document.writeln("background-image:-moz-linear-gradient( #cccccc,#ffffff );
	\/* FF3.6 *\/");
	document.writeln("background-image:-ms-linear-gradient( #cccccc,#ffffff );
	\/* IE10 *\/");
	document.writeln("background-image:-o-linear-gradient( #cccccc,#ffffff );
	\/* Opera 11.10+ *\/");
	document.writeln("background-image:linear-gradient( #cccccc,#ffffff );
	");
	document.writeln("border:1px solid #C9C9C9;
	");
	document.writeln("border-top:1px solid #B4B4B4;
	");
	document.writeln("box-shadow:0 1px 4px rgba(0,0,0,0.3) inset;
	");
	document.writeln("}
");
	document.writeln("");
	document.writeln(".window .title .close{
	");
	document.writeln("float:right;
	");
	document.writeln("background-image:url(\"data:image\/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACTSURBVEhL7dNtCoAgDAZgb60nsGN1tPLVCVNHmg76kQ8E1mwv+GG27cestQ4PvTZ69SFocBGpWa8+zHt\/Up+IN+MhgLlUmnIE1CpBQB2COZibfpnXhHFaIZkYph0SOeeK\/QJ8o7KOek84fkCWSBtfL+Ny2MPpCkPFMH6PWEhWhKncIyEk69VfiUuVhqJefds+YcwNbEwxGqGIFWYAAAAASUVORK5CYII=\");
	");
	document.writeln("width:26px;
	");
	document.writeln("height:26px;
	");
	document.writeln("display:block;
	");
	document.writeln("}
");
	document.writeln("<\/style>");
	document.writeln("<div class=\"window\" id=\"windowcenter\">");
	document.writeln("<div id=\"title\" class=\"title\">消息提醒<span class=\"close\" id=\"alertclose\"><\/span><\/div>");
	document.writeln("<div class=\"content\">");
	document.writeln(" <div id=\"txt\"><\/div>");
	document.writeln(" <input type=\"button\" value=\"确定\" id=\"windowclosebutton\" name=\"确定\" class=\"txtbtn\">");
	document.writeln("<\/div>");
	document.writeln("<\/div>");
	$(document).ready(function (){
	$("#windowclosebutton").click(function (){
	$("#windowcenter").slideUp(500);
}
);
	$("#alertclose").click(function (){
	$("#windowcenter").slideUp(500);
}
);
}
);
	function alert(title){
	$("#windowcenter").slideToggle("slow");
	$("#txt").html(title);
	setTimeout('$("#windowcenter").slideUp(500)',8000);
}

CSS代码(index.css):

body{background:#f1f3c2;overflow:hidden;}
select{height:35px;width:60px;padding-left:0.5em;}
input{position:relative;width:45%;height:35px;padding-left:0.5em;top:-1px;}
.topback{background:url("../images/indexback.png");background-repeat:no-repeat;background-size:100%;background-position:50% 0%;background-attachment:fixed;text-align:center;}
.topback .toplogo{max-width:400px;margin:10 auto;padding:0 10px;}
.topback .toplogo img{width:100%;}
.topback .yuanpan{max-width:400px;padding:25px 10px 0;margin:0 auto;overflow:hidden;}
.topback .yuanpan img{width:90%;}
.topback .yuanpan .hengqu{position:relative;text-align:center;}
.topback .yuanpan .hengqu img{display:block;margin:0 auto;}
.topback .yuanpan .hengqu img#hengqu1{width:150px;}
.topback .yuanpan .hengqu img#hengqu2{position:relative;top:-80px;width:80px;}
.topback .yuanpan .hengqu img#hengqu3{width:200px;position:relative;top:-90px;}
@media screen and (max-height:2000px){.topback .yuanpan .hengqu{top:-250px;}
.topback .yuanpan .hengqu img#hengqu1{width:190px;}
.topback .yuanpan .hengqu img#hengqu2{position:relative;top:-100px;width:105px;}
.topback .yuanpan .hengqu img#hengqu3{width:240px;position:relative;top:-115px;}
.topback .yuanpan{height:640px;}
}
@media screen and (max-height:740px){.topback .yuanpan .hengqu{top:-250px;}
.topback .yuanpan .hengqu img#hengqu1{width:190px;}
.topback .yuanpan .hengqu img#hengqu2{position:relative;top:-100px;width:105px;}
.topback .yuanpan .hengqu img#hengqu3{width:240px;position:relative;top:-115px;}
.topback .yuanpan{height:440px;}
}
@media screen and (max-height:630px){.topback .yuanpan .hengqu{top:-225px;}
.topback .yuanpan .hengqu img#hengqu1{width:175px;}
.topback .yuanpan .hengqu img#hengqu2{position:relative;top:-100px;width:95px;}
.topback .yuanpan .hengqu img#hengqu3{width:230px;position:relative;top:-107px;}
.topback .yuanpan{height:390px;}
}
@media screen and (max-height:570px){.topback .yuanpan .hengqu{top:-190px;}
.topback .yuanpan .hengqu img#hengqu1{width:150px;}
.topback .yuanpan .hengqu img#hengqu2{position:relative;top:-80px;width:80px;}
.topback .yuanpan .hengqu img#hengqu3{width:200px;position:relative;top:-90px;}
.topback .yuanpan{height:345px;}
}
@media screen and (max-height:480px){.topback .yuanpan{height:293px;}
}
.center{position:relative;top:-20px;text-align:center;}
.center .jihui p{color:#aebc4e;font-size:1.5em;word-spacing:8px;letter-spacing:1px;}
.center .jihui span{color:#f43b23;}
.center .last{background:#8e8f72;width:95%;margin:0 auto;padding-top:5px;padding-bottom:5px;}
.center .last p{margin:0;color:#fff;font-size:1.3em;word-spacing:8px;letter-spacing:1px;}
.center .last span{color:#f43b23;}
.modal{margin-top:50px;}
.modal-dialog{background:url(../images/modalback.png);background-size:100%;background-repeat:no-repeat;vertical-align:middle;max-width:400px;margin:0 auto;}
.modalbody{position:relative;text-align:center;padding:0 30px;}
.modalbody select,.modalbody input{border-color:#d7230e;border-radius:3px;}
.modal-title{padding-left:35px;text-align:center;font-size:1.5em;}
.form-btn{padding:0 25px;margin-top:25px;}
.form-btn .btn-primary{color:#fff;background-color:#d7230e;border-color:#d7230e;padding:5px 10px;}
@media screen and (max-width:2000px){.modal-dialog{height:600px;}
.modalbody{top:130px;}
.modal-dialog .close{position:relative;width:30px;height:30px;top:55px;right:30px;}
}
@media screen and (max-width:450px){.modal-dialog{height:400px;}
.modalbody{top:130px;}
.modalbody{padding:0 50px;}
}
@media screen and (max-width:400px){.modal-dialog{height:300px;}
.modalbody{top:130px;}
.modalbody{padding:0 50px;}
}
@media screen and (max-width:350px){.modal-dialog{height:250px;}
.modalbody{top:105px;padding:0 55px;}
.form-btn{padding:0px;margin-top:15px;}
.modal-dialog .close{position:relative;width:30px;height:30px;top:40px;right:20px;}
.center .last p{font-size:1em;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
616.39 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
616.39 KB
立即下载
康春霄
了解
打赏作者 鼓励作者
jquery特效4
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章