2. 程式人生 > >自己動手搞一個拖動滑塊，點選水波紋效果

自己動手搞一個拖動滑塊，點選水波紋效果

阿新 • • 發佈：2019-02-19
window.onload = function() { var lineDiv = document.getElementById('lineDiv'); //長線條 var minDiv = document.getElementById('minDiv'); //小方塊 var minVals = document.getElementById('vals'); //左長線 var msg = document.getElementById("msg"); //最上面的資訊 var ifBool = false; //判斷滑塊是否按下 var lineDiv_W = getPosition(lineDiv).width; //長線的長度
var lineDiv_L = getPosition(lineDiv).left; //長線距離html的left var minDiv_W = getPosition(minDiv).width; //滑塊的長度 var minDiv_L = getPosition(minDiv).left; //滑塊距離html的left var Slider_W_MAX = lineDiv_W - minDiv_W; //滑塊可以滑動的最大值px，範圍是0~Slider_W_MAX var minNum = 0; //最小值 var maxNum = 500; //最大值 var
startNum = 100; //起始值 var endNum = 400; //結束值 var min_Px = Slider_W_MAX / maxNum * startNum; //滑塊可以滑動的最小px var max_Px = Slider_W_MAX / maxNum * endNum; //滑塊可以滑動的最大px var minDiv_left=0;   //當前滑塊的位置 /*    Slider_W_MAX     1元對應的px？                    1      maxNum              1           1px對應的金額？ */
function initSlider(initPX) { //設定滑塊的初始位置 console.log(initPX); minDiv_left=initPX;   //設定滑塊的位置 minDiv.style.left = initPX + "px"; minVals.style.width = initPX + "px"; msg.innerText = parseInt(initPX / Slider_W_MAX * 100); } (function() { //初始化滑塊位置 if(startNum >= 0) { //求出startNum對應的px initSlider(Slider_W_MAX / maxNum * startNum) } })() //事件 var start = function(e) { ifBool = true; //console.log("滑鼠按下") } var move = function(e) { //console.log("滑鼠拖動") if(ifBool) { var x; //記錄滑塊距離html的距離left if(!e.touches) { //相容PC端 x = e.clientX; } else { //相容移動端 x = e.touches[0].pageX; } minDiv_left = x - lineDiv_L; //小方塊相對於父元素（長線條）的left值  if(minDiv_left >= Slider_W_MAX) { minDiv_left = Slider_W_MAX; } if(minDiv_left < 0) { minDiv_left = 0; } //設定拖動後小方塊的left值 initSlider(minDiv_left) } } var end = function(e) { if(minDiv_left>max_Px){ initSlider(max_Px); } if(minDiv_left<min_Px){ initSlider(min_Px); } ifBool = false; } //滑鼠按下方塊 minDiv.addEventListener("touchstart", start); minDiv.addEventListener("mousedown", start); //拖動 window.addEventListener("touchmove", move); window.addEventListener("mousemove", move); //滑鼠鬆開 window.addEventListener("touchend", end); window.addEventListener("mouseup", end); //獲取元素的絕對位置 function getPosition(node) { var width = node.offsetWidth; //元素寬度 var height = node.offsetHeight; //元素高度 var left = node.offsetLeft; //獲取元素相對於其根元素的left值var left var top = node.offsetTop; //獲取元素相對於其根元素的top值var top current = node.offsetParent; // 取得元素的offsetParent // 一直迴圈直到根元素　　 while(current != null) {　　 left += current.offsetLeft;　　 top += current.offsetTop;　　 current = current.offsetParent;　　 } return { "width": width, "height": height, "left": left, "top": top }; } }

相關推薦

自己動手搞一個拖動滑塊，點選水波紋效果

window.onload = function() { var lineDiv = document.getElementById('lineDiv'); //長線條 var minDiv = document.getElementById('minDiv'); //小方塊

一個可以隨手勢拖動的EditText，點選更改內容，附帶解決軟鍵盤遮擋終極方法

慣例先來看效果圖： 最近產品同學的需求，要求定製一個可拖拽可編輯的文字，原本覺得還挺簡單，不就是寫個EditText處理一下touch事件麼，後來做了發現還有些小坑，記錄一下，順便給大家做個參考。 試錯 首先我嘗試自定義一個EditText，重寫o

手指拖動小球移動，點選空白處，小球不跟著移動

package com.example.xxx.circle; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import and

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。 下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

破碼之拖動滑塊

元素 打開網頁 text con fin odin time click class #破碼之拖動滑塊 # encoding:utf-8 import selenium import time from selenium import webdriver from sel

html5拖動滑塊

滑塊 拖動 -1 lib ges div src spa left html5中input有增加type=range。這為拖動滑塊提供了很大的便利。下面是他的屬性： <!DOCTYPE html> <html lang="en"> <hea

個人筆記005--原生JS實現簡單的拖動滑塊驗證

早上起來後瀏覽網站時看到別人的拖動滑塊驗證，就想著做一個demo，等到有時間把這個優化到到現在的專案（用的是圖片驗證碼）。以下程式碼就是百度之後再修改一下的： <!DOCTYPE html> <html> <head> <meta charset

拼圖式拖動滑塊的驗證——使用selenium+python實現

寫京東登入的自動化測試用例的時候遇到了這樣一個問題 當你不能成功登入多次、就連正確賬戶密碼登入（偶發）的時候，都會出現驗證環節（PS.當然也有死活不出現的時候，比如寫文的今天9月30），妥妥阻擋了自動化測試的腳步。 於是我們可以怎麼使用selenium+python來完成

自定義的可拖動滑塊驗證碼的實現方式（SlideView）

概述： 最近專案中需要在密碼輸入一定次數後盡心拖動滑塊進行驗證，防止惡意程式程式碼一直測試登入，用了GitHub的一個開源庫SlideView，但是直接依賴原始碼是改不了樣式的，下邊給出自定

JavaScript實現拖動滑塊驗證

//一、定義一個獲取DOM元素的方法 var $ = function(selector){ return document.querySelector(selector); }, box =

hammer.js---拖動滑塊實現驗證的小demo

1.先看一下效果圖  移動端實現，簡單方便，只要稍作修改比如用Math.random()函式生成一個隨機的位置，然後判斷位置差即可。 快去試一試這個很fashion的庫吧。 2.看一下HTML結構

iOS手勢識別的詳細使用(拖動,縮放,旋轉,點選,手勢依賴,自定義手勢)

1、UIGestureRecognizer介紹手勢識別在iOS上非常重要，手勢操作移動裝置的重要特徵，極大的增加了移動裝置使用便捷性。iOS系統在3.2以後，為方便開發這使用一些常用的手勢，提供了UIGestureRecognizer類。手勢識別UIGestureRecogn

自己動手寫一個自動登錄腳本gg

簡單 只需要 自己 不同 enum -s class rep 使用 1.下載一個sshpass工具 2.安裝sshpass，安裝到tools文件夾 3.把tools文件夾的路徑加入到/etc/bashrc vim /etc/bashrc

自己動手編寫一個網絡圖片爬蟲

網絡 浪費 原理 get 應用 crawl 方法 網絡圖 理解 如今基本上我們的大部分時間都是浪費在瀏覽網頁上的，網頁有許多的媒體資源，其中最常見的是圖片。當我們瀏覽到比較好的網站的時候，看到比較好看的圖片總是會忍不住要下載。通常來說我們都是右鍵單擊圖標選擇圖片另存為，選擇

[js高手之路]html5 canvas動畫教程 - 自己動手做一個類似windows的畫圖軟件

箭頭 erb 寬度 pow(x type row center shape htm 這個繪圖工具，我還沒有做完，不過已經實現了總架構，以及常見的簡易圖形繪制功能： 1，可以繪制直線，圓，矩形，正多邊形【已完成】 2，填充顏色和描邊顏色的選擇【已完成】 3，描邊和填充功

html5 canvas動畫教程 - 自己動手做一個類似windows的畫圖軟件

.cn pic 箭頭 uid .com 教程 amp 設置 一個 制直線，圓，矩形，正多邊形【已完成】 2，填充顏色和描邊顏色的選擇【已完成】 3，描邊和填充功能的選擇【已完成】 後續版本： 橡皮擦，坐標系，線形設置，箭頭，其他流程圖形，裁剪與調整圖形。。。。。 終極目標：

自己動手實現一個簡單的JSON解析器

pair bool 優點 輕量 結束 pan isdigit 復雜 false 1. 背景 JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。相對於另一種數據交換格式 XML，JSON 有著諸多優點。比如易讀性更好，占用空間更少等

自己動手寫一個單鏈表

兩個指針 isl linklist nextn mob 內部 數組 nds pty 文章有不當之處，歡迎指正，如果喜歡微信閱讀，你也可以關註我的微信公眾號：好好學java，獲取優質學習資源。 一、概述 單向鏈表（單鏈表）是鏈表的一種，其特點是鏈表的鏈接方向是單向的，對鏈表

【原創】自己動手寫一個服務網關

exception 負責 lis world 前置 create ble ddr load 引言 什麽是網關？為什麽需要使用網關？ 如圖所示，在不使用網關的情況下，我們的服務是直接暴露給服務調用方。當調用方增多，勢必需要添加定制化訪問權限、校驗等邏輯。當添加API網關後，

手摸手教你自己動手實現一個前端路由

前言 用過現代前端框架的同學，對前端路由一定不陌生, vue, react, angular 都有自己的 router, 那麼你對 router 的工作原理了解嗎？ 如果還不瞭解, 那麼請跟我一起來手寫一個簡單的前端路由, 順便了解一下. 實現路由的2種方式 hash模式