原创 視差效果的實際應用
在實際開發中，應用一些微交互、視差效果，可以讓頁面更加生動。如下面的例子： 這個例子中運行了3D transform 的相關知識。具體細節如下分析。 1、切圖 將psd稿上的這個區域切成如下圖的3塊圖片，方便在頁面上進行疊加、 2、佈
2018-11-20 03:48:51
原创 Javascript組件化開發設計思想
一、引言 項目中經常用web彈層組件-layer，其常見的代碼如下： 使用的時候很方便，彈窗的寬高、內容、標題、關閉按鈕等彈窗的狀態我們都可以通過配置參數配置。layer彈層組件用同一套代碼來滿足不同的彈窗層表現的需求，這便是組件開
2018-09-21 02:11:33
3
原创 CSS3的transform以及3D相關屬性總結
CSS3的3D相關屬性總結概述項目中遇到微交互、增加頁面用戶體驗的需求，運用CSS3的transform變化的3D屬性就可以達到效果。transform概述W3C 的解釋：CSS Transforms is a module of CSS
2018-08-22 07:35:29
5
原创 一段js實現複製文本內容到剪切板
直接上代碼： <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1").inne
2018-08-22 07:35:29
原创 jquery實時監控input值的變化、兼容ie9
jquery實時監控input值的變化、兼容ie9 $psdInput.bind("propertychange change click keyup input paste", function() { console.log(
2018-08-22 07:35:28
原创 JS之用面向對象和傳統過程式編程
JS之用面向對象和傳統過程式編程一、過程式編程如下圖所示，爲了實現一個div元素的拖拽功能寫的代碼，這是過程式編程的寫法，當JS代碼較少時，沒必要使用面向對象。殺雞無需用牛刀。 二、面向對象改寫成面向對象時，可先將普通函數變型，再改
2018-08-22 07:35:28
3
原创 CSS3動畫相關屬性的總結
css3動畫相關屬性的總結概述在最近的項目中，好多都要用到微交互，而這些微交互與css3的動畫屬性密不可分，例如下面的的微交互： CSS3動畫相關屬性有：transition,transform,animation
2018-08-22 07:35:28
原创 layer彈出iframe的高度不自適應。一直是150px
layer彈出iframe的高度不自適應。一直是150px通常我們用layer都是點擊事件中彈出layer，如下：$("#loginbtn").click(function(){ layer.open({ type: 2,
2018-08-22 07:35:27
3
原创 JS面向對象之原型
JS面向對象之原型一、從對象引用的問題說起 如上code中，創建了p1、p2對象，比較p1中的showName函數和p2中的showName函數，結果爲false;雖然兩個對象中的函數的形式、實現的功能都是一樣的，但由於p1、p2是
2018-08-22 07:35:27
2
原创 JS面向對象之從工廠方式到構造函數
JS面向對象之從工廠方式到構造函數一個簡單的例子：創建兩個對象，每個對象都有各自的屬性和方法：上面用面向對象的寫法，表示兩個對象--小明、小強，可以發現代碼重複度很高，就一個名字不一樣，別的代碼都是一樣的。工廠方式工廠方式其實就是函數封裝
2018-08-22 07:35:26
原创 數據庫視圖的總結
視圖的概念VIEW （ 視 圖 ） 是 一 個 或 多 個 表 的 部 分 數 據 ， 它 可 以 像 表 一 樣 進 行 CRUD 操 作 ， 但 沒 有 具 體 的 存 儲 數 據 結 構 ， 它 以 一 個 SELECTiä 句 的
2018-08-22 07:35:25
3
原创 Gulp前端自動化構建工具的應用
Gulp前端自動化構建工具的應用1. 引言：實際前端開發不再僅僅是靜態頁面的開發了，豐富的前端技術讓前端的代碼邏輯越來越複雜，模塊化開發和各類框架也增加了在生產環境中部署開發環境代碼的難度，這種情況下，前端自動化構建在前端開發中尤爲重要。
2018-08-22 07:35:25
1
原创 通過閃爍標題來實現web消息通知的小demo
一段js代碼模擬實現web消息推送的功能，通過閃爍文檔的標題來實現，代碼如下： var titleInit = document.title, isShine = true; setInterval(function() {
2018-08-22 07:35:25
4
原创 利用transition屬性實現一個簡單小巧的hover效果
在實際工作中，簡單利用css3的屬性可以讓頁面更生動，如下面的例子: “瞭解詳情”的hover效果比單純的顏色變換效果更生動。而實現的方式就是簡單的利用了css3transition屬性。 頁面代碼結構如下： <div class="b
2018-08-22 07:35:25
原创 js之call() apply() bind() $proxy()的總結
關於this的使用 先貼一段代碼 window.name = 'window'; var obj = { name:'I' } function foo(name,sex){ setTimeout(function(){
2018-08-22 07:35:24
2