基於webview的選擇滑動控制項（PC和wap版）

第一可以增量更新；

第二webview可以同時相容ios和安卓，減少開發量哦。

下面詳細解說，乙個webview的滑動控制項是如何製作的。

效果說明：

1、頁面展示效果為：

2、點選「距離」按鈕，彈出「選擇控制項」

3、點選距離控制項，或者拖動小圓點，都可以選擇合適的距離哦。

一、功能點：

1、點選控制項，讓小圓點跳到正確位置

2、拖動小圓點，讓其跟隨，並停在正確的位置

二、設計思路：

設計三個函式，分別是：

1、獲取dom元素的當前位置。getposition(_dom)

2、根據當前位置x，判斷小圓點懸停位置的乙個附近列表，該控制項有6個可以懸停的地方。nearlist(x)

3、讓小圓點跳到正確位置的動畫效果。moveto(start,end)

三、**實現：

1、獲取dom元素的當前位置。getposition(_dom)

輸入：傳入引數，dom元素。先獲取到dom元素。

var _btn = document.getelementbyid("dragbtn");

var _bar = document.getelementbyid("list_sel");

tips:

1) 注意需要使用parseint，將獲取到的offsetleft轉換為數字。而在使用數字的時候，記得要加上+"px「，這樣left屬性才能正確識別哦。

2) 這裡取元素的left值，使用dom.style.left，是取不到值的，應該使用offsetleft。使用dom.style.left的場景，應該是left屬性寫在html裡的，像這樣

//

1、getposition(_dom)
function
getposition(dom)

這裡是，只需要修改起點_start ，和間隔_space。就能獲得整個附近列表的設計。這樣子不用每次都去修改n個地方的引數。

tips:

大於》，小於

//

2、nearlist
function
nearlist(x)
else
if(_nearlist[0]<_x _x>
else
if(_nearlist[1]-_space/2<_x _x>
else
if(_nearlist[2]-_space/2<_x _x>
else
if(_nearlist[3]-_space/2<_x _x>
else
if(_nearlist[4]-_space/2<_x _x>
else
if(_nearlist[5]-_space/2<_x _x>
else
if(_x>_nearlist[5])
return
_movetox;
}

起點_startx是dom元素的位置，終點_endx是根據附近列表選擇的。動畫效果，使用延時來修改left的值。

tips:

這裡獲得的位置，都是數字。所以需要加上+"px"。

//

3、moveto
function
moveto(start,end)

1、給控制項bar新增點選事件，讓小圓點跳到正確的地方：

//

點選bar的事件
_bar.onclick = function
(e)

drag事件，是用onmousedown，onmouseup，onmousemove三個事件，加上乙個isdrag開關來實現的。

具體實現方式是：

開關先關掉isdrag=false；

當滑鼠按下onmousedown，觸發開關isdrag=true；

然後開始拖動onmousemove；

當滑鼠鬆開onmouseup時，關掉開關isdrag=false。

//

拖動btn的事件
var _isdrag=false
;    
varmyx;
vardobj;
function
movemouse(e)
}function
moving(e)
}document.onmousedown =moving;
document.onmouseup = function
(e)

wap版：

手機瀏覽器上（指ios和android機器）的觸屏事件，與pc上的滑鼠事件，有所對應，分別為：

ontouchstart == onmousedown

ontouchend == onmouseup

ontouchmove == onmousemove

獲取元素位置的方法也有所不同：

e.touches[0].pagex == e.clientx

針對上述兩個不同，對於wap端，做了改進。

詳情請用手機瀏覽器訪問：

效果圖：

基於arduino的光控窗簾 光控窗簾

課程設計報告 設計目的 居民對生活採光很重視,但現在的人們越來越 懶 對智慧型化的要求越來越高。為了方便居民在白天把窗簾及時拉開，晚上把窗簾及時拉上，我們設計了光控窗簾。本設計硬體主要是光敏感測器，電機以及微控制器 軟體主要採用c語言進行程式設計。同時，為了考慮實際我們還額外加了一些手動裝置，以防陰...

基於Vue的addRoutes實現許可權控制

從今年3月到現在入門前端也已經有兩個月了，這兩個月在自學的過程中遇到了許多問題也解決了其中一部分，但是現在才開始意識到把學習過程的問題整理到csdn上。最近老師布置了基於vue的許可權控制，網上查閱了許多部落格，例如 前端路上 這篇文章提到了vue2.0以上使用的addroutes增加動態路由的思路...

滑動平均 滑動軸承潤滑劑的選擇

滑動軸承一般使用普通礦物潤滑油和潤滑脂作為潤滑劑，在特殊情況下 如高溫系統 可用合成油 水和其他液體。這些潤滑劑的一般特性見表1。至於軸承金屬對潤滑油中新增劑的適應性，可見表2。根據一般規律，重載荷應採用較高黏度的油，輕載荷應採用低黏度的油。為了準確衡量滑動軸承負荷的大小，一般以軸承單位面積所承受的...