js 长图拖动效果

最新推荐文章于 2022-08-05 12:43:08 发布

路飞的红帽子

最新推荐文章于 2022-08-05 12:43:08 发布

阅读量1k

点赞数

分类专栏： 2017年9月文章标签： javascript 长图拖动

本文链接：https://blog.csdn.net/Stead_ford/article/details/78190965

版权

2017年9月专栏收录该内容

4 篇文章 0 订阅

订阅专栏

项目中遇到的长图模式切换，耗时半天琢磨出来的。记录下来，防止自己忘掉。

1. 知识点罗列

css：

类型	描述	备注
overflow	hidden	隐藏长图
position	absolute	方便拖动
height	auto	长图模式

js:

类型	描述	备注
event	ev\|\|event	兼容浏览器
clientX		鼠标相对父窗体的位置
offsetLeft		当前元素到父窗体的左边框距离
offsetTop		当前元素到父窗体的上边框距离
offsetHeight		当前元素的可视高度
scrollHeight		当前元素的高度(包含被隐藏的部分)

2. 资源

图片一张

窈窕淑女君子好逑

jquery
jquery.min.js

3. 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <div class="slider" id="slider" style="height:200px;width:200px;overflow: hidden;position:absolute;border:2px solid orange">
        <img id="drag_image" href="1.html" style="position:absolute;width:100%" src="02.jpg" />
    </div>
    <button id="button1" type="button" style="position:relative;top: 200px;">短图模式</button>
</body>
<script>
$("#button1").on("click", function() {
    var button1 = $("#button1");
    var slide = $("#slider");
    if (button1.text() == "长图模式") {
        button1.text("短图模式");
        slide.find("img").css("height", "auto");
    } else {
        button1.text("长图模式");
        slide.find("img").css("height", "100%");
    }
});

window.onload = function() {
    var oDiv = document.getElementById('slider');
    var oImg = document.getElementById('drag_image');
    oImg.onmousedown = function(ev) {
        var ev = ev || event;
        var disX = ev.clientX - this.offsetLeft; //鼠标相对于<包裹image的元素div>的位置
        var disY = ev.clientY - this.offsetTop;
        document.onmousemove = function(ev) {
            var ev = ev || event;
            var vertical_dis = ev.clientY - disY - oDiv.offsetTop; //竖直方向位移差
            var height_minus = oDiv.offsetHeight - oImg.scrollHeight;//包裹图片div与img的高度差  小于该值时不允许继续滑动
            // if(vertical_dis > 0 ){
            //  obj.style.top = 0+'px';
            // }else if(vertical_dis<height_minus){
            //  obj.style.top = height_minus +'px';
            // }else{
            //  obj.style.top = vertical_dis + 'px';
            // }
            oImg.style.top = vertical_dis > 0 ? 0 + 'px' : (vertical_dis < height_minus ? height_minus + 'px' : vertical_dis + 'px'); //等价于上述注释代码  
        }
        document.onmouseup = function() {
            document.onmousemove = document.onmouseup = null;
        }
        return false;  //必须要有 防止拖动产生异常 拖动结束退出函数
    }
}
</script>
</html>