JavaScript左右拖動滑動的按鈕效果
分享一段程式碼例項,它實現了滑鼠左右拖動滑動的按鈕效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> * { margin: 0; padding: 0; } .div_big { margin: 30px 20px; width: 200px; height: 36px; line-height: 36px; text-indent: 50px; border: 1px solid #ccc; background-color: #ECE4DD; position: relative; border-radius: 5px; } .div_samll { width: 44px; height: 44px; background-color: #88C86B; position: absolute; top: -4px; z-index: 20; border-radius: 22px; } </style> </head> <body> <div class="div_big"> <span>向右滑動完成驗證</span> <div class="div_samll"></div> </div> <script> var div1 = document.getElementsByClassName('div_samll')[0]; var span1 = document.getElementsByTagName('span')[0] var f = true; var p = false; var kep = function() { div1.onmousedown = function() { //滑鼠按鈕按下執行事件 m = true; f = true; span1.innerHTML = ''; } if (m === true) { p = true; } return p; } var oup = function() { document.onmouseup = function() { //滑鼠按鈕鬆開執行事件 f = false; console.log(f); } return f; } document.onmousemove = function(event) { event = event || window.event; //獲得相對於body定位的橫標值; x = event.clientX //獲得相對於body定位的縱標值; y = event.clientY nk = x - 30; if (kep() && oup()) { if (nk > 0 && nk <= 158) { div1.style.marginLeft = nk + 'px'; } } } </script> </body> </html>
相關文章
- JavaScript表格tr行左右拖動效果JavaScript
- CSS3滑動開關按鈕效果CSSS3
- jQuery滑動方式上下左右滾動效果jQuery
- 按鈕滾動條效果
- 擼一款”靈動“的滑動按鈕
- 仿switch風格滑動按鈕
- flutter好用的輪子推薦五-列表左右滑動帶出按鈕選項Flutter
- JavaScript 限定範圍拖動效果JavaScript
- Android左右滑動效果的程式碼實現Android
- js拖動實現左右圖片對比效果JS
- 左右帶有按鈕圖片水平滾動
- 微信小程式實現卡片左右滑動效果微信小程式
- 直播帶貨app原始碼,實現移動端的按鈕拖動APP原始碼
- web前端仿手機左右滑動(手滑+自動滑動)Web前端
- javascript div元素滑鼠拖動效果詳解JavaScript
- JavaScript左右滑動切換的選項卡詳解JavaScript
- js左右滑動選項卡效果程式碼例項JS
- 左右迴圈滑動的viewpagerViewpager
- ListView 實現帶有Filpper效果的左右滑動刪除 ItemView
- unity 實現輪盤方式的按鈕滾動效果Unity
- RecyclerView 、ViewPager 左右滑動衝突Viewpager
- Android 禁止ViewPager左右滑動AndroidViewpager
- jQuery 效果 – 滑動jQuery
- 直播平臺搭建原始碼,qt自定義滑動按鈕原始碼QT
- JavaScript點選按鈕彈出層效果JavaScript
- 跟隨滾動條漂浮的返回頂部按鈕效果
- (iOS)從0到Double系列 如何刻出一個可拖動的導航浮動按鈕iOS
- ViewPager 禁止左右滑動完美解決Viewpager
- 按鈕拖拽移動
- JavaScript點選按鈕數字加1效果JavaScript
- RecyclerView滑動到底部的時候點選按鈕直接返回頂部View
- jQuery拖動調整左右兩列寬度jQuery
- JavaScript帶有百分比的滑動條效果JavaScript
- 直播app開發,滑動式的頂部導航欄(左右橫向滑動)APP
- php短視訊原始碼,向左滑動顯示刪除按鈕PHP原始碼
- Android 設定TextView滑動滾動條和滑動效果AndroidTextView
- 移動端觸屏拖動頁面滾動效果
- 短視訊直播原始碼,拖動滑塊實現圖片驗證效果原始碼