网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

jq小米排队特效

关注我吧
 2014/3/27 9:54:55 阅读次数:3596

昨天在抢红米的时候,发现红米的排队的特效挺好看的。然后就把他这个效果给弄了下来。自己写了个插件,调用方便。

其实就是根据背景图片的切换做成了类似动画的效果。(思路延伸:JS游戏方面应该可以引用这种特效,因为都是背景在切换)

效果图如下:

jq小米排队特效

源代码:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="http://www.86y.org/js/jquery.min.js"></script>
<title>js小米排队特效-幸凡学习网</title>
<style>
body,ul,li,h1,h2,h3,p{margin:0;padding:0}
ul,li{list-style:none}
body{font-size:14px;font-family:"Microsoft Yahei",sans-serif,arial,"Hiragino Sans GB";position:relative}
.modal{position:fixed!important;top:50%;left:50%;z-index:1050;width:450px;margin-left:-225px;margin-top:-200px;_position:absolute;_top:13%;_margin-top:0;background-color:#fff;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 3px 7px rgba(0,0,0,0.3);-moz-box-shadow:0 3px 7px rgba(0,0,0,0.3);box-shadow:0 3px 7px rgba(0,0,0,0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;outline:none;}
.modal-body{position:relative;max-height:400px;padding:15px;}.box-bg{width:100%;height:100%;position:absolute;top:0;left:0;background:#000;opacity:0.5;filter:alpha(opacity=50);}
.xm-dm-queue{width:900px;height:450px;margin-left:-450px;margin-top:-225px;}
.xm-dm-queue .modal-body{text-align:center;padding-top:30px}
.xm-dm-queue h3{margin:30px 0 15px;color:#333;font-size:54px;line-height:1}
.xm-dm-queue .queue-tip{color:#666;font-size:18px;line-height:24px;margin:0;}
.queue-animate{width:450px;margin:0 auto;position:relative}
.animate-mask{width:100px;height:200px;position:absolute;top:0}
.animate-mask-left{left:0;background-image:-webkit-linear-gradient(left,#fff 20%,rgba(255,255,255,0));background-image:-moz-linear-gradient(left,#fff 20%,rgba(255,255,255,0));background-image:-o-linear-gradient(left,#fff 20%,rgba(255,255,255,0));background-image:-ms-linear-gradient(left,#fff 20%,rgba(255,255,255,0));background-image:linear-gradient(to right,#fff 20%,rgba(255,255,255,0))}
.animate-mask-right{right:0;background-image:-webkit-linear-gradient(right,#fff 20%,rgba(255,255,255,0));background-image:-moz-linear-gradient(right,#fff 20%,rgba(255,255,255,0));background-image:-o-linear-gradient(right,#fff 20%,rgba(255,255,255,0));background-image:-ms-linear-gradient(right,#fff 20%,rgba(255,255,255,0));background-image:linear-gradient(to left,#fff 20%,rgba(255,255,255,0))}
.mitu-walk{width:450px;height:200px;margin:50px auto 0;background:url(http://p.www.xiaomi.com/open/131101/images/animate-mitu.png?4) repeat-x 0}
.input{position:relative;width:200px;margin:0 auto;}
.input a{position:absolute;top:-30px;color:#fff;background:#f60;padding:5px 20px;border-radius:3px;text-decoration:none;font-weight:bold;}
.input a:hover{background:#CC0000}
#astart{left:10px;}
#astop{right:10px;}
</style>
</head>

<body>
<div id="boxQueue" class="modal xm-dm-queue">
	<div class="modal-body">
		<h3>正在排队,请稍候喔!</h3>
		<p class="queue-tip">抱歉,由于访问人数太多导致服务器压力山大,请您耐心排队等待,<br>我们将在稍后告诉您排队结果。</p>
		<div class="queue-animate">
			<div class="mitu-walk" id="mituWalking"><div class="input"><a href="javascript:;" id="astart">走起</a><a href="javascript:;" id="astop">停止</a></div></div>
			<div class="animate-mask animate-mask-left"></div>
			<div class="animate-mask animate-mask-right"></div>
		</div>
	</div>
</div>
<script >
(function ($) {  
    var queueAnimateTimer;
	var a = 0;
    $.fn.starts= function () {
		return this.each(function () {  
  			var b = 200,
			c = function() {
				a -= 90,
				-900 >= a && (a = 0),
				$("#mituWalking").css({
					"background-position": a + "px 0"
				})
			};
			queueAnimateTimer = setInterval(c, b);
        });			
    },
	$.fn.stops=function () {
		clearInterval(queueAnimateTimer);
	}
})(jQuery);

$("#astart").click(function(){
	$("#astart").starts();
});
$("#astop").click(function(){
	$("#astop").stops();
});
	</script>
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