html5滑动删除,html5清除浮动

html5怎么实现页面左右滑动（下图区域），可以左右滑动但不需要换页

1、创建两个html文件，一个test一个test2。

2、打开test页面，在里面创建一个div，并给其添加onmousedown与move方法。

3、打开后我们发现是一个棕绿的页面。

4、定义两个变量，startx为鼠标按下的坐标，endx为鼠标移动的坐标。

5、实现鼠标点击执行的down方法，在里面通过clientX获得鼠标按下坐标，并赋值给startx。

6、接着在实现鼠标移动的move方法，获得鼠标移动的坐标，并通过startx与endx相减判断是否向左边滑动大于30的距离，是的话就切换到test2页面。

7、现在我们打开test页面，向左滑动会提示切换页面（这个可以去除），确定后就切换到了test2页面，向右滑动切换的方法同理。

相关问答

Q1: 写一个js向左滑动删除 交互特效的插件 删除事件怎么添加

使用了h5的touchmove等事件，以及用js动态改变css3的translate属性来达到动画效果：

!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"

titlehtml5向左滑动删除特效/title

style

* {

padding: 0;

margin: 0;

list-style: none;

}

header {

background: #f7483b;

border-bottom: 1px solid #ccc

}

header h2 {

text-align: center;

line-height: 54px;

font-size: 16px;

color: #fff

}

.list-ul {

overflow: hidden

}

.list-li {

line-height: 60px;

border-bottom: 1px solid #fcfcfc;

position: relative;

padding: 0 12px;

color: #666;

background: #f2f2f2;

-webkit-transform: translateX(0px);

}

.btn {

position: absolute;

top: 0;

right: -80px;

text-align: center;

background: #ffcb20;

color: #fff;

width: 80px

}

/style

script

/*

* 描述：html5苹果手机向左滑动删除特效

*/

window.addEventListener('load', function() {

var initX; //触摸位置

var moveX; //滑动时的位置

var X = 0; //移动距离

var objX = 0; //目标对象位置

window.addEventListener('touchstart', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

initX = event.targetTouches[0].pageX;

objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;

}

if (objX == 0) {

window.addEventListener('touchmove', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

moveX = event.targetTouches[0].pageX;

X = moveX - initX;

if (X = 0) {

obj.style.WebkitTransform = "translateX(" + 0 + "px)";

} else if (X 0) {

var l = Math.abs(X);

obj.style.WebkitTransform = "translateX(" + -l + "px)";

if (l 80) {

l = 80;

obj.style.WebkitTransform = "translateX(" + -l + "px)";

}

}

}

});

} else if (objX 0) {

window.addEventListener('touchmove', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

moveX = event.targetTouches[0].pageX;

X = moveX - initX;

if (X = 0) {

var r = -80 + Math.abs(X);

obj.style.WebkitTransform = "translateX(" + r + "px)";

if (r 0) {

r = 0;

obj.style.WebkitTransform = "translateX(" + r + "px)";

}

} else { //向左滑动

obj.style.WebkitTransform = "translateX(" + -80 + "px)";

}

}

});

}

})

window.addEventListener('touchend', function(event) {

event.preventDefault();

var obj = event.target.parentNode;

if (obj.className == "list-li") {

objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/px\)/g, "")) * 1;

if (objX -40) {

obj.style.WebkitTransform = "translateX(" + 0 + "px)";

objX = 0;

} else {

obj.style.WebkitTransform = "translateX(" + -80 + "px)";

objX = -80;

}

}

})

})

/script

/head

body

header

h2消息列表/h2

/header

section class="list"

ul class="list-ul"

li id="li" class="list-li"

div class="con"

你的快递到了，请到楼下签收

/div

div class="btn"删除/div

/li

li class="list-li"

div class="con"

哇，你在干嘛，快点来啊就等你了

/div

div class="btn"删除/div

/li

/ul

/section

/body

/html

Q2: HTML5重点内容总结

一、 HTML5新增的标签

（1）header nav main  footer  section article hgroup  figure figcaption  aside 

    video  audio canvas

                （2）如何让新标签兼容低版本浏览器：  html5shiv.js

二、 HTML5新增的表单控件

    一、表单控件的新属性

            input type="text"  placeholder=""  required  autofocus  pattern="abc"

    二、新增的表单控件

    （1）input type="email"

    （2）input type="url"

      （3）数字控件：  type="number"

      (4)  滑动组件：  type="range"

      (5)  拾色器：      type="color"

      (6)  日期控件：    type="date"

三、本地存储

    1、 三种本地存储 ：  cookie webStorage(localStorage  sessionStorage)

    2、localStorage的API

      (1)写入：  localStorage.setItem(键，值);  //值只能是字符串

        localStorage.user = "123" localStorage["user"] = "123"

      （2）读取  var user = localStorage.getItem("user")

                  var user = localStorage.user;

        (3)删除：  localStorage.removeItem("user")    localStorage.clear()

        （4）修改：  localStorage.setItem("user","890")

    3、sessionStorage的API

