DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
JavaScript入門知識
>>
關於JavaScript
>> js模擬3D場景效果代碼打包
js模擬3D場景效果代碼打包
編輯：關於JavaScript
要在二維空間模擬出三維的效果，就需要把三維的坐標轉換成二維坐標。一個最基本依據是：東西越遠，看到大小就越小，坐標越往消失點靠攏。
透視公式：
scale = fl / (fl + z);
scale是大小的比例值，0.0到1.0之間，fl是觀察點到成像面的距離，通常這個值是固定，z就是物件的三維空間中的z軸。
在寫這些代碼之前，我喜歡用面向對象來描述我寫的這些東西，比如我需要一個場景，場景是個空間，空間內是可以容納各種物件的，物件是個對象，物件是是x,y,z三個維度的，場景可以插入任意多的物件，物件就會以它的坐標值，顯示在場景的特定位置，由場景來負責物件的顯示位置。
一些demo，請使用鼠標移動及滾輪來控制。
效果1
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>偽3d透視效果</title> <style> html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head> <body> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
效果2
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>偽3d透視效果</title> <style> html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head> <body> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
效果3
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>偽3d透視效果</title> <style> html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#fff; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head> <body> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
效果4
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>偽3d透視效果</title> <style> html,body{ padding:0px; margin:0px; height:100%; width:100%;overflow:hidden;} #box{ background:#ccc; height:100%; border:1px solid #ccc;position:relative; overflow:hidden;} #debug{ width:200px; background:#fff; border:1px solid #ccc; position:absolute; left:10px; top:0px;} </style> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head> <body> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
上一頁:
javascript是怎麼繼承的介紹
下一頁:
js 鏈式延遲執行DOME
關於JavaScript
Bootstrap學習筆記之js組件（4）
這次我們來看下js組件的使用，本篇文章會有點長，希望大家可以耐心看，相信收獲會有不少。不少園友加我好
AngularJS入門知識之MVW類框架的編程思想探討
本文通過實現兩個簡單的業務需求，探討AngularJS和傳統的JavaScript控制DOM實現方式
JS實現文件動態順序載入的方法教程
本文實例講述了JS實現文件動態順序載入的方法。分享給大家供大家參考。具體分析如下：用script標簽
相關文章
js根據地理坐標確定地圖中心位置
使用js和jquery獲取url及url參數的方法
使用js實現極速選擇輸入城市名
Javascript模擬拆紅包效果
JS鼠標懸浮圖片左右箭頭點擊訪問上下頁
js動態改變字體大小實例
js獲取和設置元素屬性值
js字符串轉數組
使用jquery.easysector.js繪制百分比餅圖
JS中script標簽defer和async屬性的區別詳解
JavaScript基礎知識
JSON基礎
正則表達式
關於JavaScript
JavaScript技巧
jQuery入門知識
AJAX入門
JavaScript綜合知識
小編推薦
JS,Jquery獲取select,dropdownlist,checkbox下拉列表框的值(示例代碼)
一個css與js結合的下拉菜單支持主流浏覽器
用js實現計算加載頁面所用的時間
微信開發 js實現tabs選項卡效果
JavaScript教程:優化次數過多的循環
JavaScript字符串對象replace方法實例教程（用於字符串替換或正則替換）
JavaScript中的this實例分析
JavaScript中的排序算法代碼
ECMAScript6輪播圖實踐知識總結
基於javascript實現頁面加載loading效果
熱門推薦
Bootstrap CSS組件之導航(nav)
javascript 三種方法實現獲得和設置以及移除元素屬性
Javascript實例教程:querySelectorAll()方法
在Javascript中使用正則表達式
JS獲取iframe中marginHeight和marginWidth屬性的方法
javascript中的五種基本數據類型
javascript浏覽器窗口之間傳遞數據的方法教程
HTML顏色選擇器實現代碼
詳細分析Javascript中創建對象的四種方式
大家都在看
仿京東樹形菜單插件hovertree
Js與下拉列表處理問題解決
JavaScript高級程序設計 讀書筆記之九 本地對象Array
網頁切圖的CSS和布局經驗與要點
white-space:nowrap的應用
網頁布局 CSS簡單實現垂直居中
正確使用HTML title屬性的一些建議
CSS網頁布局中表格制作實例
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved