手机端js实现滑块推动
代码编写：（写的格式有点差，凑合看吧，但是功能是实现了的）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<script type="text/javascript" src="./jquery-1.8.0.min.js"></script>
<style type="text/css">
.silder{
width: 80%;
height: 20PX;
margin: 0 auto;
margin-top: 100PX;
background-color: green;
position: relative;
}
.silderImg{
margin-top:-2PX;
margin-left: 0PX;
}
.silderLine{
height: 200PX;
margin-left: 12PX;
background-color: red;
width: 1PX;
}
#content{
position:absolute;
left:0PX;
top:0PX;
}
</style>
</head>
<body id="body">
<div class="silder">
<div id="content">
<img id="img" class="silderImg" src="./silder.png">
<div class="silderLine"></div>
</div>
</div>
<script type="text/javascript">
var oevent=new Function('e','if (!e.clientX) e = e.changedTouches[0];return e')
function touchMove(e){
e.preventDefault();
var parent=$(this).parent()[0];
var temp=$(parent).parent()[0].offsetLeft;
var x = oevent(e).clientX;
var oldLeft = ($(parent).css("left").replace("px","")/1);
var changeX = x-temp;
if(changeX <= -12){
changeX = -12;
}else if(changeX >= $(parent).parent().width()-12){
changeX = $(parent).parent().width()-12;
}
console.log(changeX);
$(parent).css("left",changeX);
}
document.getElementById('img').addEventListener("touchmove", touchMove, false);
</script>
</body>
</html>
手机端js实现滑块推动的更多相关文章
- 手机端 : js设置table内容 加载更多，并头部锁定悬浮
<script src="js/jquery.min.js" type="text/javascript"></script> < ...
- 手机端js事件支持(event)
http://blog.163.com/rex_blog/blog/static/1944801012013102743014369/ 所有被测试的浏览器都支持touchstart.touchend和 ...
- 手机端js模拟长按事件（代码仿照jQuery）
代码编写: $.fn.longPress = function(fn) { var timeout = undefined; var $this = this; for(var i = 0;i< ...
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
- 移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
- js 判断pc端或手机端
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...
- bootstrap实现 手机端滑动效果，滑动到下一页，jgestures.js插件
bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...
- js仿手机端九宫格登录功能
js仿手机端九宫格登录功能 最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下,写的不好的请指出,我会及时修改.谢谢. 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说 ...
随机推荐
- 怎么清除file控件的文件路径
还记得上次做一个文件上传,后来测试告诉我说,如果我要是不选择文件了呢?该怎么办?我说:简单啊,做一个取消按钮不就完事了吗!然后我就想一个file空间做一个取消是多么简单的事,用js处理可是想怎么样就怎 ...
- magento
打开 magento/app/code/core/Mage/Core/Model/Session/Abstract/varien.php//if (isset($cookieParams['doma ...
- jQuery获取自身HTML
<html><head> <title>jQuery获取自身HTML</title> <meta http-equiv="Content ...
- Boolean强制转换
数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 空字符串 Number 任何非0数字值(包括无穷大) 0和NaN Object ...
- 热门WEB前端职业你只需要掌握这些
在知名的互联网企业里工作是一件很美好的事情,有很多的工作机会,而且企业们通过高薪以及令人羡慕的福利来争夺最优秀的人才.但是如果你花了大量的时间在招聘网站上和公司的帖子上,你可能会注意到在网页设计这个工 ...
- iOS：runtime最全的知识总结
runtime 完整总结 好东西,应该拿出来与大家分享... 南峰子博客地址:http://southpeak.github.io/blog/categories/ios/ 原文链接:http://w ...
- 背景建模SACON
http://www.cnblogs.com/dwdxdy/p/3530862.html
- ionic 报错%1 is not a valid Win32 application
Fixed the problem by installing python version 3.0 and above will do下载Python3.0或以上版本 python官网传送门:htt ...
- Linux就这个范儿 第8章 我是Makefile
Linux就这个范儿 第8章 我是Makefile P287 Makefile的作用就是——自动化编译,一旦写好,只需要一个make命令(解析Makefile,执行Makefile中描述的操作),整个 ...
- canvas学习之圆周运动
html部分 ...... <body> <canvas id="myCanvas" width="400" height="400 ...