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 > 23)
                    ChangeTemplet = 23            
                $("#btnhour").val(ChangeTemplet);
                $("#lbhour").text(ChangeTemplet);
                var currobject = $("#hourlist").children()[ChangeTemplet + 1];
                $(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: 2;width:100%;top:3.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:85%; 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="images/ompic.png"/></li>
                <li><img src="images/ompic.png"/></li>
                <li><img src="images/ompic.png"/></li>
                <li><img src="images/ompic.png"/></li>
                <li><img src="images/ompic.png"/></li>
                <li><img src="images/ompic.png"/></li>
                <li><img src="images/ompic.png"/></li>
                <li><img src="images/ompic.png"/></li>
            </ul>
        </div>
    </div>   
</body>
</html>

4、垂直滚动

.wrapper {
  position: absolute;
  top: 14em;
  height: 6em;
  left: 0;
  right: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 5;}
  
  .ultime li {
  text-align: center;
  font-size: 1em;
  height: 2em;
  display: block;
  line-height: 2.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">00</li> 
            <li class="timeunselectclass">01</li> 
            <li class="timeunselectclass">02</li> 
            <li class="timeunselectclass">03</li> 
            <li class="timeunselectclass">04</li> 
            <li class="timeunselectclass">05</li> 
            <li class="timeunselectclass">06</li> 
            <li class="timeunselectclass">07</li> 
            <li class="timeunselectclass">08</li> 
            <li class="timeunselectclass">09</li> 
            <li class="timeselectncl">10</li> 
            <li class="timeunselectclass">11</li> 
            <li class="timeunselectclass">12</li> 
        </ul>            
    </div>
<div
  
  
//初始化小时、分钟滚动条
$loadHourMinuteData = function (hour, minute) {
    hour = hour + 1;
    minute = minute + 1;
    myhourScroll = new iScroll('wrapperhour', {
        snap: 'li',
        momentum: false,
        hScrollbar: false,
        vScrollbar: true,
        onScrollEnd: function () {
            if (!hourisfirst)
            {
                var ChangeTemplet = (this.currPageY);
                if (ChangeTemplet > 23)
                    ChangeTemplet = 23            
                $("#btnhour").val(ChangeTemplet);
                $("#lbhour").text(ChangeTemplet);
                var currobject = $("#hourlist").children()[ChangeTemplet + 1];
                $(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 > 59)
                    ChangeTemplet = 59
                $("#btnmiute").val(ChangeTemplet);
                $("#lbminute").text(ChangeTemplet)
                var currobject = $("#minutelist").children()[ChangeTemplet + 1];
                //console.log(currobject);
                $(currobject).attr("class", "timeselectncl");
                $(currobject).siblings().each(function () { $(this).attr("class", "timeunselectclass"); });
            }
            else {
                minuteisfirst = false;
            }
        }
    });
    myhourScroll.scrollToElement("li:nth-child(" + hour + ")", 300);
    myminuteScroll.scrollToElement("li:nth-child(" + minute + ")", 300);
}

 代码分析，灵活运用

posted @ 2015-12-25 19:11  jiajinhao  阅读(806)  评论(0)  编辑  收藏  举报