jq动画设置图片抽奖

最新推荐文章于 2024-11-09 10:31:18 发布

weixin_30438813

最新推荐文章于 2024-11-09 10:31:18 发布

阅读量122

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/lin-white/p/8184556.html

版权

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

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

开始:

停止:

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

点击"again"归零:

css部分

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" οnclick="start()"></div>//按钮

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

js部分

　　　　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")
　　　　}
　　　}