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,
  • kuzuozhou
  • kuzuozhou
  • 2014年04月25日 17:26
  • 2755

html中的slider 拖动条

  • 2010年01月19日 08:45
  • 15KB
  • 下载

HTML5实现webApp中图片轮播的效果(二)之 iSlider 爬坑经历

iSlider 基本使用 1、从接口中动态加载需要呈现的图片以及相关的内容数据 2、想点击图片转到相应的页面,为什么点击事件失效了? 3、可以点击了,但是图片在容器中却不能固定了,不小心会拖动很难...
  • qingchen1016
  • qingchen1016
  • 2016年05月31日 15:03
  • 5711

html5下让 height:100%; 起作用

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗? 按常理...
  • Inuyasha1121
  • Inuyasha1121
  • 2016年05月03日 16:23
  • 2344

使用css及简单的js实现酷炫的响应式slider

真的是好久都没有写博客了,这几个月一直很忙。这几天暑假在家,闲来无事,从前端到后台写了一个网站,算是新的个人博客吧。本文的demo和下载就挂在上面。今天在这里分享一个十分常见的应用,轮播。我们经常在网...
  • a153375250
  • a153375250
  • 2016年08月09日 16:06
  • 1952

自定义(滑动条)input[type="range"]样式

这是我的第一篇博文,也是我这个小白努力的起点。刚接触JavaScript没多久,如果文中有错误的地方欢迎大家指正,或者给予建议,让我能逐渐向大牛靠拢。今天这篇文章给大家带来的是关于美化Slider B...
  • u013347241
  • u013347241
  • 2016年06月02日 00:55
  • 56584

html5学习之侧边栏实现

设置布局 隐藏显示侧边栏 添加菜单内容 为菜单列表添加事件 设置active菜单 设置默认选中菜单 设置viewport 使用媒体查询 打算学习一些html5的知识,暂时不使用jquery.js,计划...
  • qdudz
  • qdudz
  • 2015年10月11日 22:21
  • 5537

jquery插件系列之 - Slider滑块

概述     滑动条是一种简单的设置一定范围内参数的插件。     官方示例地址:http://jqueryui.com/demos/slider/             ·参数(参数名 ...
  • fwj380891124
  • fwj380891124
  • 2012年06月25日 17:49
  • 28612

一个javascript实现的slider效果

       每次写这些代码的时候我都是想谈一谈自己的感受,这里我也不免又想谈谈。我说过这里是我工作倾诉的地方,自己的空间畅所欲言虽然是自己的感想,但是网络上你并不认识我我也不怕你知道,因为在网络上去...
  • hafoxiaowanzi
  • hafoxiaowanzi
  • 2008年03月20日 10:06
  • 4326

html5 实现简易 slider

.container { width: 900px;
  • ISaiSai
  • ISaiSai
  • 2016年08月30日 14:13
  • 1321
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5 实现简易 slider
举报原因:
原因补充:

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