工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > 综合应用 > 正文

写了一个多功能悬浮窗插件,分享给大家

发布时间:2018-08-15 01:20:24作者:魏义齐阅读:()评论:

本文为博主原创文章,未经博主允许不得转载。

写了一个集个人QQ、微信和QQ群推广以及自定义文章功能于一体的悬浮窗插件,主要用到position定位、css3过度和jQuery,成品效果看右侧,可以说是为个人站长或博主量身打造的。

我网站原来的悬浮窗如下图:

详情戳文章:网站在线客服漂浮窗代码,刚开始是在这个上面改,html全在js里,改了两三下,是真不想改了,所以才自己写。

废话不多说上代码,关于代码是什么意思和怎么修改我都在代码里面做了详细的标注

HTML代码:

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"> 
  5. <title>多功能悬浮窗插件-插件素材-魏义齐个人博客</title> 
  6. <link type="text/css" rel="stylesheet" href="css/index.css"> 
  7. <!--引用支持jQuery效果的js库--> 
  8. <script src="js/js.js"></script> 
  9. </head> 
  10.  
  11. <body> 
  12. <!--悬浮窗--> 
  13. <div id="floatwindow">  
  14.   <!--广告合作--> 
  15.   <div class="gghz"><a href="https://blog.weiyiqi.net/html/bkxg/226.html" target="_blank"><img src="images/gghz.png"></a></div> 
  16.   <!--欢迎投稿--> 
  17.   <div class="hytg"><a href="https://blog.weiyiqi.net/html/bkxg/227.html" target="_blank"><img src="images/hytg.png"></a></div> 
  18.   <!--QQ群,链接百度QQ群推广,只有上线链接才生效--> 
  19.   <div class="qun"><a href="//shang.qq.com/wpa/qunwpa?idkey=31ed992ad95411add5ffa0ae7480ecb2254b52ac9f9f36956386184860bfb4a6" target="_blank"><img src="images/r_wx.png"></a></div> 
  20.   <!--个人微信--> 
  21.   <div class="wechat"><img src="images/r_phone.png"></div> 
  22.   <!--个人QQ,修改换QQ号即可--> 
  23.   <div class="qq"><a href="http://wpa.qq.com/msgrd?v=3&uin=2323918578&site=qq&menu=yes" target="_blank"><img src="images/r_qq.png"></a></div> 
  24. </div> 
  25. <!--返回顶部按钮--> 
  26. <div id="backtop"><img src="images/r_top.png"></div> 
  27. <!--微信二维码图片-->  
  28. <img src="images/weixin.jpg" id="wxewm">  
  29. <script> 
  30. $("#backtop").hide().click(function(){ 
  31.         $("body,html").animate({scrollTop:0},600) 
  32.     }); 
  33.     $(window).scroll(function(){ 
  34.         if($(window).scrollTop()>0){ 
  35.             $("#backtop").css("display","block");//返回按钮出现 
  36. $("#floatwindow").css("bottom","171px");//悬浮窗上移 
  37. $("#wxewm").css("bottom","171px");//微信二维码图片跟随,在准确位置 
  38.         }else{ 
  39.             $("#backtop").css("display","none");//返回按钮消失 
  40. $("#floatwindow").css("bottom","100px");//悬浮窗下移,不然的话第一屏有点难看 
  41. $("#wxewm").css("bottom","100px");//微信二维码图片跟随,在准确位置 
  42.         } 
  43.     })  
  44. $(document).ready(function(){ 
  45. $(".wechat").mouseover(function(){//鼠标经过时,二维码图片淡入 
  46. $("#wxewm").fadeIn(500); 
  47. }) 
  48. $(".wechat").mouseout(function(){//鼠标移开后,二维码图片淡出 
  49. $("#wxewm").fadeOut(500); 
  50. }) 
  51. }) 
  52. </script> 
  53. </body> 
  54. </html> 

css代码:

