网站首页 » 前端开发 » JavaScript » JavaScript 做一个照片墙效果(三)
上一篇:
下一篇:

JavaScript 做一个照片墙效果(三)

前言

这是第三个照片墙效果,这个跟之前的两个不同,这个效果是把图片做成旋转,类似于轮播,但比轮播效果要炫一些.

这个示例基本实现了:

1.可以沿着 translateX 和 translateY 两个方向旋转.不过在translateX方向作了一个范围的限制

2.只有当动画运动完后,才可以进行下次动画

3.在指定的区域内按下鼠标并滑动后可触发动画效果

在线示例:http://yunkus.com/demo/photo-wall/photo-wall-3/

HTML 代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript 做一个照片墙效果(三)-云库网</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="rotate-wrap">
        <div class="rotate-container">
            <ul class="rotate-box">
                <li class="rotate-item"><img src="http://yunkus.com/demo/lib/images/demo-1.jpg" alt="" /></li>
                <li class="rotate-item"><img src="http://yunkus.com/demo/lib/images/demo-2.jpg" alt="" /></li>
                <li class="rotate-item"><img src="http://yunkus.com/demo/lib/images/demo-3.jpg" alt="" /></li>
                <li class="rotate-item"><img src="http://yunkus.com/demo/lib/images/demo-4.jpg" alt="" /></li>
                <li class="rotate-item"><img src="http://yunkus.com/demo/lib/images/demo-5.jpg" alt="" /></li>
                <li class="rotate-item"><img src="http://yunkus.com/demo/lib/images/demo-6.jpg" alt="" /></li>
                <li class="rotate-item"><img src="http://yunkus.com/demo/lib/images/demo-7.jpg" alt="" /></li>
                <li class="rotate-item"><img src="http://yunkus.com/demo/lib/images/demo-8.jpg" alt="" /></li>
            </ul>
        </div>
    </div>
<script src="index.js"></script>
</body>
</html>
CSS 代码
body {
    padding: 0;
    margin: 0;
    user-select: none;
    overflow: hidden
}
html,
body {
    width: 100%;
    height: 100%;
}
ul {
    padding: 0
}

li {
    list-style: none;
}
.rotate-wrap {
    background: #333;
    border: 1px solid #ccc;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
.rotate-container {
    perspective: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}
.rotate-box {
    width: 120px;
    height: 200px;
    position: relative;
    /*指定子元素定位在三维空间内*/
    transform-style: preserve-3d;
    transform: rotateX(-12deg);
}
.rotate-box .rotate-item {
    /* transform:  perspective(800px); 作用在子元素中,第个子元素都有自己的视角*/
    width: 120px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotateY(0deg) translateZ(0);
    transition: transform 1s ease-in-out 0s;
}
.rotate-box .rotate-item  img{
    display: block;
    width: 100%;
    height:100%
}
JavaScript 代码
const  rotateWrap = document.querySelector(".rotate-wrap"),
       rotateContainer = document.querySelector(".rotate-box"),
       rotateBox = document.querySelector(".rotate-box"),
       rotateItem = rotateBox.querySelectorAll("li"),
       itemLen = rotateItem.length,
       itemDeg = 360 / itemLen,
       colors = ["#69d241", "#a7dbd8", "#f38630", "#e0e4cc", "fa6900", "#ff4e50", "#f9d423"];
let downX = 0,
    downY = 0,
    moveX = 0,
    moveY = 0,
    curRotateX = 0,
    curRotateY = -12,
    timer = null,
    downTime = 0,
    upTime = 0,
    speedX = 0,
    speedY = 0,
    isRotate = false;

initFn();
function initFn() {
for (let i = 0; i < itemLen; i++) {
    let imgTarget = rotateItem[i].querySelector("img");
    if(imgTarget){ // 如果 li 里是图片
        imgTarget.setAttribute("draggable",false);
    }else{
        rotateItem[i].setAttribute("draggable",false);
    }
    
    rotateItem[i].initTimer = setTimeout(() => {
        var item = rotateItem[i];
        item.style.background = colors[i % 8];
        item.style.transform = "rotateY(" + itemDeg * i + "deg) translateZ(300px)";
        clearTimeout(rotateItem[i].initTimer);
    }, i * 100);
}
}

rotateWrap.onmousedown = function (e) {
    if (isRotate) { // 如果还没旋转完,再次点击处理
        return;
    }
    isRotate = true;
    downTime = Date.now();
    downX = e.clientX;
    downY = e.clientY;
    rotateWrap.addEventListener("mousemove", moveFn, false);
    rotateWrap.addEventListener("mouseup", upFn, false);
    rotateWrap.addEventListener("mouseout", outFn, false);
}

function timerFn() {
    curRotateX += speedX * 0.05;
    curRotateY -= speedY * 0.01;
    speedX *= 0.85; //速度 speedX 损耗
    speedY *= 0.85; //速度 speedY 损耗
    setTransform();
    if (Math.abs(speedX) < 1 && Math.abs(speedY)< 1) {  // 如果 x 以及 y 方向的速度小于1时,清掉定时器,停止动画
        clearInterval(timer);
        isRotate = false;
    }
}

function moveFn(e) {
    moveX = e.clientX;
    moveY = e.clientY;
    curRotateX = curRotateX + (moveX - downX) * 0.05;
    curRotateY = curRotateY - (moveY - downY) * 0.01;
    setTransform();
}

function upFn(e) {
    const upX = e.clientX;
    const upY = e.clientY;
    upTime = Date.now();
    const disTime = (upTime - downTime) / 1000;
    speedX = (upX - downX) / disTime;
    speedY = (upY - downY) / disTime;
    rotateWrap.removeEventListener("mousemove", moveFn, false);
    rotateWrap.removeEventListener("mouseup", upFn, false);
    rotateWrap.removeEventListener("mouseout", outFn, false);
    timer = setInterval(timerFn, 30);
}

function outFn(e) {
    if(e.toElement && e.toElement.tagName.toLowerCase() !== "img"
    && e.toElement.className.toLowerCase() !== "rotate-wrap"
    && e.toElement.className.toLowerCase() !== "rotate-container"
    && e.toElement.className.toLowerCase() !== "rotate-box"){
        rotateWrap.removeEventListener("mousemove", moveFn, false);
        rotateWrap.removeEventListener("mouseup", upFn, false);
        rotateWrap.removeEventListener("mouseout", outFn, false);
        isRotate=false;
    }
}
function setTransform(){
    if(Math.abs(curRotateY)>20){ // 控制在 X 轴上可旋转的范围
        if(curRotateY<0){
            curRotateY = -20
        }else{
            curRotateY = 20
        }
    }
    rotateBox.style.transform = "rotateX(" + curRotateY + "deg) rotateY(" + curRotateX + "deg)";
}

 

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/javascript-photo-wall-3/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END