zoukankan      html  css  js  c++  java
  • 3d照片环效果(修改版--添加了x轴y轴双向转动和修复模糊度的bug)

     今天用用前两天总结的css3新效果写了一个3d照片环的效果,其中还有些bug大家可以看一看,一起改进。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding:0;
                margin:0;
                list-style:none;
            }
            body{
                background:#000;
            }
            #box{
                133px;
                height:200px;
                position:absolute;
                top:40%;
                left:50%;
                color:red;
                margin:-100px 0 0 -67px;
                transform-style:preserve-3d;
                transform:perspective(800px) rotateX(-20deg);
            }
            #box li{
                100%;
                height:100%;
                position:absolute;
                top:0;
                left:0;
                border-radius:10px;
                background:url('images/img2/1.jpg') no-repeat;
                transition:1s all ease;
                -webkit-box-shadow:0 0 5px #fff;
                -webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));
                transform:rotateY(0deg) translateZ(0px);
            }
        </style>
        <script>
    
            window.onload=function(){
                var oUl=document.getElementById('box');
                var N=11;
    
                for(var i=0;i<N;i++){
                    var oLi=document.createElement('li');
                    oLi.style.backgroundImage='url(images/img2/'+(i+1)+'.jpg)';
                    oUl.appendChild(oLi);
    
                    (function(oLi,i){
                        setTimeout(function(){
                            oLi.style.transition='1s all ease '+(200*(N-i))+'ms';
                            oLi.style.transform='rotateY('+(360/N*i)+'deg) translateZ(300px)';
                        },0);
                    })(oLi,i);
                }
                var aLi=oUl.children;
                var y=0;
                aLi[0].addEventListener('transitionend',function(){
                    document.onkeydown=function(ev){
                        if(ev.keyCode==37){
                            y-=360/N;
                            keyChange();
                        }else if(ev.keyCode==39){
                            y+=360/N;
                            keyChange();
                        }
                    };
                },false);
    
                aLi[0].addEventListener('transitionend',function(){
                    document.onmousedown=function(ev){
                        var disX=ev.clientX-y;
                        document.onmousemove=function(ev){
                            y=ev.clientX-disX;
                            for(var i=0;i<aLi.length;i++){
                                keyChange();
                            }
                        };
                        document.onmouseup=function(){
                            document.onmousemove=null;
                            document.onmouseup=null;
                        };
                        return false;
                    };
                },false);
    
                function keyChange(){
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].style.transition='1s all ease';
                        aLi[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
                        var scale=Math.abs((Math.abs(360/N*i+y)-180)/180);
                        //aLi[i].innerHTML=scale;
                        //console.log(scale);
                        aLi[i].style.opacity=scale;
                    }
                }
            };
        </script>
    </head>
    <body>
        <ul id="box">
    
        </ul>
    </body>
    </html>
    

      

    今天对着效果进行了修复:修复了模糊度旋转时的bug,添加了ul的转动,使转动在x轴和y轴上都可以进行

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding:0;
                margin:0;
                list-style:none;
            }
            body{
                background:#000;
            }
            #box{
                133px;
                height:200px;
                position:absolute;
                top:40%;
                left:50%;
                color:red;
                margin:-100px 0 0 -67px;
                transform-style:preserve-3d;
                transform:perspective(800px) rotateX(-20deg);
            }
            #box li{
                100%;
                height:100%;
                position:absolute;
                top:0;
                left:0;
                border-radius:10px;
                background:url('images/img2/1.jpg') no-repeat;
                transition:1s all ease;
                -webkit-box-shadow:0 0 5px #fff;
                -webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,0.4));
                transform:rotateY(0deg) translateZ(0px);
            }
        </style>
        <script>
    
            window.onload=function(){
                var oUl=document.getElementById('box');
                var N=11;
    
                for(var i=0;i<N;i++){
                    var oLi=document.createElement('li');
                    oLi.style.backgroundImage='url(images/img2/'+(i+1)+'.jpg)';
                    oUl.appendChild(oLi);
    
                    (function(oLi,i){
                        setTimeout(function(){
                            oLi.style.transition='1s all ease '+(200*(N-i))+'ms';
                            oLi.style.transform='rotateY('+(360/N*i)+'deg) translateZ(300px)';
                        },0);
                    })(oLi,i);
                }
                var aLi=oUl.children;
                var y=0;
                var x=-10;
                aLi[0].addEventListener('transitionend',function(){
                    document.onkeydown=function(ev){
                        if(ev.keyCode==37){
                            y-=360/N;
                            change(y,x);
                        }else if(ev.keyCode==39){
                            y+=360/N;
                            change(y,x);
                        }
                    };
                },false);
    
                aLi[0].addEventListener('transitionend',function(){
                    change(y,-x);
                    document.onmousedown=function(ev){
                        var disX=ev.clientX-y;
                        var disY=ev.clientY-x;
                        document.onmousemove=function(ev){
                            y=ev.clientX-disX;
                            x=ev.clientY-disY;
                            change(y/3,x/3);
                        };
                        document.onmouseup=function(){
                            document.onmousemove=null;
                            document.onmouseup=null;
                        };
                        return false;
                    };
                },false);
    
                function change(y,x){
                    for(var i=0;i<aLi.length;i++){
                        aLi[i].style.transition='0s all ease';
                        aLi[i].style.transform='rotateY('+(360/N*i+y)+'deg) translateZ(300px)';
                        oUl.style.transform='perspective(800px) rotateX('+-x+'deg)';
                        var scale=Math.abs(Math.abs((360/N*i+y)%360)-180)/180;
                        //aLi[i].innerHTML=scale;
                        //console.log(scale);
                        scale<0.3&&(scale=0.3);
                        aLi[i].style.opacity=scale;
                    }
                }
            };
        </script>
    </head>
    <body>
        <ul id="box">
    
        </ul>
    </body>
    </html>
    

      

  • 相关阅读:
    Excel 用row()函数 在Excel中自动添加序号,
    sql server数据导入
    Excel导入sq server后数据列以科学计数法显示
    left join 和 left outer join 的区别
    多点求值与暴力插值
    生成函数

    洲阁筛 学习笔记
    「NOI2017」游戏 解题报告
    CF 1045 H. Self-exploration 解题报告
  • 原文地址:https://www.cnblogs.com/jasonwang2y60/p/5975770.html
Copyright © 2011-2022 走看看