@charset "utf-8"; 
/* CSS Document */ 
* { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font-family: "微软雅黑"; 
    font-size: 14px; 
} 
a { 
    text-decoration: none; 
} 
body { 
    height: 2000px; 
} 
/*返回顶部按钮*/ 
#backtop { 
    width: 70px; 
    height: 70px; 
    background-color: #686868; 
    position: fixed; 
    bottom: 100px; 
    right: 0; 
    background-image: url(../images/r_top.png); 
    transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    -webkit-transition: all 0.6s; 
} 
#backtop:hover { 
    cursor: pointer; 
    background-color: #444; 
} 
/*悬浮窗*/ 
#floatwindow { 
    width: 70px; 
    position: fixed; 
    right: 0; 
    bottom: 100px; 
} 
/*定义单个div大小和间距*/ 
#floatwindow div { 
    width: 70px; 
    height: 70px; 
    margin-top: 1px; 
} 
/*个人QQ和欢迎投稿*/ 
#floatwindow .qq, #floatwindow .hytg { 
    background-color: #ffc301; 
    transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    -webkit-transition: all 0.6s; 
} 
#floatwindow .qq:hover, #floatwindow .hytg:hover { 
    background-color: #ff9f03; 
} 
/*个人微信和广告合作*/ 
#floatwindow .wechat, #floatwindow .gghz { 
    background-color: #fc8b63; 
    transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    -webkit-transition: all 0.6s; 
} 
#floatwindow .wechat:hover, #floatwindow .gghz:hover { 
    background-color: #f07d54; 
} 
/*微信二维码图片定位*/ 
#wxewm { 
    width: 141px; 
    height: 141px; 
    position: fixed; 
    bottom: 100px; 
    right: 71px; 
    display: none; 
} 
/*QQ群*/ 
#floatwindow .qun { 
    background-color: #87af4c; 
    transition: all 0.6s; 
    -moz-transition: all 0.6s; 
    -o-transition: all 0.6s; 
    -webkit-transition: all 0.6s; 
} 
#floatwindow .qun:hover { 
    background-color: #729c36; 
} 

注解

1.为什么不把微信二维码图片放在class="wechat"的div里?

那样的话很麻烦,因为class="wechat"的div要写position: relative;二维码图片要写position:absolute;去定位,还不如直接position: fixed;来的快。

2.为什么不把返回顶部按钮和个人QQ等按钮放在同一个盒子里?

因为返回顶部按钮在某些情况下要消失,悬浮窗位置也要发生变化,独立用jQuery操控更方便。

3.营销性网站使用怎么发挥其更好的效果?

让qq对话框在打开页面后强制弹出,详情戳文章“素材分享:jQuery右侧可隐藏QQ客服飘窗和强制弹出QQ对话框代码”,需要修改的地方已经在文章中加粗标注出来了。

为什么说适用于个人站长或博主?

用最简短的话说:为了推广和赚钱。个人QQ、个人微信还有个人技术交流群都要尽量迎合看到它并点击它的人,所以我把个人QQ和QQ群做成了点击添加的,微信做成扫码的,因为这更符合用户习惯,再者像投稿、广告合作这些站长都是希望它能在网页的某个地方一直存在的。

代码这个东西不可能写的那么完美,有一点点的小问题只要不影响效果还请不要喷我。

完整版下载链接(就是没有多余的东西,拿来直接用的):链接:https://pan.baidu.com/s/1gjo9eHKceB3SKbxnuC7qSA     密码:p6mb 。解压时请解压到压缩包名称,这是个人习惯。

本文标签悬浮窗 html架构和css思维 ,您可以阅读与「悬浮窗 html架构和css思维 」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

上一篇:目前写过最复杂的div弹出遮罩层结构下一篇:点击按钮在当前页面加载另一个页面的方法

原创不易,您的赞助就是博主更新的动力!

赞助请备注,8.88元及以上可在赞助光荣榜留下外链信息。

HashOver畅言云评完全自托管的评论系统

工作室注册登录标签云赞助光荣榜

最新会员
  • 东方星雨
  • deanhan
  • 1264822519
  • aini3311
  • a1051020101
  • weiyiqi