右下角工具箱完善

公告栏

参考
页面定制CSS代码

.d4{
    position: fixed;
    bottom: 90px;
    right: 15px;
    border-radius: 8px;
    width:22px;
    height:22px;
}
.dialog{
    background-color:white;
    position: fixed;
    top: 30%;
    left: 35%;
    width: 360px;
    height: 300px;
    border: 1px solid transparent;
    border-color: rgba(151, 151, 151, 0.3);
    display: none;
    z-index:995;
}
.bulletin_board{
    font-weight: bold;
    font-size: larger;
    position: relative;
    left: 150px;
    top: 10px;
}
.close1{
    width:22px;
    height:22px;
    position: relative;
    left: 280px;
    top: 10px;
    z-index:999;
}
.close1:hover{
    background-color: RGB(220,220,220);
}

页首HTML代码

<div class='d4' id='div4' style="display:none;z-index:999"><img src="https://pic.imgdb.cn/item/65911fabc458853aef70d92d.png" alt="公告栏" title="公告栏" /></div>
<div class="dialog">
    <span class="bulletin_board">公告栏</span>
    <img class="close1" src="https://pic.imgdb.cn/item/6591a3e4c458853aef8157ce.png" alt="关闭" title="关闭" />
</div>

<script type="text/javascript">
var div4 = document.getElementById('div4');
function aclick (){
    div1.style.display="none"; 
    div2.style.display=""; 
    div3.style.display=""; 
    div4.style.display=""; 
　　//第二次点击执行，因为绑定了saclick函数，所以会执行saclick中的内容
    div.onclick = saclick;    
}
function saclick (){
    div1.style.display=""; 
    div2.style.display="none"; 
    div3.style.display="none"; 
    div4.style.display="none"; 
　　//返回第一次执行的函数，实现循环执行
    div.onclick = aclick;    
}
 
const h = document.querySelector('.d4')
const Dialog = document.querySelector('.dialog')
const close1 = document.querySelector('.close1')
h.addEventListener('click', function(){
    Dialog.style.display = 'block'
})
close1.addEventListener('click', function(){
    Dialog.style.display = 'none'
})
/*点击对话框*/
Dialog.addEventListener('mousedown', function(e){
    //定义拖动函数(e是鼠标对象)
    function move(e){
        Dialog.style.top = e.pageY - 200 + 'px'
        Dialog.style.left = e.pageX - 200 + 'px'
    }
    //监听鼠标移动
    document.addEventListener('mousemove', move)
    //监听鼠标松开
    document.addEventListener('mouseup', function(){
        document.removeEventListener('mousemove', move)
    })
})  
</script>

点击查看详情

拓展

页面定制CSS代码

.d10{
    position: fixed;
    bottom: 130px;
    right: 15px;
    border-radius: 8px;
    width:22px;
    height:22px;
}
.dialog1{
    background-color:white;
    position: fixed;
    top: 30%;
    left: 35%;
    width: 360px;
    height: 300px;
    border: 1px solid transparent;
    border-color: rgba(151, 151, 151, 0.3);
    display: none;
    z-index:995;
}
.bulletin_board1{
    font-weight: bold;
    font-size: larger;
    position: relative;
    left: 150px;
    top: 10px;
}
.close2{
    width:22px;
    height:22px;
    position: relative;
    left: 280px;
    top: 10px;
    z-index:999;
}
.close2:hover{
    background-color: RGB(220,220,220);
}

页首HTML代码

<div class='d10' id='div10' style="display:none;z-index:999"><img src="https://pic.imgdb.cn/item/65911fabc458853aef70d92d.png" alt="公告栏" title="公告栏" /></div>
<div class="dialog1">
    <span class="bulletin_board1">公告栏</span>
    <img class="close2" src="https://pic.imgdb.cn/item/6591a3e4c458853aef8157ce.png" alt="关闭" title="关闭" />
</div>

var div10 = document.getElementById('div10');
function aclick (){
    div10.style.display=""; 
　　//第二次点击执行，因为绑定了saclick函数，所以会执行saclick中的内容
    div.onclick = saclick;    
}
function saclick (){
    div10.style.display="none"; 
　　//返回第一次执行的函数，实现循环执行
    div.onclick = aclick;    
}

const h1 = document.querySelector('.d10')
const Dialog1 = document.querySelector('.dialog1')
const close2 = document.querySelector('.close2')
h1.addEventListener('click', function(){
    Dialog1.style.display = 'block'
})
close2.addEventListener('click', function(){
    Dialog1.style.display = 'none'
})
/*点击对话框*/
Dialog1.addEventListener('mousedown', function(e){
    //定义拖动函数(e是鼠标对象)
    function move(e){
        Dialog1.style.top = e.pageY - 200 + 'px'
        Dialog1.style.left = e.pageX - 200 + 'px'
    }
    //监听鼠标移动
    document.addEventListener('mousemove', move)
    //监听鼠标松开
    document.addEventListener('mouseup', function(){
        document.removeEventListener('mousemove', move)
    })
})

