Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use javascript to achieve left-slide deletion", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "how to use javascript to achieve left-slide deletion" bar!

Javascript: 1, calculate the font size of the root node HTML; 2, initialize the font size of the root node HTML; 3, set the side slide display delete button; 4, through "event.preventDefault ()." Just delete the left slide.

This article operating environment: windows7 system, javascript1.8.5 version, Dell G3 computer.

How does javascript achieve left-slipping deletion?

Pure js left slide delete function

The code is as follows:

The js side slide shows the delete button * {margin:0;padding:0;} body {font-size:.14rem;} li {list-style:none;} I {font-style:normal;} a {color:#393939;text-decoration:none;} .list {overflow:hidden;margin-top:.2rem;padding-left:.3rem;border-top:1px solid # ddd;}. List li {overflow:hidden;width:120%;border-bottom:1px solid # ddd;}. List li a {display:block;height:.88rem Line-height:.88rem;-webkit-transition:all 0.3s linear;transition:all 0.3s linear;}. List li i {float:right;width:15%;text-align:center;background:#E2421B;color:#fff;} .swipeleft {transform:translateX (- 15%);-webkit-transform:translateX (- 15%);} / / calculate the font size of the root node HTML function resizeRoot () {var deviceWidth = document.documentElement.clientWidth, num = 750, num1 = num / 100 If (deviceWidth > num) {deviceWidth = num;} document.documentElement.style.fontSize = deviceWidth / num1 + "px";} / / the font size of the root node HTML initializes resizeRoot (); _ window.onresize = function () {resizeRoot ();} Side slip display delete button 1 delete side slip display delete button 2 delete side slip display delete button 3 delete / / side slip show delete button var expansion = null; / / whether there is an expanded listvar container = document.querySelectorAll ('.list li a'); for (var I = 0; I

< container.length; i++){ var x, y, X, Y, swipeX, swipeY; container[i].addEventListener('touchstart', function(event) { x = event.changedTouches[0].pageX; y = event.changedTouches[0].pageY; swipeX = true; swipeY = true ; if(expansion){ //判断是否展开，如果展开则收起 expansion.className = ""; } }); container[i].addEventListener('touchmove', function(event){ X = event.changedTouches[0].pageX; Y = event.changedTouches[0].pageY; // 左右滑动 if(swipeX && Math.abs(X - x) - Math.abs(Y - y) >

0) {/ / prevent event bubbling event.stopPropagation (); if (X-x > 10) {/ / right slide event.preventDefault (); this.className = ""; / / right slide away} if (x-X > 10) {/ / left slide event.preventDefault () This.className = "swipeleft"; / / expand left slide expansion = this;} swipeY = false;} / / slide if up and down (swipeY & & Math.abs (X-x)-Math.abs (Y-y) < 0) {swipeX = false;}}) } Thank you for your reading, the above is the content of "how to use javascript to achieve left-slip deletion". After the study of this article, I believe you have a deeper understanding of how to use javascript to achieve left-slip deletion, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.