jq动画设置图片抽奖

(因为自己是前端刚入门的小白所以中间出现很多问题,不过这对于我来说就是一次经验的积累)

预想效果:点击"开始",图片循环旋转,不是同时的效果,而是有一定的时间差.点击"开始"后,按钮变为"停止",点击"停止"图片依次停止显示为中奖号码,当中奖号码的最后一位数显示时,按钮变为"再次",并显示"中奖号码,隐藏中间4位,"再点击"再次",图片归零,按钮变为"开始",然后循环执行.实现多次抽奖效果.最后电话号码显示时中间四位隐藏.

开始:

 

停止:

 

again:显示"中奖号码"中间4位为星号*

点击"again"归零:

 

css部分

<style type="text/css">
　　* {margin: 0;padding: 0;}
　　.content {width: 80%;height: 400px;margin: 200px auto;position: relative;}
　　.num_box {width: 1486px;position: absolute;left: 23%;top: 5%;margin-left: -403px;z-index: 8;overflow: hidden;border: 1px solid;}
　　.num_bg {background: url(images/5.png) top center repeat-y;width: 122px;height: 150px;float: left;margin-right: 12px;}
　　.num {background: url(images/num2.png) top center repeat-y;width: 122px;height: 150px;float: left;margin-right: 12px}
　　.btn {width: 170px;height: 49px;line-height: 49px;text-align: center;position: absolute;bottom: 36%;right: 51%;cursor: pointer;}
　　#start {background: url(images/draw-02.png) no-repeat;}
　　#stop {background: url(images/draw-005.png) no-repeat;}
　　#again {background: url(images/draw-008.png) no-repeat;}
</style>

 html部分

<div class="content"> //内容容器div
　　<div class="num_box">//背景图片div
　　　　<div class="num_bg"></div>
　　　　<div class="num_bg"></div>
　　　　<div class="num_bg"></div>
　　　　<div class="num_bg"></div>
　　　　<div class="num_bg"></div>
　　　　<div class="num_bg"></div>
　　　　<div class="num_bg"></div>
　　　　<div class="num_bg"></div>
　　　　<div class="num_bg"></div>
　　　　<div class="num_bg"></div>
　　　　<div class="num_bg"></div>
　　</div>
　　<div class="num_box">//中奖号码的图片容器,图片作为背景图执行
　　　　<div class="num"></div>
　　　　<div class="num"></div>
　　　　<div class="num"></div>
　　　　<div class="num"></div>
　　　　<div class="num"></div>
　　　　<div class="num"></div>
　　　　<div class="num"></div>
　　　　<div class="num"></div>
　　　　<div class="num"></div>
　　　　<div class="num"></div>
　　　　<div class="num"></div>
　　</div>
　　<div id="start" class="btn" onclick="start()"></div>//按钮

　　<div class="show"></div>//电话号码显示
</div>

 js部分

<script type="text/javascript">
　　　　var u = 150;//ImageWidth
　　　　var c = '1 3 3 4 5 6 8 9 0 9 0'//固定的数据
　　　　var btn = $(".btn");
　　　　function start() {
　　　　　　var Html = btn.attr('id');//获取按钮的当前id名
　　　　　　if(Html == "start") {
　　　　　　　　startRun();//调用函数
　　　　　　　　btn.attr('id', 'stop');//修改按钮的id名
　　　　　　} else if(Html == "stop") {
　　　　　　　　stop(c);//调用函数
　　　　　　} else {
　　　　　　　　btn.attr('id', 'start');//修改按钮的id名
　　　　　　}
　　　　}
　　　//点击"开始"执行的开始函数
　　　function startRun() {
　　　　$(".num").each(function(index) {
　　　　　　var _num1 = $(this);
　　　　　　_animate(_num1, u * 10 * (index + 1), 10)//传参调用,在编辑器编辑时,将该注释删除,否则会报错
　　　　})

　　　　function _animate(el, backgroundPositionY, speed) {//封装的动画函数,el当前的元素

　　　　　　el.animate({
　　　　　　　　backgroundPositionY: backgroundPositionY//位置
　　　　　　}, {
　　　　　　　　complete: function() { //complete回调函数
　　　　　　　　speed: speed,//速度
　　　　　　　　el.css({
　　　　　　　　　　backgroundPositionY: 0//元素css样式位置归零
　　　　　　　　});
　　　　　　　_animate(el, backgroundPositionY, speed); //自身调用
　　　　　　}
　　　　}, "liner")
　　}
　}

