原创 CSS3 :nth-child()僞類選擇器

CSS3 :nth-child()僞類選擇器 CSS3的強大,讓人驚歎,人們在驚喜之餘,又不得不爲其艱難的道路感到可惜:好的標準只有得到行業瀏覽器的良好支持纔算得上“標準”。CSS3標 準已提出數年,但是目前能實現她的瀏覽器並不

原创 bower來管理前端的通用依賴庫

逛大神博客的時候看到bower,以前是不知道還有這麼個利器的,所以還是要多讀書多看報少吃零食多睡覺!剛剛安裝成功,實驗了一下,果然好用,所以趕緊記錄下來! bower到底是什麼呢? bower是twitter的又一個開源項目,使用nod

原创 CSS3眨眼效果(animation動畫循環間的“暫停”、“延時”執行)

今天上午一直在糾結這個眨眼效果,我是用CSS3的animation來切換圖片形成眨眼的效果,圖片如下: 效果實現了但是眨眼很不自然,眨眼間是沒有暫停的無限循環,開始的css代碼是這樣的: @keyframes eye{ 0%

原创 回到頂部

go to top $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $(

原创 牛津大學證明導致貧窮根源的九大死穴

一、總找藉口(22%) 二:恐懼(19%) 三、拒絕學習(11%) 四、猶豫不決(13%) 五、拖延(9%) 六、三分鐘熱度(8%) 七、害怕拒絕(7%) 八、自我設限(6%) 九、逃避現實(5%)

原创 搜索框點擊回車鍵觸發搜索按鈕點擊事件

需求:在項目中常會遇到搜索框,一般情況下搜索內容輸入完畢後點擊搜索按鈕來進行相關搜索,但是用戶已經形成了習慣性,當輸入完成後點擊回車鍵來代替點擊搜索按鈕! 實現原理:輸入框點擊回車按鈕時觸發搜索按鈕點擊事件 代碼: $("input").

原创 display:inline-block的icon不垂直居中問題

需要了解知識點: 1、基線:基線並不是漢字的下端沿,而是英文字母x的下端沿; 2、行高指的是文本行的基線間的距離; 圖片來源鏈接地址! 進入正題: 父元素設置line-height後,看似文本垂直居中對齊,而inline-block

原创 檢測某個元素是否存在

在後端渲染數據的時候,常常會出現這樣的狀況,頁面某些模塊沒有數據,考慮頁面的美觀和用戶的體驗,可能沒有數據的模塊會選擇不進行顯示,這樣的結果會導致跟這個模塊相關的js報錯,因爲找不到相應的DOM元素,我選擇的解決方法是判斷元素是否存在?如

原创 jq按json數據某一字段進行排序

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>導航條吸附效果,並隨着頁面滾動選中相應導航內容</title> <link rel="s

原创 不固定高度水平垂直居中

頁面不固定高度垂直居中,很多時候會想到用display:table;content高度可自適應,缺點多一層div標籤,(ie7以下包括ie7出錯)demo如下: <!DOCTYPE html> <html> <head> <me

原创 referrer返回當前文檔的來源URL

項目中經常會遇到的一個問題,就是產品需求,在登錄完成後跳轉回用戶之前所在的頁面,這裏我用的方法是referrer; 下面列出幾種用戶進入登錄頁面的情況: 1、用戶收藏了登錄頁面,直接打開進入登錄頁面; 這種情況用戶登錄後直接進入網站首頁

原创 css收集整理

整理一些自己平時用的比較多的或者巧技方便以後使用,不斷整理更新,筆記都是做給自己看的,略潦草…… /**  * Created by yangyurong on 2016.12.06  * description:整理項目中常用的樣式

原创 onmouseenter 和 onmouseover 的不同

該實例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。 onmousemove 事件在鼠標移動到 div 元素上時觸發。 mouseenter 事件在鼠標指針進入 div 元素時觸發,唯一的

原创 siblings篩選同胞元素

條件篩選的時候,被選中的元素都會添加一個active樣式! 當有多個篩選分類時,點擊當前篩選分類時,其他篩選分類的active樣式不改變,而被點擊的當前分類先移除子元素的active樣式,再給被點擊元素添加active樣式 <!DOC

原创 圖片自適應頁面等比縮放

圖片的寬度  =    100%; 圖片自適應的高度   =    圖片的自適應寬度  /   圖片真實寬度    *   圖片真實高度 $('img').css({height:$('img').width()/640*400})