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

<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. java不常用语法汇总（jdk1.6）

    1.浮点数省略的0 System.out.println(.5f); //.5和0.5等价. 2.import static引入一个static method后,可以在这个类中直接使用这个method ...

  2. 20145211 《Java程序设计》第2周学习总结——桃花依旧笑春风

    教材学习内容总结 基本类型 整数 short 2字节,int 4字节,long 8字节 字节 byte 1字节 浮点数 float 4字节,double 8字节 字符 char 2字节(包括字母.汉字 ...

  3. nodejs技术面试问题整理

    1.meteor 是如何解决多回调的问题 参考 http://www.cnblogs.com/meteorcn/p/MeteorJS_Async_Fiber_Future_Wrap.html 2.一个 ...

  4. Java学习-026-类名或方法名应用之二 -- 统计分析基础

    前文讲述了类名或方法的应用之一调试源码,具体请参阅:Java学习-025-类名或方法名应用之一 -- 调试源码 此文主要讲述类名或方法应用之二统计分析,通过在各个方法中插桩(调用桩方法),获取方法的调 ...

  5. visual studio2013 添加 dll库

    在visual studio2013中添加C#的dll库.记录如下: 在solution explorer处右键,选择reference--> add References 选择Browser. ...

  6. 将一个UIView对象的内容保存为UIImage

    + (UIImage*)imageFromView:(UIView*)view{ UIGraphicsBeginImageContextWithOptions(view.bounds.size, YE ...

  7. jq的核心基础

    1.jq代码的风格    jq对象$().css();jQuery().css();  //获取jquery对象 示例$().css('background':'red').css('font-siz ...

  8. 无法定位程序输入点 crtis tailoredApp 于动态链接库MSVCR110.dll

    最近 在安装完   PHP开发,集成环境 WAMP  后,运行老是提示 “无法定位程序输入点 crtis tailoredApp 于动态链接库MSVCR110.dll”  网上百度,大多说是重新下载“ ...

  9. MQ基础

    1. 什么时候用activeMQ 在大量场合,ActiveMQ和异步消息对系统架构有意味深长的影响.下面举一些例子: 1). 异构系统集成 2). 取代RPC 3). 应用间的解耦 4). 事件驱动架 ...

  10. (Protype Pattern)原型模式

    定义: 原型模式:用原型实例指定创建对象的种类,并且通过拷贝这些原型来创建新的对象 适用性: 当我们系统中有一些类,在使用的时候都有同样需要大量的创建,而这样的创建是复杂的而且是浪费CPU,内存资源的 ...