滑动改变渐变切换图片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*.Center {
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin:auto;
            background-color: beige;
        }*/

        .Center {
            width: 460px;
            height: 500px;
            margin: 50px 500px;
            background-color: beige;
        }

        ul {
            width: 460px;
            height: 370px;
            overflow: hidden;
            position: relative;
        }

        li {
            position: absolute;
            left: 0;
            top: 0;
            list-style: none;
        }

        .Line {
            width: 460px;
            height: 18px;
            background-color: aqua;
            margin-top: 20px;
            position: relative;
        }

        .circle {
            width: 20px;
            height: 20px;
            background-color: lemonchiffon;
            border-radius: 10px;
            position: absolute;
            left: 50%;
        }

        .circle1 {
            left: 95%;
        }

        .circle2 {
            left: 0;
        }
        img {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }

        .nn3 {
            display: inline-block;
            width: 460px;
            height: 370px;

            /*background: url(./images/81.jpg) no-repeat;*/
            /*background-size: 450px 370px;*/
        }
    </style>
</head>
<body>

<div class="Center" id="Center">
    <ul>

        <li>
            <span id="img3" class="nn3">666</span>
            <!--<img id="img3" src="./images/82.jpg" width="460" height="370"/>-->
        </li>
        <!--<li><img id="img2" src="./images/81.jpg" width="460" height="370"/></li>-->
        <!--<li><img id="img1" src="./images/80.jpg" width="460" height="370"/></li>-->

        <li><img id="img3" src="./images/82.jpg" width="460" height="370"/></li>
        <li><img id="img2" src="./images/81.jpg" width="460" height="370"/></li>
        <li><img id="img1" src="./images/80.jpg" width="460" height="370"/></li>
    </ul>
    <div class="Line" id="Line">
        <div class="circle circle1 circle2" id="circle"></div>
        <div class="circle"></div>
        <div class="circle circle1"></div>
    </div>
</div>
<script src="jquery-1.12.2.min.js"></script>
<script>
    var box1 = document.getElementById('Line');// 横线
    var circle = document.getElementById('circle');//圆心
    var Center = document.getElementById('Center');//圆心
    var boxX;
    $(window).on("mousedown", function () {// 监听 按下、移动、离开
//        console.log(box1);
        $(Center).on("mousemove", function (event) {
            //让mask跟着 鼠标的在盒子中的位置移动
            var event = event || window.event;
            //鼠标在页面上的位置
            var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
            //计算鼠标在盒子中的位置
            boxX = pageX - box1.offsetLeft;// 第一张开始的位置
            $(circle).css({left: boxX + 'px'}); // 圆圈在屏幕中的位置（动态改变）
            if (boxX > 50 && boxX < 205) {
                var boX = boxX - 205 > 0 ? 0 : Math.abs(boxX - 205);// 到第1个点判断绝对值
                var boX2 = boxX - 50;// 到第1个点判断绝对值
                if (boX < 155 && boX > 0) {
//                    console.log("点所在的位置:" + boX);
//                    console.log(boX2 / 155);
                    $("#img1").css({opacity: boX / 155});//改变图片透明度 1-0   0-230
                    $("#img2").css({opacity: boX2 / 155});//改变图片透明度 0-1  0-230
                    $("#img3").css({opacity: 0});//改变图片透明度 0 - 0         0-230
                }
            } else if (boxX > 204 && boxX < 255) {
                $("#img1").css({opacity: 0});//改变图片透明度 0  0-230
                $("#img2").css({opacity: 1});//改变图片透明度 1  0-230
                $("#img3").css({opacity: 0});//改变图片透明度 0  0-230
            } else if (boxX > 254 && boxX < 410) {
                var boX3 = boxX - 410 > 0 ? 0 : Math.abs(boxX - 410);// 到第1个点判断绝对值
                var boX4 = boxX - 255;// 到第1个点判断绝对值
//                console.log(boX3);
                if (boX3 < 155 && boX3 > 0) {
//                    console.log("点所在的位置:" + boX);
//                    console.log(boX4 / 155);
                    $("#img1").css({opacity: 0});//改变图片透明度 0-0            230-460
                    $("#img2").css({opacity: boX3 / 155});//改变图片透明度 1-0   230-460
                    $("#img3").css({opacity: boX4 / 155});//改变图片透明度 0 - 1 230-460
                }

            } else if (boxX > 409) {
                $("#img1").css({opacity: 0});//改变图片透明度 0  0-230
                $("#img2").css({opacity: 0});//改变图片透明度 0  0-230
                $("#img3").css({opacity: 1});//改变图片透明度 1  0-230
            } else {
                $("#img1").css({opacity: 1});
                $("#img2").css({opacity: 0});
                $("#img3").css({opacity: 0});
            }
            if (boxX > 440) {
//                console.log(2);
                $(circle).css({left: 440 + 'px'}); // 圆圈在屏幕中的位置（动态改变）
            }
        });


    });
    window.addEventListener("mouseup",function(){
//        console.log("抬起");
        if (boxX > 0 && boxX < 115) {
//            console.log(boxX);
            $("#img1").animate({
                opacity: '1'
            }, 1000);
            $("#img2").animate({
                opacity: '0'
            }, 1000);
            $("#img3").animate({
                opacity: '0'
            }, 1000);
            $(circle).animate({
                left: "0px"
            }, 1000);
//            console.log(3);
        } else if (boxX > 115 && boxX < 230) {
            $("#img1").animate({
                opacity: '0'
            }, 1000);
            $("#img2").animate({
                opacity: '1'
            }, 1000);
            $("#img3").animate({
                opacity: '0'
            }, 1000);
            $(circle).animate({
                left: "230px"
            }, 1000);
        }else if (boxX > 230 && boxX < 345) {
            $("#img1").animate({
                opacity: '0'
            }, 1000);
            $("#img2").animate({
                opacity: '1'
            }, 1000);
            $("#img3").animate({
                opacity: '0'
            }, 1000);
            $(circle).animate({
                left: "230px"
            }, 1000);
        }else if (boxX > 345 && boxX < 460) {
            $("#img1").animate({
                opacity: '0'
            }, 1000);
            $("#img2").animate({
                opacity: '0'
            }, 1000);
            $("#img3").animate({
                opacity: '1'
            }, 1000);
            $(circle).animate({
                left: "440px"
            }, 1000);
        }
        $(Center).off("mousemove");//解绑事件
    });
    $(window).on("mouseup", function () {
//        onmouseup
        console.log("鼠标抬起");
        $(Center).off("mousemove");//解绑事件
    });

</script>
</body>
</html>
有待优化仅供参考欢迎指出不足，和更改意见
滑动 改变渐变切换图片

猜你喜欢

滑动改变渐变切换图片
