移动端滑动事件---实战笔记
2024-05-08 21:07:26
2019独角兽企业重金招聘Python工程师标准>>> 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>点工-首页</title>
<link href="../../css/diangong.css" rel="stylesheet" type="text/css">
<link href="../../css/base.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../js/jquery-1.7.js"></script></head>
<body>
<div class="dg_Map"><div class="insideSearchBox"><div class="insideSearchBox_bg"></div><div class="postAdd"><span><img src=""></span>请登录</div><div class="Search_case"><span></span><a class="Clear_history">深圳</a></div> <a href="#" class="listIcon"><b></b></a></div><div class="Move_person"><div class="circle"><a onClick="toshare()" href="#" class="ClickOrder"></a></div></div><div class="near_shifu"><img src="../../images/near_shifu.png" /></div><footer class="footBar"><div class="footer_bg"></div><div style="position: absolute;top: 10%;left: 0;width: 100%;height: 50px;"><div class="stepBar"><img src="../../images/searchType.png" style="position: absolute; z-index: 5;" id="play"/></div> </div><div class="stepTxt"><span>全部</span><span>配送</span><span>安装</span><span>维修</span><span>搬运</span><span>拆装</span></div></footer> <div class="Xiadan"><p id="Clur" class="Tiwce"><a href="javascript:void(0);" class="on">普通下单</a><a href="javascript:void(0);">点 工</a></p><div class="xd_Cont"><div class="pt_Xiadan1" style=" display:block;"><dl class="productStyle"><dt>商品类别</dt><dd><a href="#" class="on"></a><a href="#" class=""></a><a href="#" class=""></a><a href="#" class=""></a><a href="#" class=""></a></dd></dl><dl class="serveStyle"><dt>服务类别</dt><dd><a href="#" class=""></a><a href="#" class=""></a><a href="#" class="on"></a><a href="#" class=""></a><a href="#" class=""></a></dd></dl></div><div class="pt_Xiadan2" style="display:none;"><dl class="productStyle"><dt>商品类别</dt><dd><a href="#" class=""></a><a href="#" class="on"></a><a href="#" class=""></a><a href="#" class=""></a><a href="#" class=""></a></dd></dl></div></div><div class="blueBg"><button>下 单</button></div></div>
</div>
<!--个人中心弹窗-->
<div class="per_center" style="display: none;"><div class="feedback"></div><div class="tx_box"><img src="../../images/userHead.png" class="userHead" /><p>郝仁</p> </div><div class="account_info"><span>积分：<i>0</i></span><span>金额：<i>100</i></span><span>充值<img src="../../images/arrow.png"/></span></div><div class="info_list"><ul><li>我的账户</li><li>我的订单<span></span></li><li>常用地址</li><li>常用师傅</li><li>关于我们</li></ul></div><!--个人中心列表缩放按钮--><div class="suofang"><img src="../../images/list_up.png" /></div><!--底部三功能--><div class="three_options"><div class="first_options"><div class="option_bg"></div><p>邀请返现</p></div><div class="second_options"><div class="option_bg"></div><p>注册有礼</p></div><div class="third_options"><div class="option_bg"></div><p>充值套餐</p></div></div>
</div>
<!--个人中心弹出后，首页部分变灰-->
<div id="tanchuang_bg" style="display: none;"></div>
<script src="../../js/diangong.js"></script>
<script>
//
(function(){var LSwiperMaker = function(o){ var that = this;this.config = o;this.control = false;this.sPos = {};this.mPos = {};this.dire; this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);} LSwiperMaker.prototype.move = function(e){ var point = e.touches ? e.touches[0] : e;this.control = true;this.mPos.x = point.screenX;this.mPos.y = point.screenY;$("#play").css("left",this.mPos.x+"px"); } LSwiperMaker.prototype.end = function(e){var $width = $(".stepBar").width();var $left = parseInt($("#play").css("left"));var m = parseInt($width/6)+2;for(var i=0;i<5;i++){if($left>m*i && $left<m*(i+1)){$("#play").css("left",m*i);}}if($left>m*5){$("#play").css("left",m*5);}} window.LSwiperMaker = LSwiperMaker;document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
}())
//
//
var a = new LSwiperMaker({bind:document.getElementById("play")
})
//
</script>
</body>
</html>转载于:https://my.oschina.net/daladida/blog/732597
移动端滑动事件---实战笔记相关推荐
- jquery 手指滑动多半屏_JS拖拽专题(五)——「玩出花儿来」移动端滑动事件的封装...
欢迎来到我的JS拖拽专题系列文章,本章节将是拖拽系列的最后一篇.感谢大家的支持^_^ 上一章节我们说到了拖拽让图片相互之间交换位置,相对来说是一个比较综合的示例,涉及到了矩形的碰撞检测,勾股定理计算两 ...
- h5滚动时侧滑出现_HTML5移动端触摸事件以及滑动翻页效果
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
- 移动端页面滑动事件穿透问题及其解决方案
滑动事件穿透: 在一个可滚动的列表页中打开弹窗,底部的页面理论上是不可滚动的,但是当滑动弹窗时,底部页面会跟随滚动,这就是所谓的页面滚动穿透的问题. 解决方案一: 当弹窗显示时,在父元素上添加fix类 ...
- html禁止页面左右滑动,js阻止移动端默认事件以及只阻止横向滚动事件方法
js阻止移动端默认事件,是在相关的touch事件的时候利用event.preventDefault();来阻止默认滚动行为,但是如果要实现阻止横向滚动行为而不阻止竖向滚动行为就要写一个方法通过手指滑动 ...
- 移动端上下拖动调整顺序效果_移动端上下滑动事件之--坑爹的touch.js
移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说 ...
- 便利贴--25{uniapp移动端滑动模块-因为uniapp打包后没有window，所以要另外去做监听和触控事件的传递}
便利贴--25{uniapp移动端滑动模块-因为uniapp打包后没有window,所以要另外去做监听和触控事件的传递} 效果,可以再继续看看我写的这篇文章.狠狠地点击这里 那么针对移动端,如 ...
- 移动端 touch 滑动事件
移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件.处理touch事件 ...
最新文章
- 解决“显示桌面”快捷方式的丢失
- laravel 分词搜索匹配度_DSSM文本匹配模型在苏宁商品语义召回上的应用
- Java基础查漏补缺（2）
- 计算机专业博士在体制内做啥工作,体制内裸辞，三十多岁大龄考博，我收获了什么？...
- java 迭代器的原理_Java集合框架迭代器Iterator实现原理解析
- js 将图片置灰_艾叶灰千万别扔——艾叶灰的神奇功效
- 前端基础-CSS如何布局以及文档流，对于新手来说，特别有用
- 区块链供应链金融应用场景解决方案
- 挪威养老基金给我们的启示
- 简单的maven引入外部jar项目打包
- Angr安装与使用之使用篇（十五）
- 网络安全Bypass网卡详细讲解
- 计算机一级查询证书编号,如何查询计算机一级证书编号
- SQLI-LABS——Page-2 Advanced Injections Less21~Less37
- RFID固定资产管理系统全生命周期管理办公资产
- 如何绘制业务架构图 — 1. 概述
- 机械键盘轴的小知识详解
- ffmpeg命令行视频剪辑与拼接
- root精灵黑屏，刷机精灵解除root
- mysql 如何修改数据库表结构_MySQL数据库如何修改表结构
热门文章
- 点到线段的最短距离——矢量法
- 【YOLOv4原文+翻译】YOLOv4：Optimal Speed and Accuracy of Object Detection
- 《自控力》第六章读书笔记
- 如何优雅的将Mybatis日志中的Preparing与Parameters转换为可执行SQL
- 推特 我们目前不能注册此邮箱地址_英雄联盟手游来了！最简单的下载/安装/注册教程！...
- CodeForces 85D Sum of Medians Splay | 线段树
- Android学习笔记_28_手势识别
- 普通路由器和聚合路由器的区别
- cadence 通孔焊盘_allegro通孔类焊盘的制作方法
- 记录一次C语言调用go生成的动态库的踩坑过程