zoukankan      html  css  js  c++  java
  • iscroll横向滑动(当前页状态标记自动变化)

    var myScroll;
    
    function loaded(){
        myScroll = new iScroll('wrapper',{
            snap:true,
            checkDOMChanges:true,
            hScrollbar:false,
            vScrollbar:false,
            momentum:false,
            onScrollEnd:function(){
                document.querySelector('.product_nav > span.push').className = 'nav';
                document.querySelector('.product_nav > span:nth-child('  + (this.currPageX+1) + ')').className = 'nav push';
            }
        });
    }
    
    $(document).on('DOMContentLoaded', function () { setTimeout(loaded, 200); });
    

    css部分代码如下:

    <div id='wrapper'>
        <div id='scroller'>
            <ul>
                <li><img src='' /></li>
                <li><img src='' /></li>
                <li><img src='' /></li>
                <li><img src='' /></li>
                <li><img src='' /></li>
                <div style='clear:both;'></div>
            </ul>
        </div>
    </div>
    <div class='product_nav'>
        <span class='nav push'></span>
        <span class='nav'></span>
        <span class='nav'></span>
        <span class='nav'></span>
        <span class='nav'></span>
    </div>
    

    #wrapper的宽高可为内部图片宽高,但要加上overflow:hidden;#scroller的宽需要为每幅图片宽度*图片数,每个li要有float:left。

  • 相关阅读:
    WebFrom 复杂控件
    WebFrom 简单控件
    WinForm开发控件集合
    ListView 控件操作
    窗体类型
    WEBFORM--第一讲
    display:inline/block/inline-block
    WINFORM--第五讲(窗体类型)
    WINFORM--第四讲(布局)
    WINFORM--第三讲(下拉列表)
  • 原文地址:https://www.cnblogs.com/hitbs228/p/3688890.html
Copyright © 2011-2022 走看看