盒子的拖拽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #box{
            width:350px;
            height:350px;
            border:1px solid #000;
            margin:100px;
            position:relative;
        }
        #big{
            width:400px;
            height:400px;
            border:1px solid #000;
            position:absolute;
            top : 0;
            left : 360px;
            overflow:hidden;
            display:none;
        }
        #mask{
            width:175px;
            height:175px;
            background:pink;
            opacity:0.3;
            position:absolute;
            top:0;
            left:0;
            cursor:move;
            display:none
        }
        #small{
            position:relative;
        }
        #bigImg{
            position:absolute;
            left:0;
            top:0;
        }
    </style>
    <body>
        <div id="box">
            <div id="small">
                <img src="images/iphone.jpg" alt="" id="smallImg"/>
                <div id="mask"></div>
            </div>
            <div id="big">
                <img src="images/iphone_big.jpg" alt="" id="bigImg"/>
            </div>
        </div>
    </body>
</html>

<script>
    /*
     思路：
         1、鼠标移入到小图区域  显示mask和big   离开让big 和mask 隐藏
         2、鼠标在小图区域上移动  改变mask的left和top   控制bigImg的left和top
     */
    var small = document.getElementById("small");
    var big = document.getElementById("big");
    var bigImg = document.getElementById("bigImg");
    var smallImg = document.getElementById("smallImg");
    var mask = document.getElementById("mask");
    var box = document.getElementById("box");

    small.onmouseover = function(){
        big.style.display = "block";
        mask.style.display = "block";
    }

    small.onmouseout = function(){
        big.style.display = "none";
        mask.style.display = "none";
    }

    small.onmousemove = function(e){
        var e = e || event;
        //求 mask的left值   top值
        var x = e.pageX - box.offsetLeft - mask.offsetWidth / 2;
        var y = e.pageY - box.offsetTop - mask.offsetHeight / 2;
        var maxL = small.offsetWidth - mask.offsetWidth;  //mask 最大的left
        var maxT = small.offsetHeight - mask.offsetHeight; //mask 最大的top
        //边界处理
        x = x < 0 ? 0 : x > maxL ? maxL : x;
        y = y < 0 ? 0 : y > maxT ? maxT : y;

        //大图的left
        bigImg.style.left = -x * (bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth) + "px";
        bigImg.style.top = -y * (bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight) + "px";
        mask.style.left = x +　"px";
        mask.style.top = y + "px";

    }

    //如果你想改mask的尺寸
    //大图宽度/小图宽度  =  大图可视区big宽度/小图可视区mask宽度
    //  800 / 350   =   400 / 175
     // 800 / 350   =   228 / 100
     // 2.28        =   2.28
</script>

原文地址：https://www.cnblogs.com/Leslie-Cheung1584304774/p/10529405.html

时间： 2024-11-02 17:59:43

盒子的拖拽的相关文章

关于js在一个固定的盒子里面拖拽的问题（包含临界值）

回武汉打卡第三天,武汉加油,逆战必胜!今天我们一起分享一下js拖拽的问题. 当然实现拖拽方法是有很多的,下面简单讲一种方法,大致思路如下: 首先需要用到的事件主要有 onmousedown,onmousemove,onmouseup.因为是小盒子(small)在拖拽拖拽,所以首先onmousedown是绑定在small小盒子上面:而拖拽是在文档中进行的,所以onmousemove和onmouseup可以写在文档对象上: 其次css在书写时记得使用定位,不要使用fixed(位置是相对于浏览器窗口

JS === 拖拽盒子

样式: .box{width:300px;height: 300px;background:pink;position: absolute;user-select: none} //大盒子 == user-select : 取消了用户选中文本 .title{width: 100%;height: 50px; background:#ccc;cursor:move;} //拖动title 大盒子移动 .left-handler{width:5px;height: 100%;background

js-特效部分学习-拖拽效果

一.客户区大小ClientWidth和ClientHeight <style> #box { width: 200px; height: 200px; background-color: aquamarine; margin: 20px; border: 20px solid red; padding:20px; } </style> </head> <body> <div id="box"> </div> <

html5 拖拽的简要介绍

1,首先,你要告诉计算机那个元素可以拖动,或者是一张图,或者是一个盒子,在标签里面加上 draggable="true" 2,然后,监听该元素被拖动的函数 ondragstart="drag(event)" 3,drag 里面告诉计算机是那个元素被拖动的 ev.dataTransfer.setData("Text",ev.target.id); 4,接下来将拖动的元素放到哪个盒子,(或者是经过那个盒子,经过某个盒子的时候触法 ondragove

再谈React.js实现原生js拖拽效果

前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧一.不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用.即在MyF

javascript小实例，PC网页里的拖拽（转）

这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖动的,然后房子上面的显示的楼栋号,也跟着图片一起移动,当时js能力还不行,未能实现项目经理的要求,不过后来项目经理又把这个效果推掉了,换了另外的一个效果尽管项目经理不想要这个效果了,但是当时就在我心里留下了一个节,到今天都忘不了这个梗. 好了,这就是我今天想写这篇博客的初衷,希望能给想实现这类拖拽效果,但是不知道该怎么去实现的同学,提供一种思路,不给青春留遗憾,当然实现拖拽的方法有很多,这里就只介绍JavaScript中的

JS Event 鼠标拖拽事件

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS Event鼠标拖拽事件</title> <style> #box{width:200px;height:200px;background:#000;position:absolute;}

百度拖拽(鼠标事件)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>百度拖拽</title> <style> *{ padding: 0; margin: 0; } #wrap{ position: absolute; left:0; top:0; width: 300px; height: 400px; b

网页常用动态效果--拖拽

拖拽的关键在于事件源及坐标位网页中的基本拖拽: 1.设定是否激活拖拽的标识flag; 2.当拖拽点按下时,在window范围内的移动: 3.拖拽区域不能超过窗口,加判断 HTML: body>div CSS代码: <style> div{ width:100px; height:100px; background: lightgrey; position: absolute; top:0; left:0; } </style> JQ代码: <script> $(