HTML5实现左右滑动数据变化

最新推荐文章于 2022-03-11 16:27:42 发布
最新推荐文章于 2022-03-11 16:27:42 发布
阅读量1.5k 收藏
点赞数
分类专栏： HTML 文章标签： 左右滑动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/junjun4561482/article/details/96479923
版权

在HTML中怎么样实现左右滑动？

代码附上

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/jquery-3.4.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/TouchSlide.1.1.js"></script>
	<!-- <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">

	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> -->

	<!-- <link rel="stylesheet" href="css/bootstrap.min.css">  
	<script src="js/jquery-3.4.1.js"></script>
	<script src="js/bootstrap.min.js"></script> -->
	
</head>
<body>
<div class="container">
	<br>
   <!-- <div class="jumbotron">
        <h1>欢迎登陆页面！</h1>
        <p>这是一个超大屏幕（Jumbotron）的实例。</p>
        <p><a class="btn btn-primary btn-lg" role="button">
        学习更多</a>
      </p>
   </div> -->
   
   <div class="table-responsive" >
   	<table id="table1" class="table" data-toggle="table">
   		<caption>响应式表格布局</caption>
   		<thead>
   			<tr>
   				<th>产品</th>
   				<th>付款日期</th>
   				<th>状态</th>
   			</tr>
   		</thead>
   		<tbody id="clss">
   			<!-- <tr>
   				<td>产品1</td>
   				<td>23/11/2013</td>
   				<td>待发货</td>
   			</tr>
   			<tr>
   				<td>产品2</td>
   				<td>10/11/2013</td>
   				<td>发货中</td>
   			</tr>
   			<tr>
   				<td>产品3</td>
   				<td>20/10/2013</td>
   				<td>待确认</td>
   			</tr>
   			<tr>
   				<td>产品4</td>
   				<td>20/10/2013</td>
   				<td>已退货</td>
   			</tr>
   			<tr>
   				<td>产品1</td>
   				<td>23/11/2013</td>
   				<td>待发货</td>
   			</tr>
   			<tr>
   				<td>产品2</td>
   				<td>10/11/2013</td>
   				<td>发货中</td>
   			</tr>
   			<tr>
   				<td>产品3</td>
   				<td>20/10/2013</td>
   				<td>待确认</td>
   			</tr>
   			<tr>
   				<td>产品4</td>
   				<td>20/10/2013</td>
   				<td>已退货</td>
   			</tr>
   			<tr>
   				<td>产品1</td>
   				<td>23/11/2013</td>
   				<td>待发货</td>
   			</tr>
   			<tr>
   				<td>产品2</td>
   				<td>10/11/2013</td>
   				<td>发货中</td>
   			</tr>
   			<tr>
   				<td>产品3</td>
   				<td>20/10/2013</td>
   				<td>待确认</td>
   			</tr>
   			<tr>
   				<td>产品4</td>
   				<td>20/10/2013</td>
   				<td>已退货</td>
   			</tr>
   			<tr>
   				<td>产品1</td>
   				<td>23/11/2013</td>
   				<td>待发货</td>
   			</tr>
   			<tr>
   				<td>产品2</td>
   				<td>10/11/2013</td>
   				<td>发货中</td>
   			</tr>
   			<tr>
   				<td>产品3</td>
   				<td>20/10/2013</td>
   				<td>待确认</td>
   			</tr>
   			<tr>
   				<td>产品4</td>
   				<td>20/10/2013</td>
   				<td>已退货</td>
   			</tr> -->
   		</tbody>
   </table>
