• 鼠标滑过元素,div显示,并根据scrollTop向下移动


    如上图所示,通道有很多个,表格只有一个。

    注意:滑过通道时鼠标如果停留在上面,那么表格才显示,鼠标滑过表格时,表格不消失

    <div id="lineContent">

      <p class='channel'></p>

      <span class='channelName'></span>

      <p class='channel'></p>

      <span class='channelName'></span>

      <p class='channel'></p>

      <span class='channelName'></span>

      <p class='channel'></p>

      <span class='channelName'></span>

      <p class='channel'></p>

      <span class='channelName'></span>

    </div>

    <div class='collections_content'>

      <div class="title">积压信息  <span class="thisChannelName"></span> </div>

      <table class="table table-hover table-striped" id="backlogGrid"></table>

    </div>

    //样式我就不加了

    //collections_content 根据定位

    //下面是js

        var detailShowLock = null;
                var detailCloseLock = null;
                function clearLockedTimeOut() {
                    if (detailShowLock) {
                        clearTimeout(detailShowLock);
                    }
                    if (detailCloseLock) {
                        clearTimeout(detailCloseLock);
                    }
                }
                $("#lineContent").on('mouseover', '.channel', function (e) {
                    clearLockedTimeOut();
                    var _self = this;
                    detailShowLock = setTimeout(function () {
                        var index = $(_self).attr('data-index');
                        var top = $(_self).offset().top;
                        $(".collections_content").show().css({'top':(top - 200 / 2 - 5)});
                        self.getChannelGrid(index);
                    }, 250);
                })
                $("#lineContent").on('mouseout', '.channel', function (e) {
                    clearLockedTimeOut();
                    detailCloseLock = setTimeout(function () {
                        $(".collections_content").hide();
                    }, 250);
                });
                $('.collections_content').hover(function () {
                    clearLockedTimeOut();
                    $(this).show();
                }, function () {
                    clearLockedTimeOut();
                    detailCloseLock = setTimeout(function () {
                        $(".collections_content").hide();
                    }, 250);
                });

    //根据需求做出来的

  • 相关阅读:
    Windows8 自制DatePicker
    Windows8 商店支付功能
    通过(Node Js||.Net)基于HTML5的WebSocket实现实时视频文字传输(上)
    Windows8 检测网络
    Windows8 推送通知
    Windows8&Windows Phone 做一个图片效果
    js 两种时间数字字符串格式
    使用Homebrew安装Git(Mac)
    JavaScript核心参考教程客户端JavaScript
    MVC模式浅谈
  • 原文地址:https://www.cnblogs.com/fmixue/p/8270484.html
Copyright © 2020-2023  润新知