3D 照片环 || 鼠标滚动

作者: CondorHero | 来源:发表于2019-05-26 23:19 被阅读7次

3D 照片环 || 鼠标滚动
JS实例-事件对象2
Js实现鼠标滚轮滑动监听
如何禁止鼠标滚动
无缝滚动
CSS 隐藏滚动条但可以滚动
css 实现滚动条自由
Selenium
阻止鼠标滚动穿透事件
Axure实现“跑马灯”效果

CSS照片环构建完成，如何实现滚动滚轮来达到照片环滚动。

3D 照片环加鼠标滚动

一、3D 照片环

使用CSS3 和定位技术让九张类照片定位叠加在一起。

图片叠加
使用jQuery遍历打开图片

$("ul li").each(function(i){
    $(this).css("transform","rotateY("+(i*40)+"deg) translateZ(500px)");
});

代码里面的四十是 360 / 9得来的。

打开图片

拖拽的实现
拖拽的实现没什么难点，不使用 jQuery 插件的兼容火狐。经典的兼容策略在下方的滚轮事件。这里奉上源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D照片环</title>
    <style>
        *{margin:0;padding:0;}
        body{
            background-color: black;
            color: #ccc;
            cursor: pointer;
        }
        .stage {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            position: relative;
            /*background-color: #0f0;*/
            perspective:1150px;
        }
        ul {
            list-style: none;
            width: 250px;
            height: 130px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -100px;
            transition:all 0.3s ease 0s;
            transform-style: preserve-3d;
        }
        ul li {
            width: 250px;
            line-height: 130px;
            text-align: center;
            font-size: 80px;
            color: #fff ;
            /*绝对定位让盒子在一起*/
            position: absolute;
        }
        ul li:nth-child(1){background-color: rgba(255,0,0,1);} 
        ul li:nth-child(2){background-color: rgba(0,255,0,1);}  
        ul li:nth-child(3){background-color: rgba(78, 69, 189,1);}   
        ul li:nth-child(4){background-color: rgba(0,255,255,1);}
        ul li:nth-child(5){background-color: rgba(255,255,0,1);}
        ul li:nth-child(6){background-color: rgba(255,34,255,1);}
        ul li:nth-child(7){background-color: rgba(256,67,55,1);}
        ul li:nth-child(8){background-color: rgba(170, 197, 85, 1);}
        ul li:nth-child(9){background-color: rgba(65,0,255,1);}
    </style>
</head>
<body>
    <div class="stage">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
    <script>
        //使用jQuery遍历打开图片
        $("ul li").each(function(i){
            $(this).css("transform","rotateY("+(i*40)+"deg) translateZ(500px)");
        });
        // 
        var nowdeg = 0;
        // 自锁截流作用
        var lock = true;
        $(".stage").mousewheel(function(event,i){
            // JQuery的i用来类似下面的功能语句
            // var i = event.wheelDelta > 0 ? 1 : -1 ;
            event = event || window.event;
            if(!lock)return;
            if(event.preventdefault){
                event.preventDefault();
            }else {
                event.returnValue = false;
            }
            nowdeg += i*40;
            $("ul").css("transform","rotateY("+ nowdeg +"deg)");
            // 自锁
            lock = false;
            // 解锁
            setTimeout(function(lcok){
                lock =true;
            },500);
        });

        // 拖拽的实现
        $(document).mousedown(function(event){
            // 记录鼠标第一次出现的位置
            var startX = event.clientX;
            var startY = event.clientY;
            console.log(startX,startY);
            // 关掉移动的过度效果让移动动作更加自然
            $("ul").css("transition","none");
                $(document).mousemove(function(event){
                // 记录真实移动的位置
                var deltaX = event.clientX - startX;
                var deltaY = event.clientY - startY;
                console.log(deltaX,deltaY);
                // 通过移动的位置变量来改动旋转效果
                $("ul").css("transform","rotateX(" + -deltaY / 5 + "deg) rotateY(" + deltaX / 5 + "deg)");
                return false;
            });
        });
            $(document).mouseup(function(){
                $(document).off("mousemove");
            });
    </script>
</body>
</html>

二、滚轮事件

以前只学过页面的卷动事件（window.scrollDOM一级添加的事件）。卷动事件可以由鼠标滚轮，方向键来触发。都是通过卷动页面来实现的，今天的照片环明显的用滚动事件来实现，滚动滚轮在大页面不动的情况下来触发事件。这就得用到mousewheel事件。

    box.onmousewheel = function(event){  
        event = event || window.event;//兼容IE
        oDiv.innerHTML = event.wheelDelta;
}

当我在我定义的盒子上滚动的时候，发现 event.wheelDelta出现的值往上滚动是120，往
下滚动是 -120，有时候滚得快会发现页面出现正负 120 的整数，其实没什么卵用，只能分辨鼠标是往上滚了还是往下滚了。onmousewhee l事件的触发，是滚轮滚动一“咯噔”的时候，触发一次。
不过非常遗憾的是滚轮事件，火狐浏览器不兼容。火狐使用自己的专用事件
DomMouseWheel，并且这个事件只能通过标准的DOM2级的事件绑定方式添加。

    box.addEventListener("DOMMouseScroll",function(event){
                oDiv.innerHTML = event.detail;  
    },false);

表示滚动方向的事件的属性叫做 event.detail。它的滚动方向往上，-3；滚动方向往下，+3。

如何DOM二级添加事件的用法？
element.addEventListener(event, function, useCapture);
event 必须。字符串，指定事件名。
function 必须。指定要事件触发时执行的函数。
useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行false- false- 默认。事件句柄在冒泡阶段执行。

所以平常在写程序为了兼容火狐浏览器的滚轮事件，就得写两个监听，对方浏览器遇到不认识的事件会静默处理，不过调用的函数的写两个使用条件来判断。

代码如下：

    function mousewheel(event){
        event = event || window.event;   //→ 解决IE6、7、8和高级浏览器的不兼容
        //阻止默认事件
        if(event.preventDefault){    //→ 解决IE6、7、8和高级浏览器的不兼容
            event.preventDefault();
        }else{
            event.returnValue = false;
            //清除了默认事件会返回false。IE浏览器接受的。
        }
        //Chrome、IE用的是event.wheelDelta;
        if(event.wheelDelta){  //→ 解决火狐和其他浏览器的不兼容
            var direction = event.wheelDelta > 0 ? 1 : -1;
        }else if(event.detail){
            //火狐用的是event.detail;
            var direction = event.detail > 0 ? -1 : 1;
        }
            box.innerHTML = direction;
}
//这个事件处理程序中，已经屏蔽了3个事情的不兼容。
    //给IE、CHrome添加事件
    box.onmousewheel = mousewhee;
    //给火狐添加事件
    box.addEventListener("DOMMouseScroll",mousewheel,false);