一、介绍:

   一张图为背景图,一张图为悬浮图,当背景图移动时,悬浮图跟着移动,悬浮图移动时,背景图不动<br />![image.png](https://cdn.nlark.com/yuque/0/2019/png/336008/1562740279226-f33fc801-8498-4502-84e3-ea49ce4837fc.png#align=left&display=inline&height=570&name=image.png&originHeight=570&originWidth=388&size=112705&status=done&width=388)

二、代码

一开始尝试用svg来写,后来发现高估了自己的能力(￣へ￣),经过多方尝试终于有那么一点点的成果了(✿✿ヽ(°▽°)ノ✿),根据需求,用的是mui框架,想要了解的可以去看(附上链接http://dev.dcloud.net.cn/mui/ui/,个人觉得还是蛮详细的),好了,上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style>
             * { 
                 touch-action: pan-y;
                } 
            .aaa {
                background:url(img/300x450.jpg);
                width: 300px;
                height: 450px;
                position: relative;
            }/**背景图片这里背景容器要写成相对位置*/
            .bbb {
                background:url(img/1.jpg);
                width: 40px;
                height: 40px;
                position:absolute;
                top:130px;
                left: 125px;
            } /**挡在前边的图，这里要是用相对位置*/
        </style>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
        <link href="css/style.css" />
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            mui.init();
        </script>
    </head>
    <body>
        <div id="block" class="aaa">
            <div id="hovering" class="bbb"></div>
        </div>
        <script>
            /* 背景图 */
            //获取节点
            var block = document.getElementById("block");
            var oW, oH;
            //绑定touchstart事件
            block.addEventListener("touchstart", function(e) {
                var touches = e.touches[0];
                oW = touches.clientX - block.offsetLeft;
                oH = touches.clientY - block.offsetTop;
                //阻止页面的滑动默认事件
                document.addEventListener("touchmove", defaultEvent, false);
            }, false)
            block.addEventListener("touchmove", function(e) {
                var touches = e.touches[0];
                var oLeft = touches.clientX - oW;
                var oTop = touches.clientY - oH;
                if (oLeft < 0) {
                    oLeft = 0;
                } else if (oLeft > document.documentElement.clientWidth - block.offsetWidth) {
                    oLeft = (document.documentElement.clientWidth - block.offsetWidth);
                }
                block.style.left = oLeft + "px";
                block.style.top = oTop + "px";
            }, false);
            block.addEventListener("touchend", function() {
                document.removeEventListener("touchmove", defaultEvent, false);
            }, false);
            function defaultEvent(e) {
                e.preventDefault();
            }
            /* 悬浮小图 */
            var hovering = document.getElementById("hovering");
            var sW, sH;
            //绑定touchstart事件
            hovering.addEventListener("touchstart", function(e) {
                //防止冒泡
                e.stopPropagation();
                var touches = e.touches[0];
                sW = touches.clientX - hovering.offsetLeft;
                sH = touches.clientY - hovering.offsetTop;
                //阻止页面的滑动默认事件
                document.addEventListener("touchmove", defaultEvent, false);
            }, false)
            hovering.addEventListener("touchmove", function(e) {
                //防止冒泡
                e.stopPropagation();
                var touches = e.touches[0];
                var sLeft = touches.clientX - sW;
                var sTop = touches.clientY - sH;
                if (sLeft < 0) {
                    sLeft = 0;
                } else if (sLeft > document.documentElement.clientWidth - hovering.offsetWidth) {
                    sLeft = (document.documentElement.clientWidth - hovering.offsetWidth);
                }
                hovering.style.left = sLeft + "px";
                hovering.style.top = sTop + "px";
            }, false);
            hovering.addEventListener("touchend", function() {
                document.removeEventListener("touchmove", defaultEvent, false);
            }, false);
            function defaultEvent(e) {
                e.preventDefault();
            }
        </script>
    </body>
</html>

三、注意点

1、移动

写悬浮图移动的时候一定要加上防止冒泡,不然悬浮图移动的时候背景图也会跟着移动

2、”芝士”点

(1)offsetLeft参照元素左侧偏移量
(2)offsetTop参照元素上侧偏移量
(3)var block = document.getElementById(“block”); 获取节点

3、位置

两张图的位置:

<style>
  /**背景图片这里背景容器要写成相对位置*/
            .aaa {
                background:url(img/300x450.jpg);
                width: 300px;
                height: 450px;
                position: relative;
            }
   /**挡在前边的图，这里要是用相对位置*/
            .bbb {
                background:url(img/1.jpg);
                width: 40px;
                height: 40px;
                position:absolute;
                top:130px;
                left: 125px;
            }
</style>

html css