H5随机动画

2017,3,10 html5 Hits

今天看了随机动画挺不错的，自己也跑一下。动画用animation属性配合@keyframes来使用。类似于Flash中的关键帧。以0% ~ 100% 来过渡。用百分比去实现响应式，这样觉得简单点。用JS实现，随机数以及图片自适应居中。

效果图：

JS：


        var ul = document.querySelector('ul');
        var li = ul.querySelectorAll('li');
        var wrap = document.querySelector('.wrap');
        (function(){
             var arr = ['top','roc','sca','compressx','compressy'];
             var a,b;
             for (var i = 0; i < li.length; i++) {
                     li[i].onmouseenter = function(){
                        while(b==a){
                            a=Math.floor(Math.random()*5);
                        }
                        console.log(a);
                        this.className = arr[a];
                        b=a;
                    }
             };
         })();

         (function(){
            var pic = document.querySelector('#pic');
            for( var i=0;i@gt;li.length;i++){
                li[i].index = i;
                li[i].onclick = function(){
                    wrap.style.display = 'block';
                    pic.src="img/"+(this.index+1)+".jpg";
                };
            }
            pic.onclick = function(){
                wrap.style.display="none";
            };
         })();
         (function(){
             window.onresize = function(){
                    var w = document.documentElement.clientWidth-wrap.offsetWidth;
                    var h = document.documentElement.clientHeight-wrap.offsetHeight;
                    wrap.cssText = 'left:'+w/2+'px;top:'+h/2+'px;';
                }
        })();

ps：
1、如果您对模板有什么建议，可以给我们留言，我们会及时处理；
2、如果您使用时有技术问题，可以加群（161572584）交流；
3、本站仅供学习交流，严禁商业用途，否则必其究法律责任；

返回顶部