</div>
</div>
</body>
<script>
	var start_i = 0;
	var end_i = 10;
	$(document).ready(function(){
	  var textg = "";
	  for(var i = start_i; i < end_i; i++)
	  {
	  	textg += '<tr>';
	  	textg += '<td>产品'+(i+1)+'</td>';
	  	textg += '<td>23/11/2013</td>';
	  	if(i % 4 == 0)
	  	{
	  		textg += '<td>待发货</td>';	
	  	}
	  	else if(i % 4 == 1)
	  	{
	  		textg += '<td>发货中</td>';	
	  	}
	  	else if(i % 4 == 2)
	  	{
	  		textg += '<td>待确认</td>';	
	  	}
	  	else
	  	{
	  		textg += '<td>已退货</td>';
	  	}
	  	
	  	textg += '</tr>';
	  }
	  document.getElementById("clss").innerHTML = textg;
	  document.addEventListener("plusscrollbottom", pullupfresh, true);
	});
	function pullupfresh()
	{
		// alert("aaa");
		var textg = "";
		for(var i = start_i; i < end_i; i++)
		{
			textg += '<tr>';
			textg += '<td>产品'+(i+1)+'</td>';
			textg += '<td>23/11/2013</td>';
			if(i % 4 == 0)
			{
				textg += '<td>待发货</td>';	
			}
			else if(i % 4 == 1)
			{
				textg += '<td>发货中</td>';	
			}
			else if(i % 4 == 2)
			{
				textg += '<td>待确认</td>';	
			}
			else
			{
				textg += '<td>已退货</td>';
			}
			
			textg += '</tr>';
		}
		document.getElementById("clss").innerHTML = textg;
	}
	
	// window.addEventListener("popstate", function(e) { 
	// 	alert("aaa");
	// }, true);
	 
	 var h = document.documentElement.clientHeight,

          mybody = document.getElementsByTagName('body')[0];
		  // mybody = document.getElementById('table1');
          // mybody.style.height = h + 'px';

        //返回角度

        function GetSlideAngle(dx,dy) {

          return Math.atan2(dy,dx) * 180 / Math.PI;

        } 

        //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
        function GetSlideDirection(startX,startY, endX, endY) {

          var dy = startY - endY;
          var dx = endX - startX;
          var result = 0; 

          //如果滑动距离太短
          if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
             return result;
          }

          var angle = GetSlideAngle(dx, dy);
          if (angle >= -45 && angle < 45) {
             result = 4;
          }else if (angle >= 45 && angle < 135) {
             result = 1;
          }else if (angle >= -135 && angle < -45) {
             result = 2;
          }else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
             result = 3;
          }

          return result;
        } 

        //滑动处理
        var startX, startY;
        mybody.addEventListener('touchstart', function (ev){
          ev.preventDefault();
          startX = ev.touches[0].pageX;
          startY = ev.touches[0].pageY; 
        }, false); 

        mybody.addEventListener('touchmove', function (ev){

			var endX, endY;
			ev.preventDefault();
			endX = ev.changedTouches[0].pageX;
			endY = ev.changedTouches[0].pageY; 
			var direction = GetSlideDirection(startX, startY, endX, endY);

        switch (direction){

          case 0:

            // alert("没滑动");

            break;

          case 1:

            // alert("向上");

            break;

          case 2:

            // alert("向下");

            break;

          case 3:

            // alert("向左");
			if(start_i > 0)
			{
				start_i -= 10;
				end_i -= 10;
			}
			// $(this).carousel(startX >endX ? (start_i+=10);:'prev');
			var textg = "";
			for(var i = start_i; i < end_i; i++)
			{
				textg += '<tr>';
				textg += '<td>产品'+(i+1)+'</td>';
				textg += '<td>23/11/2013</td>';
				if(i % 4 == 0)
				{
					textg += '<td>待发货</td>';	
				}
				else if(i % 4 == 1)
				{
					textg += '<td>发货中</td>';	
				}
				else if(i % 4 == 2)
				{
					textg += '<td>待确认</td>';	
				}
				else
				{
					textg += '<td>已退货</td>';
				}
				
				textg += '</tr>';
			}
			document.getElementById("clss").innerHTML = textg;
            break;

          case 4:

            // alert("向右"+start_i);
			// if(start_i > 0)
			// {
				start_i += 10;
				end_i += 10;
			// }
			// getElementsByTagName
			// $(this).carousel(startX >endX ? (start_i+=10);:'prev');
			var textg = "";
			// alert(start_i);
			for(var i = start_i; i < end_i; i++)
			{
				textg += '<tr>';
				textg += '<td>产品'+(i+1)+'</td>';
				textg += '<td>23/11/2013</td>';
				if(i % 4 == 0)
				{
					textg += '<td>待发货</td>';	
				}
				else if(i % 4 == 1)
				{
					textg += '<td>发货中</td>';	
				}
				else if(i % 4 == 2)
				{
					textg += '<td>待确认</td>';	
				}
				else
				{
					textg += '<td>已退货</td>';
				}				
				textg += '</tr>';
			}
			document.getElementById("clss").innerHTML = textg;
            break;
          default:          

        } 

      }, false);
</script>
</html>

不正之处，请多多指教！