sessionStorage.setItem(键，值);

        sessionStorage.getItem(键);

        sessionStorage.removeItem(键);

sessionStorage.clear();

    **********重点**********

      4、cookie webStorage(localStorage  sessionStorage)三者的区别

四、离线存储

    （1） *.manifest  (*.appcache) 

          index.html  html manifest="*.manifest"

    (2) 理解离线存储的更新方式

五、移动端的布局思路：

1、设备像素比（倍率）  逻辑像素尺寸 （360px  320px  375px  414px）

            window.devicePixelRatio

        2、 meta name="viewport" content="width=device-width,maximum-

scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no""

3、使用rem单位

六、地理定位

if (navigator.geolocation){ 

            navigator.geolocation.getCurrentPosition(success,error,{

                timeout: 5000

            });

            function success(pos){

                纬度:  pos.coords.latitute

                经度：  pos.coords.longtitude

            }

        }

        navigator.geolocation.watchPosition(success);

七、地理定位和百度地图API的结合

八、视频，音频  video autoplay="autoplay" controls="controls" loop="loop" poster=""

preload="preload"  audio

九、移动端事件： 

(1) ontouchstart  ontouchmove  ontouchend

(2) 如何判断是否为移动端：  if ("ontouchstart" in document){}

        (3) 移动端事件的事件对象及常用属性

          e.touches[0].clientX  e.touches[0].clientY  e.touches[0].target

        (4) 移动端常见问题及解决方案：

a、 click事件 300ms的延迟：  1zepto的tap事件  （2） fastclick.js

b、 zepto的tap事件有点透问题 ：  （1） fastclick.js

        (5) zepto的touch模块：  tap  singleTap  doubleTap  longTap 

                swipeLeft  swipeRight  swipeUp  swipeDown

十、swiper.js的使用  （参考官网）

十一、 canvas

(1)  canvas width="600" id="can"/canvas    300*150

        (2)  var can = document.getElementById("can");

      var cxt = can.getContext("2d");

  cxt.beginPath();

  cxt.moveTo(100,200);

  cxt.lineTo(200,400);

              cxt.strokeStyle = '#f00';

  cxt.stroke();

                  cxt.clearRect(0,0,200,300);

                  context.globalCompositeOperation="destination-out";  (了解)

Q3: 如何实现列表滑动删除按钮

使用Ionic这种框架伟大的地方在于用户界面元素默认准备好了，意味着你可以设计更好的app而不需要很强的用户体检设计背景，而且让你可以更容易实现这些模式。

这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表，当用户滑动列表项到左边的时候。这是一个处理删除列表数据时候常用的模式。本教程将涵盖创建这个滑动删除按钮所需要的一切。

删除例子

1.创建Ionic2应用

通过以下命令行语句创建新的Ionic2应用：

ionic start ionic2-delete blank --v2

这里我使用了–v2标志位，为了告诉Ionic命令行我们创建的是Ionic2项目。

2.准备列表数据

我们需要一些维护数据，因此要建立一些试验数据。创建我们项目的blank模版默认建立了一个Home组件，这个教程我们就在此基础上修改。

既然Ionic2还很新，我将这些步骤尽量阐述详细，下面我们看看app/home/home.js文件：

import {Page} from 'ionic/ionic'

伦理片

@Page({

templateUrl: 'app/home/home.html',

})

export class HomePage {

constructor() {}

}

constructor 方法在组件创建是执行，因此我们在这里准备试验数据。你可能已经注意到我们已经给这个组件定义了模版，随后将展示如何在模版中使用在这里添加的数据。

home.js 文件修改如下：

import {Page} from 'ionic/ionic'

@Page({

templateUrl: 'app/home/home.html',

})

export class HomePage {

constructor() {

this.items = [

{title: 'item1'},

{title: 'item2'},

{title: 'item3'},

{title: 'item4'},

{title: 'item5'},

{title: 'item6'}

];

}

}

现在我们有一些数据可以删除了。

3.修改主页（HOME）的模版

接下来我们编辑home.html来建立模版。现在的模版是包含一些创建ion-card的代码，而我们要用ion-list来代替：

修改 home.html如下：

ion-navbar *navbar

ion-title

Home

/ion-title

/ion-navbar

ion-content

ion-list

ion-item

I'm just a plain old item in a list...

/ion-item

/ion-list

/ion-content

这只是创建了只有一个单项的列表，接着我们将添加滑动元素。

继续修改home.html如下：

ion-navbar *navbar

ion-title

Home

/ion-title

/ion-navbar

ion-content

ion-list

ion-item-sliding

ion-item

Swipe me to the left

/ion-item

ion-item-options

button danger (click)="removeItem()"icon trash/icon Delete/button

/ion-item-options

/ion-item-sliding

/ion-list

/ion-content

通过上下对比，你应该看到：我们用ion-item-sliding替换了ion-item 。这允许我们创建一个ion-item-options 部件，当用户滑动列表元素时，它将显示出来。

