一款基於jquery ui漂亮的可拖動div執行個體

標籤：style   blog   http   color   io   os   ar   sp   div   

今天要給大家帶來一款基於jquery ui漂亮的可拖動div執行個體。這款執行個體用了圖片當背景，div層採用了幽靈透明效果。div拖動是基於jquery ui的。介面非常漂亮。一起看下：

線上預覽   源碼下載

實現的代碼。

html代碼：

    <div id="box1" class="box blurred-bg tinted">        <h1>            Blurred Background</h1>        <h2>            By <a href="http://www.w2bc.com">Ariona, Rian</a></h2>        <p>            Drag this box to move around</p>    </div>

css代碼：

 body        {            background-image: url("normal.jpg");            background-repeat: no-repeat;            background-size: cover;            background-attachment: fixed;            font-family: Raleway, Open Sans, Droid Sans, Roboto,arial, sans-serif;        }                .blurred-bg        {            background-image: url("blur.jpg");            background-repeat: no-repeat;            -moz-background-size: cover;            -o-background-size: cover;            -webkit-background-size: cover;            background-size: cover;            background-attachment: fixed;        }        .blurred-bg.tinted        {            background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("blur.jpg");            background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("blur.jpg");            background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url("https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg");        }        .blurred-bg.shaded        {            background-image: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("blur.jpg");            background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("blur.jpg");            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("blur.jpg");        }                .box        {            width: 500px;            height: 300px;            left: -webkit-calc( 50% - 250px );            top: 20%;            position: absolute;            border-radius: 5px;            -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);            -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);            box-shadow: 0 20px 30px rgba(0, 0, 0, 0.6);            border: 1px solid rgba(255, 255, 255, 0.3);            padding: 20px;            text-align: center;            -moz-box-sizing: border-box;            -webkit-box-sizing: border-box;            box-sizing: border-box;            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);        }        .box:active        {            cursor: move;        }                h1, h2, a, p        {            color: white;            font-weight: 100;        }        .tinted h1, .tinted h2, .tinted a, .tinted p        {            color: black;            text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);        }                h2        {            font-size: 14px;        }                p        {            margin: 20px;        }

註：本文愛編程原創文章，轉載請註明原文地址：http://www.w2bc.com/Article/8713

一款基於jquery ui漂亮的可拖動div執行個體