zoukankan      html  css  js  c++  java
  • 鼠标滑过元素,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);
                });

    //根据需求做出来的

  • 相关阅读:
    假期每日小结_2.2
    假期每日小结_2.1
    《新浪微博用户兴趣建模系统架构》阅读笔记
    《微博深度学习平台架构和实践》阅读笔记
    《亿级用户下的新浪微博平台架构》阅读笔记
    JavaScript中JSON的序列化和解析
    Servlet中@WebServlet("XXXX")注解无效,访问servlet报404错误
    数据卷(Data Volumes)
    Docker安装及基本命令
    springcloud服务配置中心
  • 原文地址:https://www.cnblogs.com/fmixue/p/8270484.html
Copyright © 2011-2022 走看看