网站悬浮按钮小神器设计

:2018-10-24    :651 次   :12424 字   

2018旧版设计:


介绍:


为了方便操作和增加多个入口按钮还有美化,新设计了悬浮按钮,成品如下,正常状态下是闭合的,只有鼠标在上面才是展开的,新加按钮拖动。


image.png

image.png


代码:


【html代码】设计九宫格的样式,可以自行修改


<div class="control">
<ul>
<li><input  class="assist_button" id="control_night"  type="image" title="夜间模式" src="night.png" border="0"></li>
<li><input  class="assist_button" id="control_day"  type="image" title="日间模式" src="day.png" border="0"></li>
<li><input  class="assist_button"  id="control_up" type="image" title="回到顶部" src="up.png" border="0"></li>
<li><input  class="assist_button" id="control_music"  type="image"title="音乐" src="music.png" border="0"></li>
</ul>
<ul>
<li><input  class="assist_button" id="control_link"  type="image" title="友链" src="link.png" border="0"></li>
<li><input  class="admin_button" id="control_home"  type="image" title="随意拖动" src="home.png" border="0"></li>
<li><input  class="assist_button" id="control_tag" type="image" title="标签" src="tag.png" border="0"></li>
</ul>
<ul>
<li><input  class="assist_button" id="control_cloud" type="image" title="木芽云" src="cloud.png" border="0"></a></li>
<li><input  class="assist_button"  id="control_down" type="image" title="回到底部" src="down.png" border="0"></li>
<li><input  class="assist_button" id="control_img"  type="image" title="木芽图床" src="img.png" border="0"></a></li>
</ul>
</div>




【css代码】九宫格样式


/**控制神器**/

.control{
	position:fixed;
	top:200px;
	left:100px;
	display:block;
	width:144px;
}
.control li{
	list-style:none;
	float left;	
	margin:0;
	display: inline;
	padding:0;
	width:48px;
	height:48px;	
}
.control ul{
	width:160px;
	margin:0;
	padding:0;
	margin:0 auto;
}
.control .assist_button{
	visibility:hidden;
}
.control input {
	outline:none;
}
#control_day{
	display:none;
}
 @media screen and (max-width:768px) {
.control{
  display:none;
}
}


【js代码】



1.实现鼠标移动效果,九宫格的出现和消失


$(".control").hover(function(){

   $(".assist_button").css({"visibility":"visible"});
},function(){
    $(".assist_button").css({"visibility":"hidden"});
});


2.实现各个按钮的功能


		/*/标签*/
$("#control_tag").click(function(){
/**/
});
$("#control_link").click(function(){
/**/
});
  /*日间*/
  $("#control_day").click(function(){
/**/
});
    /*夜间*/
  $("#control_night").click(function(){
/**/
  });
  
  /*音乐*/
    $("#control_music").click(function(){
/**/

  });


3.实现按钮拖动效果


var Dragging=function(validateHandler){ //参数为验证点击区域是否为可移动区域,如果是返回欲移动元素,负责返回null
                var draggingObj=null; //dragging Dialog
                var diffX=0;
                var diffY=0;
                
                function mouseHandler(e){
                    switch(e.type){
                        case 'mousedown':
                            draggingObj=validateHandler(e);//验证是否为可点击移动区域
                            if(draggingObj!=null){
                                diffX=e.clientX-draggingObj.offsetLeft;
                                diffY=e.clientY-draggingObj.offsetTop;
                            }
                            break;
                        
                        case 'mousemove':
                            if(draggingObj){
                                draggingObj.style.left=(e.clientX-diffX)+'px';
                                draggingObj.style.top=(e.clientY-diffY)+'px';
                            }
                            break;
                        
                        case 'mouseup':
                            draggingObj =null;
                            diffX=0;
                            diffY=0;
                            break;
                    }
                };
                
                return {
                    enable:function(){
                        document.addEventListener('mousedown',mouseHandler);
                        document.addEventListener('mousemove',mouseHandler);
                        document.addEventListener('mouseup',mouseHandler);
                    },
                    disable:function(){
                        document.removeEventListener('mousedown',mouseHandler);
                        document.removeEventListener('mousemove',mouseHandler);
                        document.removeEventListener('mouseup',mouseHandler);
                    }
                }
            }

            function getDraggingDialog(e){
                var target=e.target;
                while(target && target.className.indexOf('admin_button')==-1){
                    target=target.offsetParent;
                }
                if(target!=null){
                    return target.offsetParent;
                }else{
                    return null;
                }
            }
            
            Dragging(getDraggingDialog).enable();



×