JS侧栏导航

最新推荐文章于 2023-10-17 17:30:11 发布

qq_33610095

最新推荐文章于 2023-10-17 17:30:11 发布

阅读量193

点赞数

分类专栏： JQ 文章标签： html html5 javascript

本文链接：https://blog.csdn.net/qq_33610095/article/details/120737021

版权

JQ 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>侧jquery特效代码_侧js特效代码_侧网页模板素材代码下载_落格</title>

.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.fa-user:before{content:"\f007";}
.fa-arrow-circle-o-up:before{content:"\f01b";}
.fa-external-link:before{content:"\f08e";}
.fa-moon-o:before{content:"\f186";}
.fa-qq:before{content:"\f1d6";}
.fa-weixin:before{content:"\f1d7";}
.fa-diamond:before{content:"\f219";}

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
div,h6,p,img,i,ul,li{margin:0;padding:0;}
img{border:0;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
h6{font-family:PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;font-size:100%;color:#6b7386;line-height:1.35;}
img{max-width:100%;}
ul,li{list-style-type:none;}
img{border:none;}
i{font-style:normal;font-weight:normal;}
a{color:#613f23;text-decoration:none;-webkit-transition:all ease .25s;-moz-transition:all ease .25s;transition:all ease .25s;}
a:hover{color:#E66B35;}
::selection{background:#ccc8b8;color:#333;text-shadow:none;}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track-piece{background:#F4F4F4;}
.float-box{width:68px;padding:5px;font-size:14px;position:fixed;right:0;top:55%;z-index:9997;margin-top:-303px;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+100));box-sizing:border-box;}
.float-box .float-ul,.float-box .float-ul li{margin:0;padding:0;}
.float-box .float-ul{margin-top:5px;text-align:center;line-height:1.2;list-style:none;background-color:#FFF;box-shadow:0 2px 5px #e6e6e6;}
.float-box .float-radius{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.float-box .float-text{color:#ff4a00;}
.float-box .float-border{border-color:#ececec!important;}
.float-box .dbsvipa{color:#fff;}
.float-box .float-ul li a{display:block;width:100%;padding:10px 0;line-height:18px;}
.float-box .float-ul li a{border-radius:5px;}
.float-box .float-ul li a.qq,.float-box .float-ul li a.qun{-moz-border-top-left-radius:4px;-moz-border-top-right-radius:4px;border-top-left-radius:4px;border-top-right-radius:4px;position:relative;}
.float-box .dbsvip{background:linear-gradient(-125deg, #ffab23 0%, #ff0036 100%);color:#fff;margin-bottom:20px;}
.float-box .dbsvip li a:hover{background:linear-gradient(-125deg, #ffab23 0%, #ff0036 100%);color:#fff;margin-bottom:20px;box-shadow:0 8px 10px rgba(255, 0, 12, 0.3);color:white;border-radius:50%;}
.float-box .float-ul .fa{font-size:20px;line-height:20px;}
.float-box .dbsvip .fa{font-size:25px;}
.float-box .float-alert-box{width:180px;height:185px;background-color:#FFF;border:1px solid #ececec;position:absolute;right:58px;top:0;z-index:9998;display:none;box-sizing:border-box;}
.float-box .float-qq-box,.float-box .float-qun-box{padding:20px 15px;}
.float-box .float-qun-box{width:200px;height:210px;}
.float-box .float-weixin-box{background:none;border:0px;width:300px;height:auto;top:10%;}
.float-box .float-ul li .float-qq-box{color:#666;}
.float-box .float-alert-box h6{font-size:20px;color:#ff4a00;font-weight:700;line-height:1.2;margin:0 0 15px;}
.float-box .float-alert-box p{line-height:24px;margin:0 0 15px;}
.float-box .float-qq-btn{padding:10px;background-color:#ff4a00;color:#FFF;cursor:pointer;}
.float-box .dbsvipd{padding:10px;background:linear-gradient(-125deg, #ffab23 0%, #ff0036 100%);color:#FFF;}
.float-box .zzhuti_qd_1{background:linear-gradient(-125deg, #7CCC4C 0%, #6da54b 100%);box-shadow:0 8px 10px rgba(32,160,255,.3);color:#FFF;}
.float-box .zzhuti_qd_1:hover{background:#ffffff;box-shadow:0 8px 10px rgba(32,160,255,.3);color:#6da54b;}
@media (max-width: 768px){
.float-box{display:none;}
}

</style>
<body>

   <ul class="float-ul float-radius float-text">
       <li>
           <a class="qq float-border float-text" href="http://wpa.qq.com/msgrd?v=3&uin=48444431&site=qq&menu=yes" target="_Blank">
               <i class="fa fa-qq"></i><br>客服
               <div class="float-alert-box float-radius float-qq-box" style="display: none;">
                   <h6>工作时间</h6>
                   <p>工作日：9:00 - 22:00<br>节假日：9:00 - 22:00</p>
                   <div class="float-qq-btn float-radius" οnclick="window.open('http://wpa.qq.com/msgrd?v=3&uin=48444431&site=qq&menu=yes','_blank')">点击咨询客服</div>
               </div>
           </a>
       </li>

<li>
           <a class="qun float-radius float-text" title="加入QQ群">
               <i class="fa fa-weixin"></i><br>Q群
<div class="float-alert-box float-radius float-qun-box" style="display: none;">
                   <h6>2000人大群</h6>
                   <p>客户小伙伴专用群</p>
                   <div class="float-qq-btn float-radius" οnclick="window.open('https://qm.qq.com/cgi-bin/qm/qr?k=qqQHGjg0p6dlAT6CQvPj8A3f7-Oe6LIe&jump_from=webapi','_blank')">落格一群（满）</div><br>
<div class="float-qq-btn float-radius" οnclick="window.open('https://qm.qq.com/cgi-bin/qm/qr?k=VnWGM6EjLBHg3owLo6ebw2ISv2m-3sc6&jump_from=webapi','_blank')">落格二群</div>
               </div>
           </a>
       </li>
   </ul>
   <ul class="float-ul float-radius float-text">
       <li>
           <a class="fankui float-border float-text" href="https://www.moyublog.com/pay.html" target="_Blank" title="站内活动">
               <i class="fa fa-diamond"></i><br>活动
           </a>
       </li>
       <li>
           <a class="fankui float-border float-text" href="https://www.moyublog.com/website/" target="_Blank" title="网址导航">
               <i class="fa fa-external-link"></i><br>网址
           </a>
       </li>
       <li>
           <a class="fankui float-border float-text" href="https://www.moyublog.com/search-0-31602.html#" id="moyublog-dark-switch2" title="落格暗夜模式">
               <i class="fa fa-moon-o"></i><br>色彩
           </a>
       </li>
       
   </ul>
   <ul class="float-ul float-radius float-text">
       <li>
           <a class="float-border float-text" href="javascript:void(0);" id="gotoTop" title="返回顶部" style="display: none;">
               <i class="fa fa-arrow-circle-o-up"></i><br>
           </a>
       </li>
   </ul>

</div>
<script src="http://zzsx.cn/skin/sxcn/js/jquery.min.js"></script>

$(".qq").hover(function () {
   $(this).children(".float-qq-box").show()
},function() {
   $(this).children(".float-qq-box").hide()
});
$(".weixin").hover(function () {
   $(this).children(".float-weixin-box").show()
},function() {
   $(this).children(".float-weixin-box").hide()
});
$(".qun").hover(function () {
   $(this).children(".float-qun-box").show()
},function() {
   $(this).children(".float-qun-box").hide()
});

})();
</script>

</body></html>

qq_33610095

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS侧栏导航

<!DOCTYPE html>  <html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>侧jquery...
复制链接

扫一扫