海贼王旋转通缉令

2017-08-30 本文已影响129人无害wen

这篇文章主要讲了万花筒旋转效果的制作，当然从下文可以妥妥的看出我是海贼迷。下面是动画的具体效果，用的gifcam截得动态图（觉得效果不错的，可以在360软件管理里下载），可能会表现的有点卡，实际是比较流畅的，粘贴复制即可用。

GIF.gif
打开可见效果：http://htmlpreview.github.io/?https://github.com/buwu/exercise/blob/demo1/%E4%B8%87%E8%8A%B1%E7%AD%92/onepiece.html

1.文件列表

1503994850(1).jpg

2.效果说明

图片以3D空间展示在页面里，像舞台展示效果。可以被横向和纵向拖动旋转（这里是沿X轴，Y轴旋转）。

3.文件详解

3.1HTML

<div class="showtree">
         ![](img/chopper.jpg)
        ![](img/franky.jpg)
        ![](img/luffy.jpg)
        ![](img/nami.jpg)
        ![](img/robin.jpg)
        ![](img/sanji.jpg)
        ![](img/zoro.jpg)
        ![](img/sogeking.jpg)
        ![](img/hancock.jpeg)
        <p></p>
</div>

基本结构就这些。。。
这里的是img标签，不知道为什么一保存就是![]这样了。

3.2css

详细解释在注释里。不要错过汉字哦~

*{margin:0;padding: 0;}
body{
    background-color: #66677c;
    /*文本不能被选中*/
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
.showtree{
    width: 120px;
    height: 180px;
    margin: 150px auto 0;
    position: relative;
    /*子元素被保留3D转换*/
    transform-style:preserve-3d;
    /*perspective定义透视视图，即视觉点（眼睛或者屏幕）到元素的中心的距离；绕X轴旋转-10deg*/
    transform:perspective(1000px) rotateX(0deg) rotateY(0deg);
}
.showtree img{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    /*图片白色阴影*/
    box-shadow: 0px 0px 10px #fff;
    /*倒影的设置 ：below 倒影在下面，倒影距离对象10px，倒影颜色线性渐变*/
    -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);
}
/*白色光影分开图片与倒影*/
.showtree p{
    width: 1200px;
    height: 1200px;
    /*背景颜色 径向渐变 由x,y轴中心向外，由白色透明度0.5到黑色*/
    background: -webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.5),rgba(0,0,0,0));
    position: absolute;
    top:100%;
    left:50%;
    margin-top: -600px;
    margin-left: -600px;
    border-radius:600px;
    /*绕x轴旋转90度，分割图片与倒影*/
    transform:rotateX(90deg);
}

3.3js

详细解释在注释里，使用前需引入jquery。

$(function(){
    var imgL=$(".showtree img").length;
    var deg=360/imgL;/*每张图片应该旋转的角度*/
    var roY=0,roX=-10;/*初始化绕X轴旋转10度*/
    var xN=0,yN=0;/*鼠标移动的距离*/
    var play=null;

    initImgPos();
    dragImg();

    /*初始化每张图片的位置*/
    function initImgPos(){
        $(".showtree img").each(function (i) {
            $(this).css({
                //每张图片沿z轴平移300px,分别绕y轴旋转一定的角度，形成一圈；
                "transform":"rotateY("+i*deg+"deg) translateZ(300px)" });
                //防止图片被拖拽
                $(this).attr('ondragstart','return false');
        });
    }

    /*拖拽图片*/
    function dragImg(){
        $(document).mousedown(function(ev){
            //获取鼠标按下时的坐标；
            var x_=ev.clientX;
            var y_=ev.clientY;
            clearInterval(play);
            $(this).bind('mousemove',function(ev){
                /*获取鼠标的坐标*/
                var x=ev.clientX;
                var y=ev.clientY;
                /*两次坐标之间的距离*/
                xN=x-x_;
                yN=y-y_;
                roY+=xN*0.2;/*表示绕Y轴旋转的角度 0.2表示转动的幅度大小*/
                roX-=yN*0.1;/*表示绕X轴旋转的角度 0.1表示转动的幅度大小 注意：Y轴是以朝下为正方向。所以这里是-*/
                $('.showtree').css({
                    transform:'perspective(1000px) rotateX('+roX+'deg) rotateY('+roY+'deg)'
                });
                x_=ev.clientX;
                y_=ev.clientY;
            });
        }).mouseup(function(){
            $(this).unbind('mousemove');
            /*鼠标抬起来出现的缓动*/
            play=setInterval(function(){
                xN*=0.95;/*使之绕Y轴转动的速度越来越小 数越大缓动越久*/
                yN*=0.95;/*使之绕X轴转动的速度越来越小 数越大缓动越久*/
                if(Math.abs(xN)<1 && Math.abs(yN)<1){
                    clearInterval(play);
                }
                roY+=xN*0.2;
                roX-=yN*0.1;
                $('.showtree').css({
                    transform:'perspective(1000px) rotateX('+roX+'deg) rotateY('+roY+'deg)'
                });
            },30);
        });
    }
});

下面附上六张海贼王通缉令：
路飞