qq主頁面

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    a,
    img {
        border: 0;
    }

    #move_div {
        position: absolute;
        width: 430px;
        height: 330px;
        border: solid 1px #EBF2F9;
    }

    #bottom {
        width: 430px;
        height: 148px;
        position: absolute;
        background-color: #EBF2F9;
    }

    #tx {
        position: absolute;
        width: 80px;
        height: 80px;
        margin-left: 43px;
        margin-top: 12px;
        /*border: solid 1px black;*/
        border-radius: 5px;
    }
    #tx img{
        width:80px;
        height: 75px;
    }
    #QQ {
        margin-left: 135px;
        margin-top: 12px;
    }

    #QQ input {
        font-size: 13px;
        line-height: 20px;
        outline: none;
        width: 193px;
        height: 30px;
        border-radius: 5px;
        border: solid 1px gainsboro;
        text-indent: 4px;
    }

    #QQ input:hover {
        border: solid 1px dodgerblue;
    }

    #QQ a {
        font-size: 12px;
        text-decoration: none;
        color: #2685E3;
        font-family: "微軟雅黑";
    }

    #QQ a:hover {
        opacity: 0.5
    }

    #dl {
        width: 193px;
        height: 30px;
        background-color: dodgerblue;
        outline: none;
        border: none;
        font-size: 12px;
        color: white;
        border-radius: 4px;
        display: block;
        margin-top: 32px;
        font-family: "微軟雅黑";
    }

    #dl:hover {
        background-color: #3CC3F5;
    }

    .min {
        width: 27px;
        height: 27px;
        /*border: 1px solid red;*/
        position: absolute;
        right: 27px;
        top: 0px;
        z-index: 110;
    }

    .min2 {
        width: 27px;
        height: 27px;
        line-height: 27px;
        text-align: center;
        position: absolute;
        right: 27px;
        top: 4px;
        z-index: 110;
        color: white;

    }

    .min:hover {
        cursor: default;
        background-color: #FFFFFF;
        opacity: 0.3;
        -moz-opacity: 0.3;
    }

    .tz{
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100px;
            z-index: 100;
        }
        .tz:hover{
            cursor: move;
        }

    .min_div{
            position: absolute;
            bottom:5px ;
            left: 5px;
            width: 150px;
            height: 30px;
            background-color:#0096ED;
            line-height: 30px;
            text-align: center;
            color: #FFFFFF;
            display: none;
        }

    .min_div:hover{
            cursor: pointer;
            opacity: 0.8;
        }



    .closeLogin {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 27px;
        height: 27px;
        z-index: 110;
        font-size: 19px;
    }

    .closeLogin2 {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 27px;
        height: 27px;
        font-size: 19px;
        color: white;
        text-align: center;
        line-height: 27px;
    }

    .closeLogin:hover {
        cursor: default;
        filter: Alpha(opacity=30);
        /*border: 1px solid #FFFFFF;*/
        background-color: red;
        opacity: 0.8;
    }

    .showLogin {
        font-family: "宋體";
        width: 88px;
        height: 88px;
        /*border: 1px solid red;*/
    }
    /*.showLogin:hover{
        background-color: dodgerblue;
        opacity: 0.2;
    }*/

    .showLogin img {
        margin-top: 2px;
        width: 60px;
        height: 60px;
        margin-left: 12px;
    }

    #check{
        width: 10px;
        height: 10px;

    }

    .ccc{
        position: absolute;
        margin-left: -30px;
        margin-top: 7px;
    }

    .ddd{
        /*border: 1px solid black;*/
        position: absolute;

        color: gray;
        font-size:13px;
        font-family: "微軟雅黑";
        margin-left:30px;
        margin-top:3px ;
    }
    .remember{
        position: absolute;
        margin-left: 75px;
        margin-top: 7px;
    }
    .eee{
        /*border: 1px solid black;*/
        position: absolute;
        color: gray;
        font-size:13px;
        font-family: "微軟雅黑";
        margin-left:135px;
        margin-top:3px ;
    }
</style>
<script>
    var move_div, min_div;

    window.onload = function() {

        move_div = document.getElementById("move_div");
        min_div = document.getElementById("min_div");
    }

    //顯示登錄窗口
    function showLogin() {
        move_div.style.display = "block"

    }

    //登錄窗口最小化

        function minLogin(){
            move_div.style.display = "none";
            min_div.style.display = "block";
        }


        //登錄窗口最大化

        function maxLogin(){
            move_div.style.display = "block";
            min_div.style.display = "none";
        }

    //關閉窗口
    function closeLogin() {
        move_div.style.display = "none";
    }
