文章 网页代码

底部弹窗插件代码

首页 > 网页代码 > 正文

演示图

底部弹窗插件代码第3张插图

代码

```<div class="qqqun"> <div class="qqtitle"> <img src="https://www.zxki.cn/content/templates/fee/static/img/favicon.ico">酷库博客 <a class="iconfont layui-icon layui-icon-close "></a> </div> <a class="qqqcontent" href="https://www.bzlm.org.cn" target="_blank"> <div class="right"> <p>欢迎访问酷库博客!请收藏本站域名:https://www.zxki.cn</p> </div> </a> <div class="qqqfooter"> <a href="https://www.zxki.cn" 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>```
这篇文章最后更新于2019-12-5,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
最新活动每月领QQ超会几百成长值
« 上一篇 12月05日
开源免费响应式QRcdr二维码生成网站源码
下一篇 » 12月06日
为了防止灌水评论,登录后即可评论!
注册登录

还没有评论,快来抢沙发吧!