原生javascript編寫手機端H5滑動效果

2021-08-17 22:52:57 字數 1646 閱讀 8257

主要用到touchstart 、touchmove、touchend三個函式的編寫。

效果如下:

h5滑動banner效果title>

* .box

.movebox

.movebox

li

style>

window.onload = function

() //觸控開始

function

boxtouchstart

(e)

function

boxtouchmove

(e)

if (cout == 3 && movex < 0)

movebox.style.webkittransform = "translatex(" + (endx + movex) + "px)"; //手指滑動時滑動物件隨之滑動

}function

boxtouchend

(e)

//手指向右滑動

} else else }}

//滑動物件事件繫結

movebox.addeventlistener("touchstart", boxtouchstart, false);

movebox.addeventlistener("touchmove", boxtouchmove, false);

movebox.addeventlistener("touchend", boxtouchend, false);

}script>

head>

style="position:absolute;width:100%;overflow:hidden;">

class="box">

class="movebox"

style="transition-duration:0.2s;transform: translatex(-0px);">

style="background:red;">1li>

style="background:yellow">2li>

style="background:blue">3li>

style="background:green">4li>

ul>

div>

body>

html>

《開源技術選型手冊》編寫手記

不經意間,開源技術選型手冊 已經面臨上市了,作為作者的一員,我很榮幸能參與其中。從本書策劃開始到現在,我能想起的都是博文視點編輯們的誠懇的眼光,和一絲不苟的工作態度。武漢博文是支勤奮的團隊,我仍然記得他們多次從武漢做火車來北京,放棄自己的週末休息時間,和參與的多位作者約在萬聖書園,共同討論策劃本書的...

javascript編寫規範

變數和函式 變數名應當遵循camel case,並且命名字首應當是名詞。以名詞作為字首可以讓變數和函式區分開來,因為函式名字首應當是動詞。比如 var count 10 var myname nicholas function getname 函式和方法常用單詞 can has is get set...

原生Servlet的編寫

1 自定義類實現servlet介面 2 實現servlet介面中的所有的抽象方法 servlet介面中大概有5個方法 其中處理請求和響應以及業務邏輯都是在service方法中 3 在service方法中編寫 4 在servlet2.5之前必須在wed專案的核心配置檔案wed.xml中配置訪問serv...