<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小企鹅</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: rgba(0,0,0,.5);
}
.qqbox{
min-width: 560px;
min-height: 490px;
max-width:100%;
max-height:100%;
display: flex;
flex-direction: column;
background-color: #fff;
user-select: none;
border-radius: 3px;
position: fixed;
left: 450px;
top: 50px;
color: #333;
}
.qqbox .top{
height: 90px;
}
.qqbox .top .title{
text-align: center;
height: 40px;
line-height: 40px;
background:-webkit-linear-gradient(left, rgb(23, 201, 224) , rgb(41, 235, 177));
}
.qqbox .top .nav{
height: 50px;
border-bottom: 1px solid #ccc;
line-height: 50px;
}
.qqbox .bottom{
display: flex;
flex-grow: 1;
}
.qqbox .left{
display: flex;
flex-grow: 1;
flex-direction: column;
}
.qqbox .left .chat{
flex-grow: 1;
}
.qqbox .left .input{
height: 230px;
border-top: 1px solid #ccc;
}
.qqbox .right{
width: 160px;
display: flex;
flex-direction: column;
border-left: 1px solid #ccc;
}
.qqbox .right .message{
height: 164px;
border-bottom: 1px solid #ccc;
}
.qqbox .right .member{
flex-grow: 1;
}
/* 控件 */
[class^="ctrl-"]{
position: absolute;
cursor: pointer;
}
.qqbox .ctrl-down{
width: 100%;
height: 8px;
bottom: -5px;
left: 0;
cursor: s-resize;
}
.qqbox .ctrl-dbl{
width: 10px;
height: 10px;
bottom: -5px;
right: -5px;
cursor: se-resize;
}
.qqbox .ctrl-right{
width: 10px;
height: 100%;
top: 0;
right: -5px;
cursor: w-resize;
}
.qqbox .ctrl-clear{
right: 10px;
top: 5px;
transform: scaleX(1.5);
color:#fff;
font-weight: 300;
}
.qqbox .ctrl-min{
right: 60px;
top: 5px;
transform: scaleX(2.5);
color:rgba(255,255,255,0.8);
}
.qqbox .ctrl-max{
width: 10px;
height: 8px;
border: 1px solid rgba(255,255,255,0.8);
right: 32px;
top: 12px;
}
.qqbox .ctrl-max:hover{
transition: all .5s;
transform: scale(1.5);
}
#qqscale{
position: fixed;
left: 0px;
bottom: 0px;
border-radius: 50%;
display: none;
width: 50px;
height: 50px;
background-color: #fff;
box-shadow: 3px 3px 3px #000;
}
#qqscale img{
width: 100%;
height: 100%;
border-radius: 50%;
animation: qqscale 2s infinite;
}
@keyframes qqscale{
0%{
transform: scale(1);
}
100%{
transform: scale(1.5);
}
}
</style>
</head>
<body>
<div class="qqbox" id="qqbox">
<div class="top">
<div class="title">标题</div>
<div class="nav">导航</div>
</div>
<div class="bottom">
<div class="left">
<div class="chat">聊天窗口</div>
<div class="input">输入信息</div>
</div>
<div class="right">
<div class="message">通知窗口</div>
<div class="member">成员窗口</div>
</div>
</div>
<!-- 控件 -->
<div class="ctrl-down"></div>
<div class="ctrl-right"></div>
<div class="ctrl-dbl"></div>
<div class="ctrl-min">-</div>
<div class="ctrl-max"></div>
<div class="ctrl-clear">x</div>
</div>
<!-- 小企鹅 -->
<div id="qqscale"><img src="http://pic.51yuansu.com/pic2/cover/00/38/57/5812b4171f035_610.jpg" alt=""></div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//jq拉
var $qqbox = $('#qqbox');
$('.ctrl-down, .ctrl-dbl , .ctrl-right')
.mousedown(function(e){
var startX = e.clientX;//鼠标起始坐标
var startY = e.clientY;
var oldHeight = $qqbox.height();//原来的宽高
var oldWidth = $qqbox.width();
var $that = $(this);
$(document).mousemove(function(e){
var endX = e.clientX;//鼠标坐标
var endY = e.clientY;
var disX = endX - startX;//偏移量
var disY = endY - startY;
if($that.hasClass('ctrl-down')){//下拉
$qqbox.height(oldHeight + disY);
}
if($that.hasClass('ctrl-right')){//右拉
$qqbox.width(oldWidth + disX);
}
if($that.hasClass('ctrl-dbl')){//右下角
$qqbox.width(oldWidth + disX);
$qqbox.height(oldHeight + disY);
}
})
$(document).mouseup(function(){
$(document).off('mousemove');//关闭移动事件
})
})
//原生js拖拉
drafting(document.querySelector('.title'),document.querySelector('#qqbox'));
drafting(document.querySelector('#qqscale'));
//jq附加功能
addCon();
//jq附加功能函数
function addCon(){
$('.ctrl-clear').click(function(){//关闭
if(!confirm('您确认要关闭吗？')){
return;
}
$qqbox.toggle();
})
$('.ctrl-min').click(function(){//缩小
$('#qqscale').slideDown(300);
$qqbox.hide();
})
//小企鹅!
$('#qqscale').mousedown(function(){
var ntime = new Date().getTime();
$(this).mouseup(function(){
var otime = new Date().getTime();
if(otime-ntime <= 200){
$('#qqscale').slideUp(300);
$qqbox.show(1000);
$(this).off('mouseup');
}
})
})
$('#qqscale')
//qqbox记录数据
var oldData = {width:0,height:0,top:0,left:0};
$('.ctrl-max').click(function(){//放大还原
//放大
if(!this.flagData){
this.flagData = true;//一个开关按钮
//存qqbox数据(复原用的)
oldData.width = $qqbox.width();
oldData.height = $qqbox.height();
oldData.top = $qqbox.offset().top;
oldData.left = $qqbox.offset().left;
//设置
$qqbox.width($(window).width())
.height($(window).height())
.css({
top:0,
left:0
});
}else{//还原
this.flagData = false;//打开放大的开关
$qqbox.width(oldData.width)
.height(oldData.height)
.css({
top:oldData.top,
left:oldData.left
});
}
})
}
//拖拽方法
function drafting(ele,target){
var target = target || ele;
ele.onmousedown = function(e){
var boxX = this.offsetLeft;
var boxY = this.offsetTop;
var startX = e.clientX;
var startY = e.clientY;
var maxX = window.innerWidth - this.offsetWidth;
var maxY = window.innerHeight-this.offsetHeight;
document.onmousemove = function(e){
var disX = e.clientX - startX + boxX;
var disY = e.clientY - startY + boxY;
disX = disX<=0?0:disX;
disX = disX>=maxX?maxX:disX;
disY = disY<=0?0:disY;
disY = disY>=maxY?maxY:disY;
this.style.top = disY + 'px';
this.style.left = disX + 'px';
e.preventDefault();
}.bind(this)
document.onmouseup = function(e){
document.onmousemove = null;
}
}.bind(target)
}
})
</script>
</body>
</html>
156
07-10
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