　　//点击"停止"
　　function stop(custNo) {
　　　　var num_arr = (custNo + ' ').split(' ');//将字符串分割成数组
　　　　$(".num").each(function(index) {
　　　　var _num = $(this);
　　　　setTimeout(function() {
　　　　_num.stop(true,false); //停止动画
　　　　_num.animate({
　　　　　　backgroundPositionY: (u * 10 * (index + 1)) - (u * num_arr[index])
　　　　}, {
　　　　　　complete: function() {
　　　　　　　　if(index == 10) {
　　　　　　　　　　if(!_num.is(":animated")) {

　　　　　　　　　　$(".show").html(custNo.substring(0,3)+"****"+custNo.substring(8,11));//手机号码中间四位显示为星号
　　　　　　　　　　btn.attr('id', 'again');
　　　　　　　　　　　　btn.click(function() {
　　　　　　　　　　　　　　Again();
　　　　　　　　　　　　})
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}, 400 * (index + 1));
　　}, 800 * index + 1000); //1000 (指定数据依次的出现速度) index + 100(控制点击停止之后,指定数据出现的时间)
　　});
　}

　　//点击"再次"

　　function Again() {
　　　　$(".num").each(function(index) {
　　　　var _num2 = $(this);
　　　　_num2.stop(true, true);
　　　　_num2.animate({
　　　　backgroundPositionY: (u * 10)
　　　　})
　　　})
　　}
</script>

 在本次修改中不会的知识点

1.backgroundPositionY :backgroundPositionY 属性设置 background-image 的垂直位置。

语法:Object.style.backgroundPositionY=position

方法一:

function changePosition()
{
　　document.body.style.backgroundPositionY="bottom";
}

 方法二:

　　tank.style.backgroundPositionY="80px";  

2.jquery的animate()动画:执行css属性集的自定义动画

http://www.runoob.com/jquery/eff-animate.html 菜鸟教程的动画基本及css属性地址

http://www.jb51.net/article/58919.htm 本文章中用到的动画回调函数地址

将速度,回调函数,队列等都要放到大括号{}中

代码如下:

$("div").animate( {width:"1000px"}, {queue:false, duration:1000,complete:function(){alert("ok")}})

详解:queue参数可以规定动画是否加入动画队列执行，如果进入动画队列，将按照顺序执行，也就是第一个动画执行完成之后，队列中的第二个动画再执行，以此类推。

　　 如果queue参数值为true就是将动画加入队列执行，否则就是不加入队列。
　　duration参数就是定义动画的持续时间。
　　complete参数定义动画的回调函数。

 

　　　　function startRun() {
　　　　　　$(".num").each(function(index) {
　　　　　　　　var _num1 = $(this);
　　　　　　　　_animate(_num1, u * 10 * (index + 1), 10)//传参调用,在编辑器编辑时,将该注释删除,否则会报错
　　　　　　})

 

　　　　　　function _animate(el, backgroundPositionY, speed) {//封装的动画函数,el当前的元素

 

　　　　　　　　el.animate({
　　　　　　　　　　backgroundPositionY: backgroundPositionY//位置
　　　　　　　　}, {
　　　　　　　　　　complete: function() { //complete回调函数
　　　　　　　　　　speed: speed,//速度
　　　　　　　　　　el.css({
　　　　　　　　　　　　backgroundPositionY: 0//元素css样式位置归零
　　　　　　　　　　});
　　　　　　　　　_animate(el, backgroundPositionY, speed); //自身调用
　　　　　　　　}
　　　　　　}, "liner")
　　　　}
　　　}

 

stop()方法

stop()在语法上有两个参数，分别都是Boolean布尔值。且都是可选的，但是也有规定，如下：

$(selector).stop(stopAll,goToEnd)

参数：（默认情况下，不写参数，则会被认为两个参数都是false。）

stopAll:可选。规定是否停止被选元素的所有加入队列的动画。意思就是如果该参数值为true，则会停止所有后续动画或事件。如果该参数值为false，则只停止被选元素当前执行的动画，后续动画不受影响。因此，该参数一般都为false。

goToEnd：可选。规定是否允许完成当前动画，该参数只能在设置了stopAll参数时使用。那么goToEnd参数就有两个选择了，一个是false，一个是true。一般都为true。意思就是允许完成当前动画。