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。

  • 相关阅读:
    js键盘事件以及键盘事件拦截
    JavaScript 延迟加载
    二叉树深度优先 求二叉树最大深度
    css 小知识点:inline/inline-block/line-height
    es6 set
    CSS 水平垂直居中
    js 位运算符
    js 函数重载
    js之单例模式
    js 面向对象 ES5 AND ES6
  • 原文地址:https://www.cnblogs.com/hitbs228/p/3688890.html
Copyright © 2011-2022 走看看