美文网首页
HTML CSS JS | 亚克力可拖动窗口

HTML CSS JS | 亚克力可拖动窗口

作者: T_K_233 | 来源:发表于2018-12-11 00:41 被阅读0次

    <!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).offset();(elem).children('.bg').css({
    width: ('body').width(), height:('body').height(),
    marginLeft: -offset.left,
    marginTop: -offset.top,
    marginBottom: -('body').height() + offset.top, }); }; var init_window = function() { var pos = {top: 0, down: 0, x: 0, y: 0};('.window').each(function(){
    (this).prepend('<div class="bg"></div>');(this).children('.bg').css({'background-image': ('body').css('background-image')});(this).css('left', Math.round((this).offset().left/32)*32);(this).css('top', Math.round((this).offset().top/32)*32); render(this); });('.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>

    相关文章

      网友评论

          本文标题:HTML CSS JS | 亚克力可拖动窗口

          本文链接:https://www.haomeiwen.com/subject/vlbjhqtx.html