公众号

参考
聚合图床不能上传二维码，可以上传到博客园后台相册中
页面定制CSS代码

.d5{
    position: fixed;
    bottom: 130px;
    right: 15px;
    border-radius: 8px;
    width:22px;
    height:22px;
}
.lb{
    width:100px;
    height:100px;
    position: fixed;
    bottom: 90px;
    right: 50px;
    display:none;
}
.d5:hover + .lb {
  display: block;
}

页首HTML代码

<div class='d5' id='div5' style="display:none;z-index:999"><img src="https://pic.imgdb.cn/item/65924f66c458853aef1df3e4.png" alt="微信订阅号" title="微信订阅号" /></div>
<div class="lb">
	<img src="https://images.cnblogs.com/cnblogs_com/blogs/668182/galleries/2369982/o_240103055007_%E5%BE%AE%E4%BF%A1%E8%AE%A2%E9%98%85%E5%8F%B7.png" alt="订阅号推广码" title="订阅号推广码" />
</div>

<script type="text/javascript">
var div5 = document.getElementById('div5');
function aclick (){
    div1.style.display="none"; 
    div2.style.display=""; 
    div3.style.display=""; 
    div4.style.display=""; 
    div5.style.display=""; 
　　//第二次点击执行，因为绑定了saclick函数，所以会执行saclick中的内容
    div.onclick = saclick;    
}
function saclick (){
    div1.style.display=""; 
    div2.style.display="none"; 
    div3.style.display="none"; 
    div4.style.display="none"; 
    div5.style.display="none"; 
　　//返回第一次执行的函数，实现循环执行
    div.onclick = aclick;    
}
</script>

github

参考
页面定制CSS代码

.d6{
    position: fixed;
    bottom: 170px;
    right: 15px;
    border-radius: 8px;
    width:22px;
    height:22px;
    display:none;
}
.d7{
    position: fixed;
    bottom: 170px;
    right: 15px;
    border-radius: 8px;
    width:22px;
    height:22px;
    display:none;
}
.image-container:hover .d6 {
  display: none;
}
.image-container:hover .d7 {
  display: block;
}

页首HTML代码

<div class="image-container">
    <div class='d6' id='div6' style="z-index:999"><img src="https://pic.imgdb.cn/item/65929dc2c458853aef4839d9.png" alt="GitHub"  title="GitHub" /></div>
    <div class='d7' id='div7' style="z-index:999"><a href="https://github.com/xxx"><img src="https://pic.imgdb.cn/item/65929dc9c458853aef485286.png" alt="GitHub"  title="GitHub" /></a></div>
</div>

<script type="text/javascript">
var div6 = document.getElementById('div6');
function aclick (){
    div1.style.display="none"; 
    div2.style.display=""; 
    div3.style.display=""; 
    div4.style.display=""; 
    div5.style.display=""; 
    div6.style.display="block"; 
　　//第二次点击执行，因为绑定了saclick函数，所以会执行saclick中的内容
    div.onclick = saclick;    
}
function saclick (){
    div1.style.display=""; 
    div2.style.display="none"; 
    div3.style.display="none"; 
    div4.style.display="none"; 
    div5.style.display="none"; 
    div6.style.display="none";
　　//返回第一次执行的函数，实现循环执行
    div.onclick = aclick;    
}
</script>

邮箱

页面定制CSS代码

.box{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.light{
  margin-right:40px;
  width: fit-content;
  cursor: pointer;
  .red{ display: none;}
  .yellow{ display: block;}
  &:hover{
    .red{ display: block;}
    .yellow{ display: none;}
  }
}
.yellow{
    position: relative;
    top: 36px;
    left: 35px;
    border-radius: 8px;
    width:22px;
    height:22px;
}
.red{
    position: relative;
    top: 36px;
    left: 35px;
    border-radius: 8px;
    width:22px;
    height:22px;
}
.aa{
  font-size: 14px;
  position: relative;
  top: 14px;
  left: 66px;
}
a:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: none;
}
a:active {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

页首HTML代码

    <div class="box">
        <div class="light">
            <img class="yellow" src="https://pic.imgdb.cn/item/6592aee0c458853aef8d6acc.png" alt="联系我" title="联系我" />
            <img class="red" src="https://pic.imgdb.cn/item/6592aee3c458853aef8d7b2f.png" alt="联系我" title="联系我" />
            <span class="aa"><a href="https://wx.mail.qq.com/" target="_blank">xxx@foxmail.com</a></span>
        </div>
    </div>

posted @ 2024-01-01 18:46 DogLeftover 阅读(5) 评论(0) 编辑收藏举报

刷新页面返回顶部