这段代码还创建了一个删除按钮，当ion-item-options部件显示出来时，可以点击按钮，这时会触发类中定义的removeItem （暂无，接下来添加）。另外，我们不止是一个单项，我们要为我们创建的数组的每一个数据创建滑动项，这里我使用ng-for。

还是修改home.html如下：

ion-navbar *navbar

ion-title

Home

/ion-title

/ion-navbar

ion-content

ion-list

ion-item-sliding *ng-for="#item of items"

ion-item

{{item.title}}

/ion-item

ion-item-options

button danger (click)="removeItem(item)"icon trash/icon Delete/button

/ion-item-options

/ion-item-sliding

/ion-list

/ion-content

现在我们循环在类中定义的items数组的每个item项，然后为每个项创建一个 ion-item-sliding指令。注意我们使用的是#item而不是item。这将创建一个本地引用到迭代获得的item，这让我们可以使用 { {item.title} } 输出标题，它还允许我们传递item的引用到我们的 removeItem 函数。

我们现在有了一个列表包含所有数据，用户可以滑动并显示出一个delete按钮。现在剩下的是当用户点击时做点什么事。因此我们设置一个简单监听以便调用方法从我们先前创建的测试数据中删除一项。

4.创建方法删除数据

现在我们去到 home.js 文件编写方法处理数据删除。当前但删除按钮被点击时传送一个数据项给 removeItem。类似的，你可以非常容易的实现例如删除、编辑、分享、播放动画等你需要的东西，不仅是删除。

修改 home.js 如下：

import {Page} from 'ionic/ionic'

@Page({

templateUrl: 'app/home/home.html',

})

export class HomePage {

constructor() {

this.items = [

{title: 'item1'},

{title: 'item2'},

{title: 'item3'},

{title: 'item4'},

{title: 'item5'},

{title: 'item6'}

];

}

removeItem(item){

for(i = 0; i this.items.length; i++) {

if(this.items[i] == item){

this.items.splice(i, 1);

}

}

}

}

现在你向左侧滑动列表项，然后点击删除按钮，它就会从列表中删除。就像下面这样：

删除例子

5.添加一个编辑按钮

这里将不会将Edit按钮的全过程走一遍，但是你可以轻易扩展活动项并添加编辑按钮，如下所示：

ion-item-options

button primaryEdit/button

button danger (click)="removeItem(item)"icon trash/icon Delete/button

/ion-item-options

现在滑动时你有两个按钮了，看下面：

添加编辑按钮

然后你可以编写Edit按钮的点击事件了，具体取决于你的需求。

Q4: html5点击删除按钮去删除table中的一行为什么没有反应？

 script type="text/javascript"

function getData() {

var listNo = document.getElementById('listNo').value;

var batchNum = document.getElementById('batchNum').value;

var classNo = document.getElementById('classNo').value;

var exp = document.getElementById('exp').value;

var number = document.getElementById('number').value;

var per = [

{ listNo1: listNo, batchNum1: batchNum, classNo1: classNo, exp1: exp, number1: number },

];

var tbody = document.getElementById('tbMain');

for (var i = 0; i  per.length; i++) { //遍历一下json数据

var trow = getDataRow(per[i]); //定义一个方法,返回tr数据

tbody.appendChild(trow);

}

}

function getDataRow(h) {

var row = document.createElement('tr'); //创建行

var listNoCell = document.createElement('td'); //创建第一列listNo

listNoCell.innerHTML = h.listNo1; //填充数据

row.appendChild(listNoCell); //加入行 ，下面类似

var batchNumCell = document.createElement('td');//创建第二列batchNum

batchNumCell.innerHTML = h.batchNum1;

row.appendChild(batchNumCell);

var classNoCell = document.createElement('td');//创建第三列classNo

classNoCell.innerHTML = h.classNo1;

row.appendChild(classNoCell);

var expCell = document.createElement('td');//创建第四列exp

expCell.innerHTML = h.exp1;

row.appendChild(expCell);

var numberCell = document.createElement('td');//创建第五列number

numberCell.innerHTML = h.number1;

row.appendChild(numberCell);

//到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮

var delCell = document.createElement('td');//创建第六列，操作列

row.appendChild(delCell);

var btnDel = document.createElement('input'); //创建一个input控件

btnDel.setAttribute('type', 'button'); //type="button"

btnDel.setAttribute('value', '删除');

btnDel.setAttribute('onclick', 'delete1(this)');

delCell.appendChild(btnDel); //把删除按钮加入td

//删除操作

return row; //返回tr数据

}

function delete1(obj) {

if (confirm("确定删除这一行嘛？")) {

//找到按钮所在行的节点，然后删掉这一行

obj.parentNode.parentNode.remove()

// obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode);

//var curRow = obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.rowIndex;

// tbMain.deleteRow(curRow);

//btnDel - td - tr - tbody - 删除(tr)

//刷新网页还原。实际操作中，还要删除数据库中数据，实现真正删除

}

};

/script

 请采纳