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);
                });

    //根据需求做出来的

  • 相关阅读:
    k近邻算法
    密码技术小总结
    编码的简单总结
    icmp dos和arp dos 攻击模拟实验
    WPA简单抓包分析
    Iptables实验
    Rabin简单加解密
    response响应数据
    浮动——小米手机案例
    ServletRequest请求详解
  • 原文地址:https://www.cnblogs.com/fmixue/p/8270484.html
Copyright © 2011-2022 走看看