以圖明志

JQuery

博客新加入“掃碼閱讀”功能

給文章生成二維碼
今天看到一個用戶發了個話題,“PC端的URL在移動端上打開要一個個敲好麻煩,有什么好的辦法?”。確實現在已經是移動時代了,在移動設備上閱讀慢慢會成為主流,網站如果沒有便捷的方式讓用戶在移動設備閱讀的話還真有點落伍,于是想想就做個“掃碼閱讀”的功能吧。其實很簡單,就是將網址生成二維碼就行了。無論用PHP生成,還是用JavaScript生成都是可以的,從代碼改動來說,用JavaScript會更省事些。

CSS

使用CSS3線性漸變實現圖片閃光劃過效果

線性漸變linear-gradient
在百度音樂 http://music.baidu.com/ 看到這么一個圖片效果,當鼠標移上去的時候,會有一道閃光在圖片上劃過,效果挺酷炫的。大體思想是,設計一個透明層i,skewx在X軸上做了負25度的變形,背景顏色用的是CSS3的線性漸變linear-gradient,然后hover的時候,設置0.5s的動畫時間。

CSS

可以嘗試用Google Font API來擺脫網頁字體的單調

僅僅拋磚引玉
在網頁設計里,字體的顯示是個問題。最普遍用的是宋體,但是宋體在 Win 7 下的表現真的很難看。雅黑端莊一些,但是隨著字體大小,感覺漢字的大小也會有區別。小站現在用的字體是是宋體 + Arial/Georgia,因為習慣了也沒多在意,其實對于英文字體有其它更好的選擇。

CSS

常見的瀏覽器Hack技巧總結

總結是為了更好地記憶
如果你經常需要做前端頁面,那么你一定多多少少需要解決頁面的瀏覽器兼容問題。而瀏覽器兼容問題大部分也集中在對IE系列的兼容。這里就總結一下對IE系列的CSS Hack,記錄一下,方便以后查閱。瀏覽器對css的解析是從前到后的,并且采用最后一個樣式聲明。

CSS

活潑的CSS 3動態氣泡按鈕制作

完全CSS 3實現
這一次,我們正在創造一個有用的設置與對CSS3的多重背景和動畫的力量動畫按鈕。通過此按鈕包,您可以很容易地變成一個動畫按鈕,在您的網頁上的任何鏈接只是指定一個類名。沒有必要JavaScript。四色主題和三個大小也可通過分配額外的類名。

CSS

如何組織與管理CSS文件

方便管理、修改和多人合作
CSS的管理一直是個讓人有點頭疼的問題,沒有絕對的對錯,無非就是為了方便管理、修改和多人合作罷了;網上流行的CSS管理方式講來講去無非也就以下幾種:對于單個頁面那種非常簡單的,其實也可以直接把所有的樣式寫在一個外部文件里就行,或者直接寫在頁面的頭部里,沒有必要去糾結繁瑣的CSS文件管理。

CSS

最優的浮動清除方案之一推薦

W3標準不變,清除浮動不止
對于日新月異的WEB開發技術和瀏覽器更新頻率來說,清除浮動已然是一個被人嚼碎了的話題。說是這些年過去了,有關float的地方,還依然少不了清除浮動的標簽和css代碼。W3C整天研究html5,就不能抽出點時間來把這種煩人的小細節修正一下嗎?抱怨歸抱怨,飯還得吃,錢還得掙,清除浮動就不能停止。

CSS

收藏一個很有愛的CSS背景設計

閑逛收獲
有一次在網上閑逛,看到一個很有愛的CSS,地址:F::Archieve。這里扒下來,保存一下~效果可以看本頁的演示,在右下角。圖片如下,覺得好可以右鍵卷走。

CSS

IE 6最小最大寬度與高度的寫法

CSS表達式的使用
最小最大寬度,最小最大高度,這是CSS很常見的一個要求。在現代瀏覽器中,一個 min-height,min-width 就可以解決問題,但是在IE系列,比如IE6則比較繁瑣一點。下面總結一些IE 6下的最小最大寬度與高度的一些寫法。

CSS

CSS讓圖片垂直居中的幾種技巧

三種方法介紹
在網頁設計過程中,有時候會希望圖片垂直居中的情況。而且,需要垂直居中的圖片的高度也不確定,這就會給頁面的布局帶來一定的挑戰。下面總結了一下,曾經使用過的幾種方法來使圖片垂直居中,除了第一種方法只限于標準瀏覽器外,另外兩種方法的兼容性還不錯。

JavaScript

script標簽屬性用type還是language?

瀏覽器對它們識別程度不同
查閱一些資料,主要是瀏覽器支持問題。type 和 language 屬性都可用來指定 script 標簽中的腳本的類型。language 屬性在 HTML 和 XHTML 標準中受到了非議,這兩個標準提倡使用 type 屬性。遺憾的是,這兩個屬性的值是不一樣的。您可能偶爾會看見 language 的值為 VBScript(對 type 而言是 text/vbscript),表示包含的腳本代碼是用 Microsoft 的 Visual Basic Script 編寫的。

HTML

用HTML5 Canvas做一個畫圖板

一個簡單的Canvas應用
功能很簡單,原理其實和拖放是類似的,主要是三個事件:在canvas 上綁定mousedown 事件以標志繪畫的開始(調用moveTo 移動畫筆) 在document 上綁定mousemove 事件來處理繪畫時的行為(調用lineTo 以及stroke 進行繪畫) 在document 上綁定mouseup 事件以標志繪畫的結束(解綁document 上的兩個事件)

JQuery

JQuery選擇器$()的工作原理淺析

選擇器寫成$('#id')的時候最快
每次申明一個jQuery對象的時候,返回的是jQuery.prototype.init對象,很多人就會不明白,init明明是jQuery.fn的方法啊,實際上這里不是方法,而是init的構造函數,因為js的prototype對象可以實現繼承,加上js的對象只是引用不會是拷貝,new jQuery,new jQuery.fn和new jQuery.fn.init的子對象是一樣的,只是有沒有執行到init的不同。

JavaScript

如何寫一個網頁標題title的閃動提示

一個網頁消息提示功能的實現
通過網頁title來提示用戶有新消息這個功能很常見,比如現在的微博,還有一些郵箱,這個功能都很常見。如何實現則個功能呢?思路是:通過ajax訪問后臺,若有新消息,則將網頁的title替換為 提示信息 ,并與空格來回切換。例:【你有新消息】與【     】切換。提示內容弄是動態的,所以替換文字的空格數目也是算出的。這里用全角的空格。

HTML

用HTML5 canvas寫一個時鐘

圖片指針用ctx的drawImage可以實現
HTML5足夠強大實現很多功能,畫一個時鐘只是一個小玩意。圖片指針用ctx的drawImage可以實現。至于兼容性問題,網上的解決方案已經很多了。這個東東是用來玩的,不是用來做應用的,學習下canvas API。

JavaScript

JavaScript獲取網頁關閉與取消關閉的事件

使用setTimeout延時10ms執行onunloadcancel
在做Web開發時,我們經常用到頁面關閉事件onbeforeunload,可以給用戶一個選擇放棄關閉的機會,就比如這個博客編輯器。如果用戶選擇了離開,那么onunload事件自然會觸發;但若用戶選擇了取消,又該如何檢測呢?我們假定一個頁面離開取消事件,叫做onunloadcancel。顯然,這個事件應觸發在用戶按下對話框的取消按鈕之后。
1 / 25 首頁 < Prev 1 2 3 4 5 Next > 尾頁 頁碼:
英超直播吻球网