鼠标悬浮横向滚动图片

最新推荐文章于 2024-07-15 17:15:41 发布

superXiaoyun

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量316

点赞数

分类专栏： html 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/superXiaoyun/article/details/127066673

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .graybody {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 94vw;
                margin: 20px auto;
            }
            .anniu {
                padding: 40px;
                margin-bottom: 25px;
                cursor: pointer;
            }
            .anniu img {
                width: 30px;
                height: auto;
            }
 
            #box {
                position: relative;
                flex: 1;
                height: 700px;
                overflow: hidden;
            }
 
            #content {
                position: absolute;
                width: auto;
                height: 673px;
                /*border: 1px solid red;*/
                cursor: pointer;
            }
 
            #scroll {
                position: relative;
                top: 673px;
                left: 50%;
                transform: translateX(-50%);
                width: 100px;
                height: 6px;
                background-color: lightgray;
                border-radius: 3px;
            }
 
            #bar {
                position: absolute;
                width: 40px;
                height: 6px;
                background-color: red;
                border-radius: 3px;
                cursor: pointer;
            }
        </style>
        <script type="text/javascript">
            var box, txt, scr, bar, left, bili, x, oldx
            var leftChangeInterval = null
            var flag = true
            window.onload = function() {
                box = document.getElementById('box');
                txt = document.getElementById('content');
                scr = document.getElementById('scroll');
                bar = document.getElementById('bar');
                left = 0
                x = null;
                
                // 滚动条与图片比例
                bili = (scr.clientWidth - bar.clientWidth) / (txt.clientWidth - box.clientWidth)
                content.onmousemove= function(e) {
                    var ev = window.event || e;
                    var a = ev.clientX - innerWidth/2;
                    // console.log(a)
                    if(a > 0 && flag == false) {
                        flag = true
                        clearInterval(leftChangeInterval)
                        leftChangeInterval = null
                     console.log('leftChangeInterval', leftChangeInterval)
                   } else if(a < 0 && flag == true) {
                        flag = false
                        clearInterval(leftChangeInterval)
                        leftChangeInterval = null
                    console.log('leftChangeInterval', leftChangeInterval)
                    }
                    let leftStr = txt.style.left
                    if(leftStr)left = Number(leftStr.replace('px', ''))
                    if(leftChangeInterval)return
                    leftChangeInterval = setInterval(() => {
                        console.log('move', a)
                        if(a > 0) {
                            oldx = x
                            left -= 100
                            x = -left
                            
                        } else {
                            oldx = x
                            left += 100
                            x = -left
                        }
                        roll()
                    }, 1000)
                    return false
                }
                content.onmouseout = function(e) {
                    clearInterval(leftChangeInterval)
                    leftChangeInterval = null
                }
                //当鼠标按下
                content.onmousedown = function(e) {
                    var ev = window.event || e;
                    var a = ev.clientX;
                    let leftStr = txt.style.left
                    if(leftStr)left = Number(leftStr.replace('px', ''))
                    console.log('txt.style.left', leftStr, left)
                    //拖动滚动条
                    document.onmousemove = function(e) {
                        var ev = window.event || e;
                        //计算鼠标位置 差
                        oldx = x
                        x = -left + a - ev.clientX;
                        roll();
                    }
                    return false; //阻止默认行为
                }

                //松开鼠标时
                document.onmouseup = function() {
                    document.onmousemove = null;
                }
             
            }
            //滚动
            function roll() {
                //限制区域
                if (x <= 0) {
                    x = 0;
                } else if (x >= txt.clientWidth - box.clientWidth) {
                    x = txt.clientWidth - box.clientWidth;
                }
                bar.style.left = (x * bili) + 'px';
                txt.style.left = -x + 'px';
                console.log(oldx, x)
                txt.animate([
                    {left: -oldx + 'px'},
                    {left: -x + 'px'}
                ],
                {
                    duration: 1000,
                })
                return false; //阻止默认行为
            }
            function changeArea(type) {
                if(!txt)txt = document.getElementById('content');
                if(type == 'pre') {
                    oldx = x
                    x -= 1200
                } else {
                    oldx = x
                    x += 1200
                }
                console.log('x', x, type)
                roll()
            }
        </script>
    </head>
    <body>
        <div class="graybody">
            <div class="anniu" onclick="changeArea('pre')">
                <img src="__IMG__/new/left.png" alt=""/>
            </div>
            <div id="box">
                <img src="https://gwcdn.lovehaituan.com/history.jpg" id="content">
                <div id="scroll">
                    <div id="bar"></div>
                </div>
            </div>
            <div class="anniu" onclick="changeArea('next')">
                <img src="__IMG__/new/right.png" alt=""/>
            </div>
        </div>
    </body>
</html>