滑动跟随手指横向滑动

浪去项目有个头图滑动横向滑动的需求,故写次demo
<!DOCTYPE html>
<html>
<head>
	<title>滑动跟随手指横向滑动</title>
	<style type="text/css">
		.spirit {              /* 方块的class名称*/
         position: absolute;
         width: 50px;
         height: 50px;
         background-color: red;
		}
	</style>
</head>

<body style="height: 100%;margin:0;padding:0">

<div id="canvas"  style="position: relative;width:100%;height:580px;"></div>
<!-- <script type="text/javascript" src="jquery-1.11.2.min.js"></script> -->
 <script type="text/javascript">
 	// define global variable
var canvas = document.getElementById("canvas"),
       spirit, startX, startY;
    // touch start listener

function touchStart(event) {
         event.preventDefault();
         if (spirit ||! event.touches.length) return;
         var touch = event.touches[0];
         startX = touch.pageX;
         startY = touch.pageY;
         spirit = document.createElement("div");
         spirit.className = "spirit";
         spirit.style.left = startX + "px";
         spirit.style.top = startY + "px";
         //console.log(startX);
         canvas.appendChild(spirit);

}
 canvas.addEventListener("touchstart", touchStart, false);
function touchMove(event) {
		 //alert("a");
         event.preventDefault();
         if (!spirit || !event.touches.length) return;
         var touch = event.touches[0],
              x = touch.pageX - startX,
              //y = touch.pageY - startY;
        spirit.style.webkitTransform = 'translate3d(' + x + 'px,'+'0px,0px)';
}

canvas.addEventListener("touchmove", touchMove, false);
function touchEnd(event) {
         if (!spirit) return;
         //canvas.removeChild(spirit);
         spirit = null;
}

canvas.addEventListener("touchend", touchEnd, false);
 </script>
</body>
</html>

时间: 2024-11-10 08:59:03

滑动跟随手指横向滑动的相关文章

移动端H5单页面跟随手指滑动切换组件PageSlider

转载地址:http://www.ifrans.cn/pageslider/?replytocom=38914 PageSlider PageSlider 是一个基于zepto.js用于实现H5单页面跟随手指上下滑动切换的组件,支持通过transform3D启动GPU加速,目前仅支持移动端touch设备. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name=&

关于小程序 scroll-view 左右横向滑动没有效果(无法滑动)问题

小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动之分,在这次项目中刚好需要用到横向滑动,但在测试过程中发现横向滑动没有了效果(静止在那里没移动过),经个人调试发现: 1.scroll-view 中的需要滑动的元素不可以用 float 浮动: 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的: 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排: 4.包裹 sc

重写listview,横向滑动出现删除按钮,点击按钮删除item

首先看一下效果图: 接下来看具体操作: 准备一个删除按钮的布局,新建button.xml文件,代码如下所示: <?xml version="1.0" encoding="utf-8"?> <Button xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/btn" android:layout_width=&q

实现移动端touch事件的横向滑动列表效果

要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)-->touchmove(手指移动多少,元素相应移动多少). 接下来讲讲实现逻辑: 其实就是手指拖动列表向哪个方向移动多少像素,并设置左右拖动的边界值. 附上代码及注释: <div id="common_wrap" class="common-wrap"> <h4 class="common-kit__

iOS8 UICollectionView横向滑动demo

在iOS8中,scrollView和加载在它上面的点击事件会有冲突,所以做一个横向滑动的界面最好的选择就是UICollectionView. 这个效果可以用苹果公司提供的官方demo修改而来,下载地址https://github.com/SeniorZhai/LineLayout. 主要介绍涉及到的几个属性,在LineLayout.m文件中: //cell大小 self.itemSize = CGSizeMake(200, 250); //水平滑动 self.scrollDirection =

Android 自定义 HorizontalScrollView 打造再多图片(控件)也不怕 OOM 的横向滑动效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38140505 自从Gallery被谷歌废弃以后,Google推荐使用ViewPager和HorizontalScrollView来实现Gallery的效果.的确HorizontalScrollView可以实现Gallery的效果,但是HorizontalScrollView存在一个很大的问题,如果你仅是用来展示少量的图片,应该是没问题的,但是如果我希望HorizontalScr

jQuery控制的不同方向的滑动(横向滑动等)

引入jquery.js,复制以下代码,即可运行. Css代码   <style type="text/css"> .slide { position: relative; height: 200; lightyellow; } .slide .inner { position: absolute; left: 0; bottom: 0; height: 100; lightblue; width: 100% } </style> 1.slidetoggle()

横向滑动的GridView

思路: GridView行数设置为一行,外面套一个HorizontalScrollView,代码中设置GridView宽度 xml代码 <HorizontalScrollView android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none" > <LinearLayout android:lay

ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题

ios7中使用scrollview来横向滑动图片,自动产生偏移竖向的偏移 问题 如图红色为scrollview的背景色,在scrollview上加了图片之后,总会有向下的偏移 设置contentOffset也不管用 在ios7中controller有个 automaticallyAdjustsScrollViewInsets属性,默认为YES if (iOS7&&[self respondsToSelector:@selector(automaticallyAdjustsScrollVie