html5 实现简易 slider

原创 2016年08月30日 14:13:16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="zepto.js"></script>
    <style>
        .container {
            width: 900px;
            height: 100px;
            background-color: gray;
            position: relative;
        }

        .bar {
            height: 100px;
            width: 100px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
            -webkit-transition: left 300ms;
            transition: left 300ms;

        }
    </style>
</head>
<body>
<div class="container">
    <div class="bar" style="left: 10%;"></div>
</div>
<script>
    $(function () {
        $(".bar").on("touchstart", function (e) {
            $("#msg").append("<div>touchstart</div>");
        })
        $(".bar").on("touchmove", function (e) {
            var percent = e.changedTouches[0].pageX / 900;
            if (percent > 1) {
                percent = 1;
            }
            if (percent < 0) {
                percent = 0;
            }
            $(".bar").css("left", percent * 100 + "%");
        })
        $(".bar").on("touchend", function (e) {
            var percent = e.changedTouches[0].pageX / 900;
            if (percent > 1) {
                percent = 1;
            }
            if (percent < 0) {
                percent = 0;
            }
            $(".bar").css("left", percent * 100 + "%");
        })
    })
</script>
</body>
</html>

相关文章推荐

两种方式实现web html slider

最近做一个项目,要实现web页面上要实现slider,

html5 slider源码

  • 2015年04月28日 15:40
  • 36KB
  • 下载

使用HTML5和CSS3来设计slider

好吧,上次说要赶紧的补上几篇文章,结果淡定的失约了。。。又是近一个月才发一篇,真是让人郁闷。发现最近总是抽不出时间了,基本都是一个项目接一个项目的安排,自己不是在空闲的时候找不到合适的话题,就是在有纠...

html5之canvas实现模拟简易时钟

个人理解: moveTo 类似于提笔去另一个新地方 translate类似于把整张画布移位 如果画一条新路径不使用beginPath(),择stroke()会把之前画过的(即已经执行的stroke...
  • normol
  • normol
  • 2016年10月26日 20:17
  • 629

HTML5本地储存实现--简易留言板

效果展示:“` 简易留言板

HTML5 Canvas实现圆形时钟简易教程

十分感谢segmentfault thewindsword的指引。文章传送门:点击打开链接 阅读本文需要一点关于canvas基本用法的基础,读者如需了解,可以通过w3c或其他网站先行简单学习它的教程...

Html5 canvas标签实现简易画图板

* { margin: 0; padding: 0; } .zt { width: 600px;...
  • yyf0409
  • yyf0409
  • 2017年07月29日 16:43
  • 168

HTML5本地储存实现--简易数据库

虽说是简易数据库,但其实只有键值与键值对应的内容,通过将input框中的所有内容获取到JS对象中,并通过打包成JSON字符串保存在本地数据库中,实现一个键值保存多个内容效果预览: ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 实现简易 slider
举报原因:
原因补充:

(最多只允许输入30个字)