原创 h5 canvas(toDataURL)實現將圖片與文字結合

toDataURL實現將圖片與文字結合 基於自己想吹牛皮,所以就臨時寫了個H5頁面。 一、用到的功能點: 1.canvas.toDataURL(type, encoderOptions); 舉例說明: <canvas

原创 由平面設計屍----->>轉型到----->>WEB開發程序猿

首先讓大家看下我在站酷這兩年的賬號。 來到北京後,學習JAVA開發工程師,經過4個月短暫的培訓後,正式開始了北漂生活。 其實現在有些設計師幹一兩年後都有想轉行的想法,那我這個過來人就淺分享下轉行體會吧: 1. 轉行之前首先考慮下自身的

原创 各瀏覽器對document.body.onscroll,window.onscroll,document.documentElement.onscroll的兼容性

引入背景: 近期有個需要,瀏覽器滾到當前位置時顯示動畫效果,而頁面又不是全屏滾動的,我用的是window.onscroll事件監控瀏覽器的滾動情況。 每當滑到當前位置時,這些光鮮豔麗的小圖標開始隨機跳動,並且不重複,播放完當前圖片後1s後

原创 常用的正則表達式(RegExp)

基本且常用的元字符:  .    匹配除換行符以外的任意字符 \w  匹配字母或數字或下劃線或漢字 \s   匹配任意的空白符 \d   匹配數字 \b   匹配單詞的開始或結束 ^   匹配字符串的開始 $   匹配字符串的結束 限

原创 gulp安裝那些事

在Gulp中,使用的是Nodejs中的stream(流),首先獲取到需要的stream,然後可以通過stream的pipe()方法把流導入到你想要的地方,比如Gulp的插件中,經過插件處理後的流又可以繼續導入到其他插件中,當然也可以把流寫

原创 關於web中的字體, .woff, .eot, .svg

一般情況下引用字體@font-face時,會把woff,eot,svg都引用進去,瀏覽器根據需要下載不同類型的字體。 IE--.eot;    其它瀏覽器--.woff;    手機瀏覽器一般是--.ttf;truetype:是windo

原创 使用Git提交項目到gitHub上

其實安裝過程沒有想象中的那麼難,靜下心來20分鐘搞定了。 一、記錄賬號及密碼 首先記錄下你的gitHub用戶名,密碼,倉庫地址等信息。 比如我的: 用戶名:June215 密碼:**** 單個項目的repository地址: http

原创 實現更高級的動畫效果—requestAnimationFrame

我們一般用 H5 的transition和animations可能實現動畫效果,但是高質量的動畫效果及其流暢度都要求極致怎麼辦呢? 接下來引入正題: 瀏覽器提供了一個統一幀管理、提供監聽幀的API,​既requestAnimatio

原创 CSS3實現毛玻璃(圖片模糊)效果

**首先看效果** **引入下題** HTML: <img id="blur" src="img/back.jpg"> CSS3: #blur{ filter:blur(10px); -webkit-filter:blur

原创 自適應網頁設計 or 響應式Web設計

參考:http://sc.chinaz.com/info/141121507292.htm 一、允許網頁寬度自動調整 首先引入viewport元標籤 <meta name="viewport" content="width=

原创 html中video視頻播放

1. ——video—— video元素 局部屬性 autoplay,preload,controls,loop,poster,width,height,muted,src 1.1 preload預先加載視頻 p

原创 前端SEO優化

首先了解什麼是SEO? SEO(Search Engine Optimization)搜索引擎優化; SEO是指在瞭解搜索引擎自然排名機制的基礎上,對網站進行內部及外部的調整優化,改進網站在搜索引擎中的關鍵詞自然排名,獲得更多流量,從而達

原创 封裝的一些 js, css使用小方法

參數拼接:hash或search的方法使用: var str = type; str = str.replace(/^\?/, '').split('#'); for (var i = str.length - 1; i >=

原创 跨域請求京東接口

我們服務器上項目鏈接: http://sk2shop.moxz.cn/ http://sk2shop.moxz.cn/index1.html 京東服務器鏈接: http://wqs.jd.com/promote/third/sk2sho

原创 @media響應式媒介尺寸

一、定義斷點 手機的屏幕比較小,寬度通常在600像素以下;PC的屏幕寬度,一般都在1000像素以上(目前主流寬度是1366×768)設置相應的min-width和max-width值 所以響應式設計一般對600px下,1000px上針對