zoukankan      html  css  js  c++  java
  • 快速导航

    var $ = require("wiki-common:widget/lib/jquery/jquery.js"),
            scrollTo = require('wiki-common:widget/util/scrollTo.js');
    
        $('.qnItemWrap').on('click', function() {
            var target = $(this).attr('anchor');
            var top = $(document.getElementsByName(target)[0]).offset().top;
    
            scrollTo(top);
        });

    调用时以上

    <div class="quickNavWrap">
        <div class="qnTitle">快速导航</div>
        <div class="qnContent">
                <div class="qnItemWrap" anchor="actor2">
                <div class="qnItem">
                    <span class="qnItemIcon qn_actor2"></span>
                    <span class="qnItemCon">演员表</span>
                </div>
            </div>
                <div class="qnItemWrap" anchor="zhiyuanbiao">
                <div class="qnItem">
                    <span class="qnItemIcon qn_zhiyuanbiao"></span>
                    <span class="qnItemCon">职员表</span>
                </div>
            </div>
            </div>
    </div>
    
    
    <--跳到底下-->
    
    
    <div class="anchor-list">
                <a name="zhiyuanbiao" class="lemma-anchor "></a>
        </div>
    /**
     * @method scrollTo(targetValue, duration, callback, host, direction)    // 方法:卷动操作(参阅下文详述)。
     *   @param targetValue {Number}                                         // 参数:要卷动到的位置(可选,默认为 0)。
     *   @param duration {Number}                                            // 参数:卷动持续时长,单位 ms(可选,默认值:400)。
     *   @param callback {Function}                                          // 参数:卷动结束回调(可选,默认无)。
     *   @param host {Element|String}                                        // 参数:发生卷动的元素(可选,默认为 'body' 元素)。
     *   @param direction {String}                                           // 参数:卷动方向(可选,默认值:'ver',参阅下文详述)。
     *   @return No                                                          // 返回:无。
     *
     * @description    // 附加说明。
     *   1) scrollTo() 用于操作页面(或元素)内容的卷动(scrollTop/scrollLeft),默认操作页面卷动。
     *   2) 参数 direction 用于指定卷动方向,取值 'hor'(水平卷动) 或 'ver'(垂直卷动)。
     *
     * @example    // 典型的调用示例。
        var scrollTo = require('wiki-common:widget/util/scrollTo.js');
    
        // 卷动页面。
        scrollTo(200);
    
        // 卷动某元素。
        scrollTo(200, null, null, '#someContainerId');
     */
    
    var $ = require('wiki-common:widget/lib/jquery/jquery.js'),
      browser = require('wiki-common:widget/util/browser.js'),
      animation = require('wiki-common:widget/util/animation.js');
    
    module.exports = function(targetValue, duration, callback, host, direction){
      targetValue = isNaN(parseInt(targetValue)) ? 0 : parseInt(targetValue);
      duration = isNaN(parseInt(duration)) ? 400 : Math.abs(parseInt(duration));
      direction = /^(?:ver|hor)$/i.test(direction) && RegExp.$_.toLowerCase() == 'hor' ? 'Left' : 'Top';
    
      var scrollHost = $(host).length ? $(host)[0] : ((browser.ie() || browser.firefox()) ? document.documentElement : document.body),
        startValue = scrollHost['scroll' + direction],
        scrollDistance = targetValue - startValue;
      
      animation(duration, function(progress){
        scrollHost['scroll' + direction] = startValue + scrollDistance * progress;
      }, null, callback);
    };
  • 相关阅读:
    7-1 词频统计 (30 分)
    VS Code 配置 Python 开发环境
    7-6 求指定层的元素个数 (40 分)
    7-5 列表元素个数的加权和(1) (40 分)
    Oracle中的数据库、用户、方案、表空间、表对象之间的关系
    Oracle归档模式和非归档模式
    Oracle中的单引号和双引号
    PL/SQL编程中的问题
    Oracle数据库语言分类
    Oracle中的delete、truncate和drop
  • 原文地址:https://www.cnblogs.com/zhangxinxin111/p/5239005.html
Copyright © 2011-2022 走看看