iscroll 4.0 滚动（水平和垂直）

1、概述

iscroll 专注于页面滚动js。Iscroll滚动做的挺好,特别是针对手机网页（android、iphone）正好弥补手动滑屏的遗缺，而今研究一番，把代码贴出来，供大家参考。

2、iscroll使用说明

　　初始化iScroll

 wrapperhour//标识要滚动的div对应ID

 iScroll myhourScroll = new iScroll('wrapperhour', {

        snap: 'li',//一次滚动单位li

        momentum: false,

        hScrollbar: false,//水平滚动条是否显示，true显示，false隐藏

        vScrollbar: false,//垂直滚动条是否显示，true显示，false隐藏

        onScrollEnd: //滚动停止回调函数

        function () 
          {

            //处理自己的逻辑代码

            if (!hourisfirst)

            {

                var ChangeTemplet = (this.currPageY);//currPageY垂直当前坐标或者叫单元数

                if (ChangeTemplet > )

                    ChangeTemplet =

                $("#btnhour").val(ChangeTemplet);

                $("#lbhour").text(ChangeTemplet);

                var currobject = $("#hourlist").children()[ChangeTemplet + ];

                $(currobject).attr("class", "timeselectncl");

                $(currobject).siblings().each(function () { $(this).attr("class", "timeunselectclass"); });

            }

            else {

                hourisfirst = false;

            }

        }

    });

//初始化调用iscroll代码
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);

//滚动到当前初始化的值

myhourScroll.scrollToElement("li:nth-child(" + hour + ")", 300);

3、水平滚动

主要分析css，利用到的关键是css position这个属性，可以参考查看potioin设置

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

<title>家庭成员</title>

