穿墻效果及註釋

阿新 • • 發佈：2018-05-15

linear AR style body title asi 定義 sna parse

穿墻效果附加註釋，附加鼠標進入方向算法

技術分享圖片

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul {
        overflow: hidden;
        width: 630px;
        margin: 100px auto;
    }

    ul li {
         
float: left;
        position: relative;
        width: 200px;
        height: 200px;
        background: #ccc;
        margin: 5px;
        overflow: hidden;
    }

    ul li span {
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255, 0, 0, 0.3);
        left: -200px;
        top:  
0;
    }
    </style>
    <script>
    function getStyle(obj, sName) {
        // 獲取元素對象的css屬性值兼容ie和其他瀏覽器
        return (obj.currentStyle || getComputedStyle(obj, false))[sName];
    }

    function move(obj, json, options) {
        // obj 為元素對象、json為設定最後結果對象、options為設置對象
        // 給options設定默認值 

        options = options || {};
        // 設定持續時間
        options.duration = options.duration || 700;
        // 設定運動方式
        options.easing = options.easing || ‘ease-out‘;
        // 定義空對象
        var start = {};
        // 定義差值對象
        var dis = {};
        // 遍歷設定設定最後結果對象
        for (var name in json) {
            // 將設定最後結果對象中的屬性值與初始值取差值
            start[name] = parseFloat(getStyle(obj, name) );
            dis[name] = json[name] - start[name];
        }
        // 下方每30毫秒執行一次運動，這裏獲取運動總次數
        var count = Math.floor(options.duration / 30);
        // 設定運動初始次數
        var n = 0;
        // 清空間歇調用，如果以前定義過則清除動畫次數
        clearInterval(obj.timer);
        // 用obj.timer來代替動畫次數
        obj.timer = setInterval(function() {
            n++;
            for (var name in json) {
                switch (options.easing) {
                    case ‘linear‘:
                        var cur = start[name] + dis[name] * n / count;
                        break;
                    case ‘ease-in‘:
                        var a = n / count;
                        var cur = start[name] + dis[name] * Math.pow(a, 3);
                        break;
                        // 次數默認使用ease-out
                    case ‘ease-out‘:
                        var a = 1 - n / count;
                        // cur為每次運動後的元素的落腳位置
                        var cur = start[name] + dis[name] * (1 - Math.pow(a, 3));
                        break;
                }
                if (name == ‘opacity‘) {
                    obj.style.opacity = cur;
                    obj.style.filter = ‘alpha(opacity:‘ + cur * 100 + ‘)‘;
                } else {
                    obj.style[name] = cur + ‘px‘;
                }
            }
            // 如果運動完成，則清除運動（obj.timer）
            if (n == count) {
                // 清除動畫次數
                clearInterval(obj.timer);
                // 回調函數
                options.complete && options.complete();
            }
        }, 30);
    }

    function a2d(n) {
        // n 為弧度 ；弧度轉化為角度
        return n * 180 / Math.PI;
    }

    function hoverDir(ev, obj) {
        // 領邊長度
        var a = ev.clientX - obj.offsetLeft - obj.offsetWidth / 2;
        // 對邊長度
        var b = obj.offsetTop + obj.offsetHeight / 2 - ev.clientY;
        // 通過角度來獲得鼠標進入的方向；0為左側、 1為下 、2為右、 3為上
        // Math.atan2(b, a)為獲取弧度公式
        // a2d(n)為獲取角度公式
        return Math.round((a2d(Math.atan2(b, a)) + 180) / 90) % 4;
    }

    function through(obj) {
        var oS = obj.children[0]; //這個是li裏面的span
        // 鼠標進入的時候
        obj.onmouseenter = function(ev) {
            // 如果不知道ev是啥  就打印出來看看
            console.log(ev)
            // 兼容ie瀏覽器
            var oEvent = ev || event;
            // obj為li，將oEvent和 li 作為參數，dir為返回值代表著鼠標的進入方向
            var dir = hoverDir(oEvent, obj);
            switch (dir) {
                case 0:
                    //左，oS為li中的 span
                    oS.style.left = ‘-200px‘;
                    oS.style.top = 0;
                    break;
                case 1:
                    //下
                    oS.style.left = 0;
                    oS.style.top = ‘200px‘;
                    break;
                case 2:
                    //右
                    oS.style.left = ‘200px‘;
                    oS.style.top = 0;
                    break;
                case 3:
                    //上
                    oS.style.left = 0;
                    oS.style.top = ‘-200px‘;
                    break;
            }
            //oS是li裏面的span，設置運動  
            // move(obj, json, options) obj = oS 、 json = { left: 0, top: 0 }、options取默認值，並且沒有回調函數
            move(oS, { left: 0, top: 0 });
        };

        // 鼠標離開時
        obj.onmouseleave = function(ev) {
            var oEvent = ev || event;
            var dir = hoverDir(oEvent, obj);
            switch (dir) {
                case 0:
                // move(obj, json, options) obj = oS 、 json = { left: -200, top: 0 }、options取默認值，並且沒有回調函數
                    move(oS, { left: -200, top: 0 });
                    break;
                case 1:
                    move(oS, { left: 0, top: 200 });
                    break;
                case 2:
                    move(oS, { left: 200, top: 0 });
                    break;
                case 3:
                    move(oS, { left: 0, top: -200 });
                    break;
            }
        };
    }
    window.onload = function() {
        var aLi = document.getElementsByTagName(‘li‘);
        for (var i = 0; i < aLi.length; i++) {
            through(aLi[i]);
        }
    };
    </script>
</head>

<body>
    <ul>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
        <li><span></span></li>
    </ul>
</body>

</html>

穿墻效果及註釋

linear AR style body title asi 定義 sna parse 穿墻效果附加註釋，附加鼠標進入方向算法 <!doctype html> <html> <head> <meta charset="

《機器學習實戰》第2章閱讀筆記3 使用K近鄰演算法改進約會網站的配對效果—分步驟詳細講解1——資料準備：從文字檔案中解析資料（附詳細程式碼及註釋）

本篇使用的資料存放在文字檔案datingTestSet2.txt中，每個樣本資料佔據一行，總共有1000行。樣本主要包含以下3中特徵：（1）每年獲得飛行常客里程數（2）玩視訊遊戲所耗時間百分比（3）每週消費的冰淇淋公升數在使用分類器之前，需要將處理的檔案格式

照片墻效果---->能成功運行。js+html+css

照片 function parent <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>My照片墻</title> <style ty

通過遊戲學python 3.6 第一季第三章實例項目猜數字遊戲--核心代碼--猜測次數--隨機函數和屏蔽錯誤代碼--優化代碼及註釋可復制直接使用娛樂可封裝函數

nbsp 退出而不是判斷 and 封裝 except 次數 img 1 #猜數字--核心代碼--猜測次數--隨機函數和屏蔽錯誤代碼---優化代碼及註釋 2 3 import random 4 number = random.randint(1,

通過遊戲學python 3.6 第一季第九章實例項目猜數字遊戲--核心代碼--猜測次數--隨機函數和屏蔽錯誤代碼--優化代碼及註釋--簡單賬號密碼登陸--賬號的註冊查詢和密碼的找回修改--鎖定賬號--鎖定次數--菜單功能'menufile

lock isp 無限循環 lis true 條件判斷 elif bre format 通過遊戲學python 3.6 第一季第九章實例項目猜數字遊戲--核心代碼--猜測次數--隨機函數和屏蔽錯誤代碼--優化代碼及註釋--簡單賬號密碼登陸--賬號的註冊查詢和密碼的

【Eclipse+IntelliJ反編譯】Eclipse/IntelliJ IDEA反編譯查看源碼及註釋

spa 分享圖片三方鼠標 .html 右擊文件夾工具 tool 怎麽用IDE查看第三方jar包的源碼和註釋，IntelliJ IDEA自帶反編譯器，Eclipse裝個插件即可，不能看註釋就麻煩了，總不能去找API文檔吧，現在終於掌握了，下面給出解決方案，供大家參考，

安全之路 —— 利用遠程線程註入的方法（使用DLL）實現穿墻與隱藏進程

pat 完整路徑 ystemd return cpi printf output inf server 簡介大多數後門或病毒要想初步實現隱藏進程，即不被像任務管理器這樣典型的RING3級進程管理器找到過於明顯的不明進程，其中比較著名的方法就是通過遠程線程註