</script>
<script type="text/javascript" src="js/js/move.js" ></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

登錄

<div class="closeLogin" onclick="closeLogin()"></div>
<div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()">


            <!--實現拖拽-->
        <div class="tz"></div>



    <!--上半部分藍色動態圖-->

    <div id="container" style="width:430px;height:182px;">
        <!--<span id="bigQQ" style="font-size: 60px;">
            QQ
        </span>-->
        <div class="min2">
            <font style="font-size: 17px;font-weight: 900px;">－</font>
        </div>
        <div class="min" onclick="minLogin()"></div>

        <div class="closeLogin2">
            <font style="font-size:22px;">×</font>
        </div>
        <div class="closeLogin" onclick="closeLogin()"></div>

        <div id="anitOut"></div>
    </div>

    <!--下半部分選項等-->
    <div id="bottom">
        <div id="tx">
            <img src="img/img/news_default_AF2F541937CE17C5F3C7A0819D5BEBE8.jpg"/>
        </div>
        <div id="QQ">
            <input type="text" value="149772262"/>
            <a href="https://ssl.zc.qq.com/v3/index-chs.html?from=client&pt_clientver=5539&pt_src=1&ptlang=2052&regkey=4B0AE3ED88DFC374570559FD92BEC59C3A8FD333343989A73CE98FD31949E79E&ADUIN=0&ADSESSION=0&ADTAG=CLIENT.QQ.5539_NewAccount_Btn.0&ADPUBNO=26730">&nbsp;&nbsp;&nbsp;註冊賬號</a><br />
            <input type="password" placeholder="&nbsp;密碼" onfocus="this.placeholder=''" onblur="this.placeholder='&nbsp;密碼'" />
            <a href="https://aq.qq.com/v2/uv_aq/html/reset_pwd/pc_reset_pwd_input_account.html?v=4.0&old_ver_account=149772262">&nbsp;&nbsp;&nbsp;找回密碼</a><br />
            <div class="ccc">
            <input type="checkbox" name="vehicle" value="Bike" style="zoom: 50%;">
            </div>
            <font class="ddd">自動登錄</font>

            <div class="remember">
            <input type="checkbox" name="vehicle" value="Bike" style="zoom: 50%;">
            </div>

            <font class="eee">記住密碼</font>


            <button id="dl">登&nbsp;&nbsp;錄</button>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function() {
        if(!window.ActiveXObject && !!document.createElement("canvas").getContext) {
            $.getScript("http://im-img.qq.com/pcqq/js/200/cav.js?_=1428576021379",
                function() {
                    var t = {
                        width: 1.5,
                        height: 1.5,
                        depth: 10,
                        segments: 12,
                        slices: 6,
                        xRange: 0.8,
                        yRange: 0.1,
                        zRange: 1,
                        ambient: "#525252",
                        diffuse: "#FFFFFF",
                        speed: 0.0002
                    };
                    var G = {
                        count: 2,
                        xyScalar: 1,
                        zOffset: 100,
                        ambient: "#002c4a",
                        diffuse: "#005584",
                        speed: 0.001,
                        gravity: 1200,
                        dampening: 0.95,
                        minLimit: 10,
                        maxLimit: null,
                        minDistance: 20,
                        maxDistance: 400,
                        autopilot: false,
                        draw: false,
                        bounds: CAV.Vector3.create(),
                        step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))
                    };
                    var m = "canvas";
                    var E = "svg";
                    var x = {
                        renderer: m
                    };
                    var i, n = Date.now();
                    var L = CAV.Vector3.create();
                    var k = CAV.Vector3.create();
                    var z = document.getElementById("container");
                    var w = document.getElementById("anitOut");
                    var D, I, h, q, y;
                    var g;
                    var r;

                    function C() {
                        F();
                        p();
                        s();
                        B();
                        v();
                        K(z.offsetWidth, z.offsetHeight);
                        o()
                    }

                    function F() {
                        g = new CAV.CanvasRenderer();
                        H(x.renderer)
                    }

                    function H(N) {
                        if(D) {
                            w.removeChild(D.element)
                        }
                        switch(N) {
                            case m:
                                D = g;
                                break
                        }
                        D.setSize(z.offsetWidth, z.offsetHeight);
                        w.appendChild(D.element)
                    }

                    function p() {
                        I = new CAV.Scene()
                    }

                    function s() {
                        I.remove(h);
                        D.clear();
                        q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);
                        y = new CAV.Material(t.ambient, t.diffuse);
                        h = new CAV.Mesh(q, y);
                        I.add(h);
                        var N, O;
                        for(N = q.vertices.length - 1; N >= 0; N--) {
                            O = q.vertices[N];
                            O.anchor = CAV.Vector3.clone(O.position);
                            O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));
                            O.time = Math.randomInRange(0, Math.PIM2)
                        }
                    }

                    function B() {
                        var O, N;
                        for(O = I.lights.length - 1; O >= 0; O--) {
                            N = I.lights[O];
                            I.remove(N)
                        }
                        D.clear();
                        for(O = 0; O < G.count; O++) {
                            N = new CAV.Light(G.ambient, G.diffuse);
                            N.ambientHex = N.ambient.format();
                            N.diffuseHex = N.diffuse.format();
                            I.add(N);
                            N.mass = Math.randomInRange(0.5, 1);
                            N.velocity = CAV.Vector3.create();
                            N.acceleration = CAV.Vector3.create();
                            N.force = CAV.Vector3.create()
                        }
                    }

                    function K(O, N) {
                        D.setSize(O, N);
                        CAV.Vector3.set(L, D.halfWidth, D.halfHeight);
                        s()
                    }

                    function o() {
                        i = Date.now() - n;
                        u();
                        M();
                        requestAnimationFrame(o)
                    }

                    function u() {
                        var Q, P, O, R, T, V, U, S = t.depth / 2;
                        CAV.Vector3.copy(G.bounds, L);
                        CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);
                        CAV.Vector3.setZ(k, G.zOffset);
                        for(R = I.lights.length - 1; R >= 0; R--) {
                            T = I.lights[R];
                            CAV.Vector3.setZ(T.position, G.zOffset);
                            var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);
                            var W = G.gravity * T.mass / N;
                            CAV.Vector3.subtractVectors(T.force, k, T.position);
                            CAV.Vector3.normalise(T.force);
                            CAV.Vector3.multiplyScalar(T.force, W);
                            CAV.Vector3.set(T.acceleration);
                            CAV.Vector3.add(T.acceleration, T.force);
                            CAV.Vector3.add(T.velocity, T.acceleration);
                            CAV.Vector3.multiplyScalar(T.velocity, G.dampening);
                            CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);
                            CAV.Vector3.add(T.position, T.velocity)
                        }
                        for(V = q.vertices.length - 1; V >= 0; V--) {
                            U = q.vertices[V];
                            Q = Math.sin(U.time + U.step[0] * i * t.speed);
                            P = Math.cos(U.time + U.step[1] * i * t.speed);
                            O = Math.sin(U.time + U.step[2] * i * t.speed);
                            CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);
                            CAV.Vector3.add(U.position, U.anchor)
                        }
                        q.dirty = true
                    }

                    function M() {
                        D.render(I)
                    }

                    function J(O) {
                        var Q, N, S = O;
                        var P = function(T) {
                            for(Q = 0, l = I.lights.length; Q < l; Q++) {
                                N = I.lights[Q];
                                N.ambient.set(T);
                                N.ambientHex = N.ambient.format()
                            }
                        };
                        var R = function(T) {
                            for(Q = 0, l = I.lights.length; Q < l; Q++) {
                                N = I.lights[Q];
                                N.diffuse.set(T);
                                N.diffuseHex = N.diffuse.format()
                            }
                        };
                        return {
                            set: function() {
                                P(S[0]);
                                R(S[1])
                            }
                        }
                    }

                    function v() {
                        window.addEventListener("resize", j)
                    }

                    function A(N) {
                        CAV.Vector3.set(k, N.x, D.height - N.y);
                        CAV.Vector3.subtract(k, L)
                    }

                    function j(N) {
                        K(z.offsetWidth, z.offsetHeight);
                        M()
                    }

                    C();
                })
        } else {
            alert('調用cav.js失敗');
        }
    });
</script>
<div id="min_div" class="min_div" onclick="maxLogin()">
        +&nbsp;用戶登錄
    </div>

鼠標放上放下圖片改變

仿百度

qq主頁面

表單事件

實現拖拽代碼

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結