h5项目需根据几条弯曲的线条让用户进行曲线式滑动,滑动时需实时响应某些样式,于是就有了下面这个实例。(可自定义多个子对象大小分别放在线条各处,以增加曲线滑动确认精度。)
手机端触屏手指曲线滑动确认 { //曲线滑动确认 curve_confirm: { _object: null, _object_children_length: null, _object_children:null, _is_start: false, _fn: function() {}, start: function() { ; (e) { self._is_start = true; ) { self._object_children[i]; sub_object.setAttribute(); sub_object.style.background = ""; } } (e) { e.preventDefault(); self._object; if (self._is_start) { ].pageX; ].pageY; ) { obj.childNodes[i], _w = _o.offsetWidth, _h = _o.offsetHeight; _left _o.offsetTop; _h)) { obj.childNodes[i]; sub_object.setAttribute(); sub_object.style.background ; } } } } (e) { self._is_start = false; ; ) { self._object_children[i]; ) { n++; } } self._object_children_length) { n = 0; ) { self._fn(); } } } document.addEventListener(); document.addEventListener(); document.addEventListener(); }, (o, fn) { (source) { {}; source) { result[key] class_clone(source[key]) : source[key]; } return result; } class_clone(touch_screen.curve_confirm); self._object = document.getElementById(o); self._object_children ); self._object_children_length = self._object_children.length; self._fn = fn; self._object) { alert(); return false; } self.start(); } } } () { touch_screen.curve_confirm.init(() { alert(); }); } html, body { margin padding width height overflow background #curve_item div { background position width height #curve_item #a #curve_item #b #curve_item #c #curve_item #d #curve_item #e