Centos7防火墻問題及端口說明

ace sta systemctl justify ali sys all nginx服務 restart p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545

語句塊的概念及註釋符的使用

a.語句塊　　1.語句塊是在條件為真（條件語句）時執行或者執行多次（迴圈語句）的一組語句；　　2在程式碼前放置空格來縮排語句即可建立語句塊,語句塊中的每行必須是同樣的縮排量；　　3.縮排:Python開發者有意讓違反了縮排規則的程式不能通過編譯,以此來強制程式設計師養成良好的

Qt計算器開發(三)：執行效果及專案總結

Java基礎之第一個Java程式HelloWorld及註釋

程式碼如下： // 一個檔案中只能有一個共有的類，並且與檔名稱一致，大小寫注意 public class HelloWorld{ // 程式的入口 public static void main

資料結構之二叉查詢樹Java實現原始碼及註釋

二叉查詢樹（Binary Search Tree），（又：二叉搜尋樹，二叉排序樹）它或者是一棵空樹，或者是具有下列性質的二叉樹：若它的左子樹不空，則左子樹上所有結點的值均小於它的根結點的值；若它的右子樹不空，則右子樹上所有結點的值均大於它的根結點的值；它的左、右子樹也分別為二叉排序樹。以下是樓主用jav

JDBC建立資料庫連線詳細程式碼及註釋

注：完整程式碼在最後使用jdbc建立mysql資料庫連線 1.從db.properties配置檔案中讀取資料庫連線引數。 db.properties檔案內容如下： jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc\:mysql\:/

微信小程式實現slideUp、slideDown滑動效果及點選空白隱藏功能示例

本文例項講述了微信小程式實現slideUp、slideDown滑動效果及點選空白隱藏功能。分享給大家供大家參考，具體如下：怎樣實現jq中的slideUp或者slideDown這種動畫效果呢，我的思路是用css3的transform: translateY() 屬性，給需要動畫的元素新增上一個動畫

《機器學習實戰》第2章閱讀筆記2 K近鄰演算法實現（附詳細程式碼及註釋）

虛擬碼如下：對未知類別屬性的資料集中的每個點一次執行以下操作：（1）計算已知類別資料集中的點與當前點之間的距離；（2）按照距離遞增次序排序；（3）選取與當前點距離最小的k個點；（4）確定前k個點所在類別出現的頻率（5）返回前k個點出現頻率最高的類

仿qq記步效果及invalidate原始碼分析

public class MyStepView extends View{ //中間文字大小 private int MyStepTextSize=30; //圓環邊框大小 private int MyStepWidth=20; //中間文字顏色

C#完整的截圖原始碼及註釋

/*這是一個完整的截圖程式，除錯通過，你可以根據昨天的，視窗殺手程式，也給這個截圖加上熱鍵，和視窗放到系統托盤上，這樣，截圖就不會將程式本身也給顯示在截出來的圖片上了。過兩天，我會寫上這兩個功能的。不過，最好，你能自己也試試。可以在這兒下載http://metababy.chi

JAVASE基礎_01.初步：原始檔名及註釋

1.Java原始檔以“java”為副檔名。原始檔的基本組成部分是類。 2.一個原始檔中最多隻能包含一個public類，別的類個數不限，原始檔名稱必須和public類名一致。 3.Java的應用入口是main（）方法，他有固定的格式書寫：public static void

C 完整的截圖原始碼及註釋

/*這是一個完整的截圖程式，除錯通過，你可以根據昨天的，視窗殺手程式，也給這個截圖加上熱鍵，和視窗放到系統托盤上，這樣，截圖就不會將程式本身也給顯示在截出來的圖片上了。過兩天，我會寫上這兩個功能的。不過，最好，你能自己也試試。可以在這兒下載http://metababy.chinay.com/sp/me

unity 圓形滑動條slider 弧形滑動條效果及程式碼分析

因為大多數滑動條slider都是水平或者垂直那種直的，在一些專案上缺少美感所以這裡做一種比較好看的圓形滑動條（或者說是circle slider 弧形滑動條）可以在一個弧面上滑動，看起來更加有科技感在此提供下思路，拋磚引玉圓形樣式，最簡單的一種，因為可以調節成

穿墻效果及註釋

相關推薦