收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1063|回复: 1

[jquery] 点击出现动画,点一次出一个,最多不超三个 超过的等三个中的其中一个执行完再执行

[复制链接]
发表于 2016-10-17 18:33:04 | 显示全部楼层 |阅读模式
<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
        function resize(){
    var dw=750;
    var cw=document.documentElement.clientWidth;
    var rem=cw/dw*100;
    document.documentElement.style.fontSize=rem+"px";
        }
        resize();
        window.onresize = function(){
            resize();
        }
        </script>
        <style>
                .bigbox{
                        display: none;
                }
        </style>
</head>
<body>
        <button>点击</button>
        <div class="waiwei"></div>
</body>
<script src="jquery-1.11.3.js"></script>
<script>
/*var donghua=[];
var xin=[]
var dislit=function(){
        function a (){
                创建
        }
        a()
        var stop=setInterval(function(){
                动画
        },20)
}
donghua.push(dislit)

var stop=setInterval(function(){
        if(xin.length<3){
                xin.push(donghua[0]);
                donghua.shift();

        }
},20)
*/
var shuju='{"time":"60","width":"104","height":"56","images":"104","yh":"0","yw":"0","address":"兰博基尼.png","audio":"audio/4/献上真心.mp3","pause":"1000","count":"1","top":"0","left":"0ff","weiyi":"0px"}'
$("button").click(function(){
        c(shuju)
})
var donghua=[];
var xin=[];
function c(data){
        dhlist=function(){
                var obj=JSON.parse(data);
                width=parseInt(obj.width)/100;
                height=parseInt(obj.height)/100;
                top1=parseInt(obj.top)/100;
                left=parseInt(obj.left)/100;
                images=parseInt(obj.images)/100;       
                yh=parseInt(obj.yh)/100;       
                yw=parseInt(obj.yw)/100;       
                address=obj.address;
                audio=obj.audio;
                pause=obj.pause;
                weiyi=parseInt(obj.weiyi);
                length=obj.count;
                time=obj.time;
                $(".waiwei").append("<div class='bigbox'></div>")
                $(".bigbox:last").width(width+"rem")
                $(".bigbox:last").height(height+"rem")
                $(".bigbox:last").css({overflow:"hidden",position:"relative",border:" 0.01rem solid rgba(0,0,0,0)",marginLeft:"auto",marginTop:"0.2rem",marginRight:"0rem",height:"0.56rem"})
                $(".bigbox:last").append("<div class='fontsize'>小飞飞</div>")
                $(".fontsize:last").css({width:"100%",height:"0.2rem",fontSize:"0.2rem",textAlign:"center",lineHeight:"0.2rem"})
                $(".bigbox:last").append("<div class='box'></div>")
                $(".box:last").height(height+"rem")
                $(".box:last").append("<img class='bo' src='' alt=''>")
                $(".box img:last").css({width:images+"rem",verticalAlign: "top"})
                $(".bo:last").attr("src",address)
                $(".bigbox:last").append("<audio class='music' src=''></audio>")
                $(".music:last").attr("src",audio)

                b=0;
                // hx=0;
                l=setInterval(function(){
                        $(".bigbox:last").fadeIn()
                        $(".bigbox:last").animate({marginRight:"2rem"})
                        b-=weiyi;   
                        // hx-=yh/(images/width);
                        if((-(images-width))>=(b) ){
                                        clearInterval(l);
                                        setTimeout(function(){
                                                $(".bigbox").eq(0).fadeOut();
                                                $(".bigbox").eq(0).remove();
                                        },pause)
                        }
                        $(".box").animate({marginTopyh+hx)+"rem"})
                        $(".box").css({marginLeft:b+"rem"})
                },(time))
        }
        donghua.push(dhlist);
        function stts(){
                var stop=setInterval(function(){
                        if(xin.length<=3 && xin.length>=0){
                                console.log(donghua.length)
                                xin.push(donghua[0]);
                                // donghua.shift();
                                xin[xin.length-1]();
                                xin.shift();
                        }else{
                                return;
                        }
                },40)
        }
        stts()
       
}
/*xin.push(donghua[0]);
        donghua.shift()
function shijian (){
                var panduan=setInterval(function(){
                        if(xin.length>=0 && xin.length<=3){
                                xin[xin.length-1]();
                                console.log(xin.length)
                        }else{
                                alert(2)
                        }
                },10)
        }
        shijian()*/
</script>
</html>
发表于 2016-10-23 12:22:50 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-30 23:33 , Processed in 0.124686 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表