原创 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})