<style type="text/css">

    .mfpiccontext2{position: absolute;z-index: ;width:%;top:.2em; padding:15px 0px; text-align:center;}

    .mfpiccontext2 ul {width: 40em;overflow: hidden;float: left;}

    .mfpiccontext2 li{ float:left; width:5em; text-align:center;}

    .mfpiccontext2 li img{ width:%; border:1px solid #f78320; border-radius:38px;}

</style>

    <script src="jscript/jquery-1.11.2.min.js"></script>

    <script src="jscript/iscroll.js"></script>

    <script type="text/javascript">

        var myScroll;

        function loaded() {

            myScroll = new iScroll('wrapper');

        }

        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

        document.addEventListener('DOMContentLoaded', loaded, false);

</script>

</head>

<body>

    <div class="picadddivtitle">滑动选择头像</div>

    <div class="mfacontentdiv">

        <div class=" mfpiccontext2" id="wrapper">

            <ul>

                <li><img src="data:images/ompic.png"/></li>

                <li><img src="data:images/ompic.png"/></li>

                <li><img src="data:images/ompic.png"/></li>

                <li><img src="data:images/ompic.png"/></li>

                <li><img src="data:images/ompic.png"/></li>

                <li><img src="data:images/ompic.png"/></li>

                <li><img src="data:images/ompic.png"/></li>

                <li><img src="data:images/ompic.png"/></li>

            </ul>

        </div>

    </div>

</body>

</html>

4、垂直滚动

.wrapper {

  position: absolute;

  top: 14em;

  height: 6em;

  left: ;

  right: ;

  overflow-y: scroll;

  overflow-x: hidden;

  z-index: ;}

  .ultime li {

  text-align: center;

  font-size: 1em;

  height: 2em;

  display: block;

  line-height: .0em;

  width: 4em;}

<div class="wrapper">

    <div class="timesetdiv" id="wrapperhour" style="overflow: hidden;">

        <ul id="hourlist" class="ultime ultimeright ">

            <li></li>

            <li class="timeunselectclass"></li>

            <li class="timeunselectclass"></li>

            <li class="timeunselectclass"></li>

            <li class="timeunselectclass"></li>

            <li class="timeunselectclass"></li>

            <li class="timeunselectclass"></li>

            <li class="timeunselectclass"></li>

            <li class="timeunselectclass"></li>

            <li class="timeunselectclass"></li>

            <li class="timeunselectclass"></li>

            <li class="timeselectncl"></li>

            <li class="timeunselectclass"></li>

            <li class="timeunselectclass"></li>

        </ul>

    </div>

<div

//初始化小时、分钟滚动条

$loadHourMinuteData = function (hour, minute) {

    hour = hour + ;

    minute = minute + ;

    myhourScroll = new iScroll('wrapperhour', {

        snap: 'li',

        momentum: false,

        hScrollbar: false,

        vScrollbar: true,

        onScrollEnd: function () {

            if (!hourisfirst)

            {

                var ChangeTemplet = (this.currPageY);

                if (ChangeTemplet > )

                    ChangeTemplet =

                $("#btnhour").val(ChangeTemplet);

                $("#lbhour").text(ChangeTemplet);

                var currobject = $("#hourlist").children()[ChangeTemplet + ];

                $(currobject).attr("class", "timeselectncl");

                $(currobject).siblings().each(function () { $(this).attr("class", "timeunselectclass"); });

            }

            else {

                hourisfirst = false;

            }

        }

    });

    myminuteScroll = new iScroll('wrapperminute', {

        snap: 'li',

        momentum: false,

        hScrollbar: false,

        vScrollbar: false,

        onScrollEnd: function () {

            if (!minuteisfirst) {

                var ChangeTemplet = (this.currPageY);

                if (ChangeTemplet > )

                    ChangeTemplet =

                $("#btnmiute").val(ChangeTemplet);

                $("#lbminute").text(ChangeTemplet)

                var currobject = $("#minutelist").children()[ChangeTemplet + ];

                //console.log(currobject);

                $(currobject).attr("class", "timeselectncl");

                $(currobject).siblings().each(function () { $(this).attr("class", "timeunselectclass"); });

            }

            else {

                minuteisfirst = false;

            }

        }

    });

    myhourScroll.scrollToElement("li:nth-child(" + hour + ")", );

    myminuteScroll.scrollToElement("li:nth-child(" + minute + ")", );

}

代码分析，灵活运用

iscroll 4.0 滚动（水平和垂直）的更多相关文章

IOS使用 Visual Format Language 定义水平和垂直约束
定义限制条件来改变一个 UI 组件在其父视图的水平和垂直方向布局的方法. 可以使用方程式里 H:方向符号代表水平方向的边距,使用 V:方向符号代表垂直方向的边距. 转载请注明,本文转自:http:/ ...
div盒子水平居垂直中的几种方法
div盒子水平居垂直中的几种方法<!DOCTYPE html><html> <head> <mete charset="ut ...
MATLAB：图像水平、垂直、水平垂直镜像、转置、旋转变换（flipdim、mirror、transp、imrotate函数）
1.原图像经水平.垂直.水平垂直镜像设置通过mirror函数实现: close all; %关闭当前所有图形窗口,清空工作空间变量,清除工作空间所有变量 clear all; clc; I=imrea ...
使图片相对于上层DIV始终水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
解决boostrap-table有水平和垂直滚动条时，滚动条滑到最右边表格标题和内容单元格无法对齐的问题
问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题问题原因:bootstrap-table源 ...
如何让图片相对于上层DIV始终保持水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Android RecyclerViewSwipeDismiss：水平、垂直方向的拖曳删除item
Android RecyclerViewSwipeDismiss:水平.垂直方向的拖曳删除item RecyclerViewSwipeDismiss是一种支持RecyclerView的水平.垂直 ...
CSS 中的各种居中 (水平、垂直)
导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...
（前端）面试300问之（2）CSS元素居中【水平、垂直、2者同时居中】
一仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...

随机推荐

POJ 1273 网络流(最大流)模板
http://poj.org/problem?id=1273 这道题很值得反思,弄了一下午,交上去先是一直编译错误,而在本地运行没有问题, 原因可能是oj的编译器版本老旧不支持这样的写法 G[from ...
项目：BluetoothChat
代码在github: https://github.com/Viyu/BluetoothChat 蓝牙聊天核心是Android Demo里的,我加上了类似微信的界面. 我觉得这个应用要是能推广的话,有 ...
4 Handler相关类——Live555源码阅读(一)基本组件类
这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. Handler相关类概述处理程序相关类一共有三个,其没有派生继承关系,但是其有友元关系和使用关系 ...
php判断浏览器语言
<?php // 分析 HTTP_ACCEPT_LANGUAGE 的属性 // 这里只取第一语言设置 (其他可根据需要增强功能,这里只做简单的方法演示) preg_match('/^([a-z\ ...
powerdesigner反向
1.Could not initial JVM不能初始化 :要求安装32位的JDK,把path指向32的安装目录 2.Non SQL Error : Could not load class orac ...
matplotlib绘制直方图【柱状图】
代码: def drawBar(): xticks = ['A', 'B', 'C', 'D', 'E']#每个柱的下标说明 gradeGroup = {'A':200,'B':250,'C':330 ...
Kendo UI
http://www.cnblogs.com/libingql/category/585455.html http://www.scala-china.net/discuz/forum.php?mod ...
zju3547
题意:给出n(1<=n<=10^8),求小于n的,求所有与n互质的数字的四次幂的加和是多少. 分析:容斥原理首先要知道四次幂求和公式,1^4+2^4+...+n^4=n*(n+1)*(2 ...
ACM/ICPC 之 BFS(离线)+康拓展开(TSH OJ-玩具(Toy))
祝大家新年快乐,相信在新的一年里一定有我们自己的梦! 这是一个简化的魔板问题,只需输出步骤即可. 玩具(Toy) 描述 ZC神最擅长逻辑推理,一日,他给大家讲述起自己儿时的数字玩具. 该玩具酷似魔方, ...
9. javacript高级程序设计-客户端检测
1. 客户端检测 1.1 能力检测在编写代码之前先检测特定浏览器的能力. 1.2 怪癖检测怪癖实际上是浏览器实现中的bug 1.3 用户代理检测通过检测用户代理字符串来识别浏览器.用户代理字符串 ...

iscroll 4.0 滚动（水平和垂直）

iscroll 4.0 滚动（水平和垂直）的更多相关文章

随机推荐

热门专题