2. 程式人生 > >js 長圖拖動效果

js 長圖拖動效果

阿新 • • 發佈：2019-02-19

  專案中遇到的長圖模式切換，耗時半天琢磨出來的。記錄下來，防止自己忘掉。

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>

4. 總結

  一開始覺得有點難度，主要還是scrollHeight、offsetTop、offsetHeight、pageX、clientX等掌握不牢導致的，後面要好好研究這些東西的差異，並記錄demo。

相關推薦

js 長圖拖動效果

  專案中遇到的長圖模式切換，耗時半天琢磨出來的。記錄下來，防止自己忘掉。 1. 知識點羅列 css： 型別 描述 備註 overflow hidden 隱藏長圖 position absolute

js：簡單的拖動效果

p s move ntb rec cti release 樣式 left eve 效果演示：https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="w

RecyclerView的Item點選事件，增加刪除Item瀑布流動畫效果，長按拖動Item，RecyclerView複雜佈局、實現新聞頻道選擇器

RecyclerView的Item點選事件的實現，增加和刪除Item使用瀑布流動畫效果，長按拖動Item，RecyclerView複雜佈局的實現使用、RecyclerView去實現今日頭條新聞頻道選擇器。 使用ItemTouchHelper實現Item的拖動交換，由於Recy

js實現一個可以相容PC端和移動端的div拖動效果

拖動時候用到的三個事件：mousedown、mousemove、mouseup在移動端都不起任何作用。 畢竟移動端是沒有滑鼠的，查資料後發現，在移動端與之相對應的分別是：touchstart、touc

實現GridView長按拖動圖示，其餘圖示自動移位的效果(仿webos的note風格)

參考文章 ：高仿小米launcher(ZAKER)跨屏拖動item 上述文章是在放在item後，2個位置做一個交換，本文在此基礎上，實現了拖動過程中，其它item自動移位的效果。其實就是修改了一下OnMove動作中的執行動畫過程以及資料重新整理的邏輯，主要還是得益於上述文章

js 禁止瀏覽器預設的圖片拖動效果

我是在谷歌瀏覽器中測試的，百度的搜尋結果都沒什麼用，最後在谷歌搜尋出了答案。 地址：http://stackoverflow.com/questions/4211909/disable-dragging-an-image-from-an-html-page <!D

使用canvas和js實現多種圖形拖動效果

<!doctype html> <html> <head>     <title> </title>     <meta http-equiv="X-UA-Compatible" content="IE=9

Android實現GridView的item長按拖動刪除完美實現（帶動畫效果）

領導這幾天讓做一個專案，就是可以實現像支付寶首頁一樣的可以長按拖動，刪除的介面，以前沒做過，領導讓我做的時候覺得簡直是老虎吃天，無從下手啊，可是領導的任務還是要實現的，沒辦法，就自己網上找咯，但是網上的demo五花八門無法滿足我的需求，而且bug還很多，所以最後

Android 仿 窗簾效果 和 登錄界面拖動效果 （Scroller類的應用） 附 2個DEMO及源代碼

@override 宋體 off down != 過程 事件 學習 border 在android學習中，動作交互是軟件中重要的一部分。當中的Scroller就是提供了拖動效果的類，在網上。比方說一些Launcher實現滑屏都能夠通過這個類去實現。以下要說的

js 鼠標拖拽效果實現

element width ima ado cti rem clas fun gif 效果： 源碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

js實現可拖動的佈局

思路：採用flex佈局，js即時修改固定列的寬度 注意：父元素需設定position:relative；因offsetLeft和offsetTop是相對於具有定位的（position:absolute或者position：relative）父級元素的距離 html： <!DOCTYPE ht

請教picturebox截圖儲存到陣列並實現截圖拖動組合的問題

VS2017從元資料無註釋！AutodeskRevit二次開發VS2017從元資料無註釋！AutodeskRevit二次開發 net4.5選單BUGwinform製作列印net4.5選單BUGwinform製作列印 父窗體BindingNavigator導航按鈕如何操作當前活

Touch.js 手勢庫 拖動 縮放和 旋轉！！！

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="

JS video 禁止拖動進度條

需要實現一個效果，視訊載入的過程中禁止拖動進度條快進。 開始呢我想著把控制元件禁掉，自動播放解決。 <video id="video" src="http://kuangjia.nenzhu.com/cs/psu.mp4" autoplay=”autoplay” width=

laya用panel實現拖動效果（拉地圖效果）

layabox最常見的拖動效果是用list實現的，但是也可以用panel實現，並且，panel元件的功能之一就是用來實現拖動的，不存在說panel比list實現拖動更好。 用panel實現拖動時，需要給panel新增子容器，例如box，然後再往子容器box中新增想要滑動的內容，在box尺寸內

c# 實現用滑鼠拖動沒有標題欄的視窗(窗體的任何部分都可實現拖動效果)

上面形式的窗體，實現窗體的任何部分都可實現拖動 首先需要引入非託管程式碼，直接呼叫windows api         public const int WM_NCLBUTTONDOWN = 0xA1;         public const int HT_CAPT

WindowManager實現懸浮可拖動效果

現在360手機衛士有個流量統計的效果，開啟流量統計後，在桌面上會出現一個顯示流量的窗體，在任何介面都可以自由拖動。 模仿這個功能，做了一個統計手機訊號強度的Demo, 介面效果如下: 從上面的截圖可

table實現列寬的拖動效果

部門有一個專案介面用的html，所有的列表都用的原生table控制元件，一個同事找到我問有沒有辦法實現table的列寬拖動，好幾年沒摸過前臺了，還真給問住了，經過網上查詢資料等，最終解決，記錄下： <!DOCTYPE html> &l

JS-實現可拖動的div；實時監聽input標籤value變化

實現可拖動的div var mover = new Mover(document.getElementById("header")); // js封裝：實現可拖動的div. function Mover(title) { this.obj = title; this.st

Swift禁用UIWebView和WKWebView的下拉拖動效果

使用UIWebView或WKWebView載入網頁時，如果頁面處於最頂端時，使用者用手指往下拖動，會露出灰色空背景。同樣頁面在最底部的時候，繼續向上拖動，下方也會露出空背景。 要禁止這個拖動效果，可進行如下設定： 1 theWebView.scroll