HTML CSS JS | 亚克力可拖动窗口
<!DOCTYPE html>
<html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
body {
background-image: url(http://i0.hdslb.com/bfs/article/c15e1bf99b5ee1b8a51cddefadaf2a335accef90.jpg);
background-repeat: no-repeat;
background-size: cover;
margin: 0;
min-height: 100vh;
}
.window {
position: absolute;
right: 1rem;
top: 20rem;
border: 1px solid #fff;
width: 16rem;
height: 12rem;
overflow: hidden;
resize: both;
}
.window > .bar {
position: relative;
background: #fff;
width: 100%; height: 1.75rem;
line-height: 1.75rem;
opacity: 0.5;
font-size: 0.75rem;
z-index: 6;
}
.window>.bar>button{
height: 100%;
}
.window > .color {
position: absolute;
top: 1.75rem; bottom: 0;
left: 0; right: 0;
opacity: 0.375;
background: #fff;
z-index: -1;
}
.window > .bg {
position: relative;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(8px);
}
</style>
<body>
<div id="mydiv" class="window">
<div class="bar"><button>×</button>Console</div>
<div class="color"></div>
<h1>Header</h1>
<p>Paragraph. Something to write...</p>
</div>
<div id="mydiv" class="window" style="left: 50vw">
<div class="bar"></div>
<h1>Header</h1>
<p>Paragraph. Something to write...</p>
</div>
<script>
var render = function(elem) {
var offset = (elem).children('.bg').css({
width: ('body').height(),
marginLeft: -offset.left,
marginTop: -offset.top,
marginBottom: -('.window').each(function(){
(this).children('.bg').css({'background-image':
(this).css('left', Math.round(
(this).css('top', Math.round(
('.window>.bar').on('mousedown', function(e){
e = e || window.event;
e.preventDefault();
element = $(this).parent();
element.tracking = true;
pos.x = e.clientX;
pos.y = e.clientY;
$(document).on('mousemove', function(e) {
if(element.tracking){
e = e || window.event;
e.preventDefault();
pos.left = pos.x - e.clientX;
pos.top = pos.y - e.clientY;
pos.x = e.clientX;
pos.y = e.clientY;
element.css('left', element.offset().left - pos.left);
element.css('top', element.offset().top - pos.top);
render(element);
}
});
$(document).on('mouseup', function() {
element.tracking = false;
element.css('left', Math.round((element.offset().left-pos.left)/32)*32);
element.css('top', Math.round((element.offset().top-pos.top)/32)*32);
});
});
$(window).resize(function(){
$('.window').each(function(){render(this)});
});
};
$(document).ready(function(){
init_window();
});
</script>
</body>
</html>