ice_junjun
关注
专栏目录
【原创】实现一个简单的移动端左右滑动翻页+ 点击下标翻页 利用：HTML5+CSS+Js
小狮狮的博客
06-16 1万+
//【如何做一个简单的手机端页面的翻页】//第一步：创建移动端页面内  HTML + CSS  【注】可用弹性布局   但需要注意的是  外层盒子的定位//第二步： 思考问题  要实现怎样的效果？ //1. 手指滑动时触发事件【左右】两个方向   //2.点击footer部分的下标实现切换效果  //3.点击footer部分的下标实现下标颜色变化//第三步；编写JS代码 //添加监听事件 d...
html中table固定头部表格tbody可上下左右滑动
01-19
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： 标题一 标题二 标题三 标题标题标题标题标题标题标题标题标题四
html5左右自动滑动,HTML5页面点击和左右滑动页面滚动
weixin_35280108的博客
05-31 446
String path = request.getContextPath();String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%>HTML5测试$(function() {var startX, startY...
html+js(swiper.js)+css左右滑动切换页面效果，适配移动端
热门推荐
TANKING，开源开发者！
05-03 1万+
demo：截图：结构：1、swiper-progress.html2、css文件夹-swiper.css -swiper.min.css3、js文件夹-swiper.min.js -swiper.jsswiper-progress.html&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="C...
vue实现h5左右滑动
a913396的博客
06-29 1856
<div @touchstart="moveStart" @touchmove="onMove" @touchend="moveEnd"></div> // 手势滑动开始 moveStart(e) { this.startX = e.targetTouches[0].pageX this.startY = e.targetTouches[0].pageY .
html中table固定头部表格tbody可左右滑动
yunduanaoligei的博客
03-24 705
这篇文章主要介绍了html中table固定头部表格tbody可上下左右滑动，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： 标题一 标题二 标题三 标题标题标题标题标题标题标题标题标题四 标题标题标题标题标题标题标题标题标题五 标题标题标题标题标题标题标题标题标题六 信息一 信息二 信息三 信息信息信息
HTML5全屏图片左右滑动轮播特效代码
03-20
HTML5全屏图片左右滑动轮播特效代码是一种利用HTML5技术实现的现代网页设计元素，主要用于展示全屏的图片并提供用户友好的交互体验。这个特效代码适用于那些希望在网站上展示大图或者图像集的场景，如产品展示、摄影...
html5实现手机端滑动删除添加列表效果源码.zip
11-16
综上所述，"html5实现手机端滑动删除添加列表效果源码.zip"中包含的代码实例将展示如何利用HTML5的触摸事件、CSS3动画和数据绑定等技术，构建一个响应式且具有高度交互性的移动应用列表。开发者可以参考此源码，学习...
8套精美 智能数据大屏+HTML5 源码
最新发布
04-11
在数据大屏的实现中，HTML5能够创建动态、交互式的用户界面，允许用户与数据进行实时互动。例如，通过Canvas元素，开发者可以绘制复杂的图表和图形；SVG（可缩放矢量图形）则提供了高质量的图像展示，无论放大多少倍...
html5手指滑动刻度尺选择值特效
09-08
HTML5手指滑动刻度尺选择值特效是一种利用现代浏览器对HTML5的增强支持实现的交互式用户界面功能。在移动设备尤其是触摸屏设备上，这种特效能够提供更直观、更具触感的操作体验，使用户可以通过手指滑动来选择特定的...
h5实现移动端横向滚动tab，并响应内容
01-10
博客地址：http://blog.csdn.net/qq_34020571/article/details/78972006 有疑问可私信留言。。
html5手机触屏左右滑动图动画切换效果
06-12
效果描述： 可以放到移动端的html5动画切换效果 默认也可以自动切换 支持鼠标点击拖动、滑动 使用方法： 1、将head中的样式引入到你的样式表中 2、将body中需要的代码部分拷贝过去即可
移动端html5实现列表左滑删除
08-17
移动端html5实现列表左滑删除
左滑删除html5
10-20
web或手机端 仿苹果侧滑删除的html代码，可以完美实现
左右滑动
weixin_54664933的博客
02-09 411
今天的我们将学习有关图案左右滑动的方法，以及小案例的制作。 在案例的制作过程中最不可缺的技术就是css3的动画效果，下面我们来认识一下css3中有哪些动画效果吧！首先是css3@keyframes 规则，@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。(搭配animation使用。IE9，以及更早的版本不支持@keyframe 规则或 animation 属性)；其次是css3过渡效果，过渡是从一种样式逐渐变成另一中的效
html5 表格向下,html中table固定头部表格tbody可上下左右滑动代码实例
weixin_35758982的博客
06-04 832
本篇文章小编给大家分享一下html中table固定头部表格tbody可上下左右滑动代码实例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下：html代码：标题一标题二标题三标题标题标题标题标题标题标题标题标题四标题标题标题标题标题标题标题标题标题五标题标题...
html如何设置左右滑动
weixin_56848461的博客
03-11 3909
html如何设置左右滑动
html表格到层的相对位置,html,左右拖动表格.doc
weixin_30707165的博客
06-04 166
html,左右拖动表格篇一：html表格布局实例[html]表格布局之实例版| [<前面我们讲了html表格的基础知识，今天我们通过一个实例让大家更清晰的了解下表格的用途。例如：我们做一个简单的网站布局，代码如下：bordercolor=#00ff99产生如下的表格：这是一张整体的表格，第一行和第四行分别跨度了三列，这里用colspan=3来限制，而第二行的“搜索框”占用了两列的位置，用co...
JS平滑无缝滚动实现———实现首页广告自动滚动效果（附实例）
weixin_30522183的博客
05-05 590
本文我们实现纯JS方式的滚动广告效果。 先show一下成品： 首先是网页样式： 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. border: 1px dashed #CCC; 5. width: 1280px; 6. height:200px; 7. } 8. #demo img { 9. bor...
微信小程序实现左右滑动交互代码解析
在微信小程序开发中，实现左右滑动功能是一项常见的需求，尤其在模仿类似探探这样的社交应用时。本文将介绍如何在微信小程序中创建一个具有左右滑动事件并伴有按钮动画效果的界面。 首先，微信小程序中的`swiper`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值