代码编写：（写的格式有点差，凑合看吧，但是功能是实现了的）

<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实现滑块推动的更多相关文章

  1. 手机端 : js设置table内容 加载更多，并头部锁定悬浮

     <script src="js/jquery.min.js" type="text/javascript"></script> < ...

  2. 手机端js事件支持(event)

    http://blog.163.com/rex_blog/blog/static/1944801012013102743014369/ 所有被测试的浏览器都支持touchstart.touchend和 ...

  3. 手机端js模拟长按事件（代码仿照jQuery）

    代码编写: $.fn.longPress = function(fn) { var timeout = undefined; var $this = this; for(var i = 0;i< ...

  4. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  5. 《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  6. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  7. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  8. bootstrap实现 手机端滑动效果，滑动到下一页，jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

  9. js仿手机端九宫格登录功能

    js仿手机端九宫格登录功能 最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下,写的不好的请指出,我会及时修改.谢谢. 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说 ...

随机推荐

  1. 设计模式：状态模式（State）

    定  义:当一个对象内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要解决的是当控制一个对象状态转换的条件表达式过于复杂时的情况, 把状态的判断逻辑转移到表示不同状态的一系列子 ...

  2. LightOj1366 - Pair of Touching Circles(求矩形内圆的对数)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1366 题意:一个H*W的矩形,现在要放入两个外切的圆,问能放多少对这样的圆,其中圆心和 ...

  3. UITabBar 设置字体的颜色（选中状态/正常状态）setTitleTextAttributes

    UITabbar有个setTintColor这个方法,可以理解为,高亮的时候,或者点击后的颜色设置. UITabBarItem有个setTitleTextAttributes的方法,是用来设置字体的颜 ...

  4. 折腾Centos6.4记

    背景: 闲置了一台Thinkpad,之前装的是Kali Linux,但无线网卡挂掉了,加之硬盘分区不当,平时几乎没怎么用,重新使用kali的livecd进行分区,然后安装,总是出错,尝试了七八次,仍然 ...

  5. django GET POST

    django需要读取客户端get和post请求的值.读取处理方法和异常记录于此. 参考链接: http://stackoverflow.com/questions/12518517/request-p ...

  6. Hibernate三种状态的转换

    hibernate的状态 hibernate的各种保存方式的区(save,persist,update,saveOrUpdte,merge,flush,lock)及 对象的三种状态 hibernate ...

  7. Java数据库连接——JDBC基础知识（操作数据库：增删改查）

    一.JDBC简介 JDBC是连接java应用程序和数据库之间的桥梁. 什么是JDBC? Java语言访问数据库的一种规范,是一套API. JDBC (Java Database Connectivit ...

  8. Android 开发环境搭建以及编译

    两种搭建编译环境的方式,一种方法是用户安装虚拟机,然后安装基础的Ubuntu12.04.2 系统,利用提供的工具和详细的使用步骤,搭建编译环境:另外一种方法是用户安装虚拟机,然后直接加载 “搭建好的U ...

  9. android studio ，Gradle DSL method not found: 'compile()'

    用gradle构建android工程出现  Gradle DSL method not found: 'compile()' 错误 检查你外层的build.gradle文件中是不是用了compile方 ...

  10. TNS-01201: Listener cannot find executablen

    有哥们说,他的数据库监听无法启动,报如下错误: 让其查看一下环境变量是否设置,说设置没问题,但是还是报同样的错误.只好让其截图了: 1.监听文件 2.profile文件 从上面的截图中,可以看出,pr ...