給網站添加百度地圖代碼，并可自定義定位坐標

有一次給客戶網站的聯系我們頁面添加一張標注有公司地址的百度地圖，結果客戶反饋說，為什么我的地圖不能用鼠標拖動的??？沒想到現在客戶要求這么高了，想偷懶一點也不行。經過幾番折騰，發現添加百度地圖API代碼[……]

閱讀全文 ?

表單密碼強度可視化設計

在填寫表單密碼時，有的會會顯示「弱、中、強」的文案來表示你填寫的密碼強度，這是一種不錯的用戶體驗方式，然而今天我們分享一個更有趣的體驗，就是用「可視化」來表達。

這個「可視化」方[……]

閱讀全文 ?

Tippy.js 玩轉鼠標懸停提示信息

網頁設計師對 tooltips 鼠標經過提示效果應該不陌生，這種效果雖然可以直接用 css hover 來實現，但是如果想更友好的、更美觀的效果，可能就要借助 JS 來實現啦。今天和大家分享的?Tip[……]

閱讀全文 ?

CSS 或 srcset 讓瀏覽器自動切換 1X/2X/3X 圖像

現在很多客戶都買高分屏的電腦，如果直接發 JPG 圖給客戶，會影響設計質量。為了讓網站設計效果圖更加真實，最近把設計提案直接做成 Web 版，模擬瀏覽器真實視覺效果，同時能自動識別是否為視網膜顯示屏，[……]

閱讀全文 ?

小創意：圣誕球切換開關

還有幾天就到圣誕節，幾乎到哪里都能看到圣誕氣氛的設計，網站也是如此，為了讓網站頁面更有氣氛，我們不能放過任何小創意，即使是一個小小的切換開關元素。

大家請看下圖，這是來自 Chris Ganno[……]

閱讀全文 ?

給網站增加交互音效 – Loud links輕量插件

想必大家玩過 APP 游戲，里面的按鈕每點擊一下都會有一個響聲來回應你的點擊狀態，這是很不錯的交互效果，若想在網頁也能實現這樣的交互聲音，請看今天達人分享的 Lound links JS 插件，它可以[……]

閱讀全文 ?

Macy.js 網頁流布局JS插件，僅4KB大小

花瓣網我想大家都知道了吧，它就是使用流布局來展示圖片，這種排版方式特別適合展現大量圖像的頁面，如果你也想加入這種排版，可以試試今天分享給大家的 Macy.js 插件。

這款流布局JS插件僅有4K[……]

閱讀全文 ?

16個不錯的網頁文字動畫及源碼

我們通常在網頁中實現看到的文字動畫大部分是一些漸變過渡，生動一點的卻很少見到，原因估計是編寫文字動畫的代碼復雜，又或者不太必要。但這個注重交互動效的時代，沒有一點創意性的動畫，怎能吸引用戶視線呢？[……]

閱讀全文 ?