网站首页 >> 源码大全 >> 正文
标题

底部弹窗插件代码

小小   2024-12-16 22:00:41   55℃   0
内容

<div class="qqqun">

  <div class="qqtitle">

    <img src="https://zyfbw.com/favicon.ico">资源发布网

    <a class="iconfont layui-icon layui-icon-close "></a>

  </div>

  <a class="qqqcontent" href="httPS://www.zyfbw.com" target="_blank">

    <div class="right">

      <p>欢迎访问资源发布网!请收藏本站域名:https://zyfbw.com</p>

    </div>

  </a>

  <div class="qqqfooter">

    <a href="https://zyfbw.com" target="_blank">立即查看</a>

  </div>

</div>

<style>.layui-icon { font-family: layui-icon!important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media screen and (max-width: 800px) { .qqqun { display: none; }} .qqqun { width: 249px; height: 180px; background: #FFF; position: fixed; bottom: 0; right: 0; z-index: 99999999999999999999999999999; } .qqtitle { background: #5298ff; height: 37px; line-height: 37px; color: #FFF; padding: 0px 16px; } .qqqcontent { height: 109px; padding: 12px 12px; display: block; } .qqqfooter { height: 34px; line-height: 34px; border-top: 1px solid #F6F6F6; } .qqtitle img { width: 18px; height: 18px; margin-right: 7px; vertical-align: middle; margin-top: -2px; } .qqtitle a { color: #FFF; float: right; cursor: pointer; font-size: 15px; height: 37px; line-height: 37px; } .qqqcontent .right { margin-left: 12px; width: calc(100%); } .qqqcontent .right h3 { font-size: 14px; color: #333; height: 20px; overflow: hidden; width: 100%; } .qqqcontent .right p { color: #9d9d9d; font-size: 12px; margin-top: 4px; line-height: 20px; height: 60px; overflow: hidden; width: 100%; } .qqqfooter a { float: right; margin-right: 20px; color: #5298ff; font-size: 12px; }</style>

<script type="text/javascript">layui.use('layer',

  function() {

    var layer = layui.layer;

    $(".jc_list li a").hover(function() {

      if ($(this).attr("title") != '') {

        layer.tips($(this).attr("title"), $(this).parent("li"), {

          area: ["auto"],

          tips: [1, '#313333']

        });

      }

    },

    function() {

      layer.closeAll();

    });

  });

  var DangQian = 0;

  $(function() {

    console.log(DangQian += parseInt($(window).scrollTop()));

    if ($(".layui-fixbar-top").length > 0) {

      backtopS();

      $(window).scroll(function(e) {

        backtopS();

      });

      function backtopS() {

        var scroH = $(this).scrollTop();

        var footerHeight = 0;

        if ($('.footer').length > 0) {

          mTop = $('.footer')[0].offsetTop;

          footerHeight = footerHeight + $(".footer").outerHeight();

        } else {

          mTop = $('footer')[0].offsetTop;

        }

        footerHeight = footerHeight + $(".footer").outerHeight() + parseInt($(".index").CSS("margin-top"));

        sTop = $(window).scrollTop();

        result = mTop - sTop - parseInt($(".index").css("margin-top"));

        if (scroH > 200) {

          $(".layui-fixbar-top").fadeIn(400);

          if (scroH >= $("body").height() - $(window).height() - footerHeight) {

            $(".layui-fixbar-top").css("bottom", $(window).height() - result);

            if (scroH >= 3410) {

              $(".layui-fixbar-top").css("margin-bottom", $('footer').height());

            } else {

              $(".layui-fixbar-top").css("margin-bottom", "");

            }

          } else {

            $(".layui-fixbar-top").css("bottom", "");

          }

        } else {

          $(".layui-fixbar-top").fadeOut(400);

        }

      }

    }

    $(".layui-fixbar-top").click(function(e) {

      $('body,html').animate({

        scrollTop: 0

      },

      800);

    });

    $(".qqtitle").click(function(e) {

      $(".qqqun").slideUp();

    });

    var indexWidth = 0;

    $('#m_huabox li').each(function() {

      indexWidth += parseInt($(this).width()) + 18.2;

    });

    $('#m_huabox').css('width', indexWidth);

    $(".header-seac").on('click',

    function() {

      var title = $(".sear-inp").val();

      if (title) {

        window.location.href = "/search?title=" + title;

      }

    });

  });

  $(document).keydown(function(event) {

    if (event.keyCode == 13) {

      var title = $(".sear-inp").val();

      if (title) {

        window.location.href = "/search?title=" + title;

      }

    }

  });</script>

</div>

底部弹窗插件代码

文章版权声明
1 本网站名称:就爱技术网
2 本站永久网址:http://jajsw.com
3 本网站的文章部分内容来源于网络,仅供大家学习与参考,如有侵权,请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络,不保证其完整性以及安全性,不提供技术支持,请下载后自行研究。
6 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。
点评

本文暂无评论 - 欢迎您

用户中心

下载同款模块代码
快捷导航返回顶部
提交收录
广告合作
返回顶部