5微傳單頁面制作的4個加分項!
本文是關注微信小程序的開發和面試問題,
由基礎到困難循序漸進,
適合面試和開發小程序。
并有熱點框架(vue react node.js 全棧)前端資源以及后端視頻資源和源碼
并基于前端進階和面試的需求 總結了常用插件和js算法
以及html/css 和js熱點面試題
并總結了熱點React/ES6/Vue面試題
生命周期函數面試題
1.什么是 vue 生命周期
2.vue生命周期的作用是什么
3.第一次頁面加載會觸發哪幾個鉤子
4.簡述每個周期具體適合哪些場景
5.created和mounted的區別
6.vue獲取數據在哪個周期函數
7.請詳細說下你對vue生命周期的理解?
vue路由面試題
1.mvvm 框架是什么?
2.vue-router 是什么?它有哪些組件
3.active-class 是哪個組件的屬性?
4.怎么定義 vue-router 的動態路由? 怎么獲取傳過來的值
5.vue-router 有哪幾種導航鉤子?
6.$route 和 $router 的區別
7.vue-router響應路由參數的變化
8.vue-router傳參
9.vue-router的兩種模式
10.vue-router實現路由懶加載( 動態加載路由 )
vue常見面試題
1.vue優點
2.vue父組件向子組件傳遞數據?
3.子組件像父組件傳遞事件
4.v-show和v-if指令的共同點和不同點
5.如何讓CSS只在當前組件中起作用
6.<keep-alive></keep-alive>的作用是什么?
7.如何獲取dom
8.說出幾種vue當中的指令和它的用法?
9. vue-loader是什么?使用它的用途有哪些?
10.為什么使用key
11.axios及安裝
12.axios解決跨域
13.v-modal的使用
14.scss的安裝以及使用
15. 請說出vue.cli項目中src目錄每個文件夾和文件的用法?
16.分別簡述computed和watch的使用場景
17.v-on可以監聽多個方法嗎
18.$nextTick的使用
19.vue組件中data為什么必須是一個函數
20.vue事件對象的使用
21 組件間的通信
22.漸進式框架的理解
23.Vue中雙向數據綁定是如何實現的
24.單頁面應用和多頁面應用區別及優缺點
25.vue中過濾器有什么作用及詳解
26.v-if和v-for的優先級
27.assets和static的區別
28.列舉常用的指令
29.vue常用的修飾符
30.數組更新檢測
31.Vue.set視圖更新
32.自定義指令詳解
33.vue的兩個核心點
34.vue和jQuery的區別
35 引進組件的步驟
36.Vue-cli打包命令是什么?打包后悔導致路徑問題,應該在哪里修改
37.三大框架的對比
38. 跨組件雙向數據綁定
39.delete和Vue.delete刪除數組的區別
40.SPA首屏加載慢如何解決
41.Vue-router跳轉和location.href有什么區別
42. vue slot
43.你們vue項目是打包了一個js文件,一個css文件,還是有多個文件?
44.vue遇到的坑,如何解決的?
45.Vue里面router-link在電腦上有用,在安卓上沒反應怎么解決?
46.Vue2中注冊在router-link上事件無效解決方法
47.RouterLink在IE和Firefox中不起作用(路由不跳轉)的問題
48.axios的特點有哪些
49.請說下封裝 vue 組件的過程?
50.vue 各種組件通信方法(父子 子父 兄弟 爺孫 毫無關系的組件)
51.params和query的區別
52. vue mock數據
53 vue封裝通用組件
54.vue初始化頁面閃動問題
55.vue禁止彈窗后的屏幕滾動
56.vue更新數組時觸發視圖更新的方法
57.vue常用的UI組件庫
58. vue如何引進本地背景圖片
59. vue如何引進sass
60.vue修改打包后靜態資源路徑的修改
vuex常見面試題
1.vuex是什么?怎么使用?哪種功能場景使用它?
2.vuex有哪幾種屬性
3.不使用Vuex會帶來什么問題
4.Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中?
5.vuex一個例子方法
6.Vuex中如何異步修改狀態
7.Vuex中actions和mutations的區別
vue項目實戰
1.頂部懸停效果
2.電話本列表效果( 右邊字母分類 上下滑動 旁邊字母顯示高亮)
3.vue做代理
4.Vue路由切換時的左滑和右滑效果示例
ES6新增方法面試題
1.let const var比較
2.反引號(`)標識
3.函數默認參數
4.箭頭函數
5.屬性簡寫
6.方法簡寫
7.Object.keys()方法,獲取對象的所有屬性名或方法名
8.Object.assign ()原對象的屬性和方法都合并到了目標對象
9.for...of 循環
10.import和export
11.Promise對象
12.解構賦值
13.set數據結構(可用于快速去重)
14.Spread Operator 展開運算符(...)
15.字符串新增方法
ES6數組面試題
1.forEach()
2.map()
3.filter()
4.reduce()
5.some()
6.every()
7.all()方法
ES6編程題
1.使用解構,實現兩個變量的值的交換
2.利用數組推導,計算出數組 [1,2,3,4] 每一個元素的平方并組成新的數組。
3.使用ES6改下面的模板
4.把以下代碼使用兩種方法,來依次輸出0到9?
react生命周期面試題
1.react 生命周期函數
2.react生命周期中,最適合與服務端進行數據交互的是哪個函數
3.運行階段生命周期調用順序
4.shouldComponentUpdate 是做什么的,(react 性能優化是哪個周期函數?)
5.指出(組件)生命周期方法的不同
react 基礎面試題
1.React 中 keys 的作用是什么?
2.React 中 refs 的作用是什么?
3.React 中有三種構建組件的方式
4.調用 setState 之后發生了什么?
5.react diff 原理(常考,大廠必考)
6.為什么建議傳遞給 setState 的參數是一個 callback 而不是一個對象
7.除了在構造函數中綁定 this,還有其它方式嗎
8.setState第二個參數的作用
9.(在構造函數中)調用 super(props) 的目的是什么
10.簡述 flux 思想
11.在 React 當中 Element 和 Component 有何區別?
12.描述事件在 React 中的處理方式。
13.createElement 和 cloneElement 有什么區別?
14.如何告訴 React 它應該編譯生產環境版本?
15.Controlled Component 與 Uncontrolled Component 之間的區別是什么?
react組件面試題
1.展示組件(Presentational component)和容器組件(Container component)之間有何不同
2.類組件(Class component)和函數式組件(Functional component)之間有何不同
3.(組件的)狀態(state)和屬性(props)之間有何不同
4.何為受控組件(controlled component)
5.何為高階組件(higher order component)
6.應該在 React 組件的何處發起 Ajax 請求
7.react中組件傳值
8.什么時候在功能組件( Class Component )上使用類組件( Functional Component )?
9.受控組件( controlled component )與不受控制的組件( uncontrolled component )有什么區別?
10.react 組件的劃分業務組件技術組件?
redux面試題
1.redux中間件
2.redux有什么缺點
3.了解 redux 么,說一下 redux 把
react性能比較面試題
1.vue和react的區別
2.react性能優化的方案
3.React 項目用過什么腳手架
4.介紹一下webpack webpack
5.如果你創建了類似于下面的 Twitter 元素,那么它相關的類定義是啥樣子的?
6.為什么我們需要使用 React 提供的 Children API 而不是 JavaScript 的 map?
1.簡述同步和異步的區別
2.怎么添加、移除、復制、創建、和查找節點
3.實現一個函數clone 可以對Javascript中的五種主要數據類型(Number、string、Object、Array、Boolean)進行復制
4.如何消除一個數組里面重復的元素
5.寫一個返回閉包的函數
6.使用遞歸完成1到100的累加
7.Javascript有哪幾種數據類型
8.如何判斷數據類型
9.console.log(1+'2')和console.log(1-'2')的打印結果
10.Js的事件委托是什么,原理是什么
11.如何改變函數內部的this指針的指向
12.列舉幾種解決跨域問題的方式,且說明原理
13.談談垃圾回收機制的方式及內存管理
14.寫一個function ,清除字符串前后的空格
15.js實現繼承的方法有哪些
16.判斷一個變量是否是數組,有哪些辦法
17.let ,const ,var 有什么區別
18.箭頭函數與普通函數有什么區別
19.隨機取1-10之間的整數
20.new操作符具體干了什么
21.Ajax原理
22.模塊化開發怎么做
23.異步加載Js的方式有哪些
24.xml和 json的區別
25.webpack如何實現打包的
26.常見web安全及防護原理
27.用過哪些設計模式
28.為什么要同源限制
29.offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別
30.javascript有哪些方法定義對象
31.說說你對promise的了解
32.談談你對AMD、CMD的理解
33.web開發中會話跟蹤的方法有哪些
34.介紹js有哪些內置對象?
35.說幾條寫JavaScript的基本規范?
36.javascript創建對象的幾種方式?
37.eval是做什么的?
38.null,undefined 的區別?
39.[“1”, “2”, “3”].map(parseInt) 答案是多少?
40.javascript 代碼中的”use strict”;是什么意思 ? 使用它區別是什么?
41.js延遲加載的方式有哪些?
42.defer和async
43.說說嚴格模式的限制
44.attribute和property的區別是什么?
45.ECMAScript6 怎么寫class么,為什么會出現class這種東西?
46.常見兼容性問題
47.函數防抖節流的原理
48.原始類型有哪幾種?null是對象嗎?
49.為什么console.log(0.2+0.1==0.3) //false
50.說一下JS中類型轉換的規則?
51.深拷貝和淺拷貝的區別?如何實現
52.如何判斷this?箭頭函數的this是什么
53.==和===的區別
54.什么是閉包
55.JavaScript原型,原型鏈 ? 有什么特點?
56.typeof()和instanceof()的用法區別
57.什么是變量提升
58.all、apply以及bind函數內部實現是怎么樣的
59.為什么會出現setTimeout倒計時誤差?如何減少
60.談談你對JS執行上下文棧和作用域鏈的理解
61.new的原理是什么?通過new的方式創建對象和通過字面量創建有什么區別?
62.prototype 和 proto 區別是什么?
63.使用ES5實現一個繼承?
64.取數組的最大值(ES5、ES6)
65.ES6新的特性有哪些?
66.promise 有幾種狀態, Promise 有什么優缺點 ?
67.Promise構造函數是同步還是異步執行,then呢 ?promise如何實現then處理 ?
68.Promise和setTimeout的區別 ?
69.如何實現 Promise.all ?
70.如何實現 Promise.finally ?
71.如何判斷img加載完成
72.如何阻止冒泡?
73.如何阻止默認事件?
74.ajax請求時,如何解釋json數據
75.json和jsonp的區別?
76.如何用原生js給一個按鈕綁定兩個onclick事件?
77.拖拽會用到哪些事件
78.document.write和innerHTML的區別
79.jQuery的事件委托方法bind 、live、delegate、on之間有什么區別?
80.瀏覽器是如何渲染頁面的?
81.$(document).ready()方法和window.onload有什么區別?
82. jquery中$.get()提交和$.post()提交有區別嗎?
83.對前端路由的理解?前后端路由的區別?
84.手寫一個類的繼承
85.XMLHttpRequest:XMLHttpRequest.readyState;狀態碼的意思
1.給一個連字符串例如:get-element-by-id轉化成駝峰形式。
2.匹配二進制數字
3.非零的十進制數字 (有至少一位數字, 但是不能以0開頭)
4.匹配一年中的12個月
5.匹配qq號最長為13為
6.匹配常見的固定電話號碼
7.匹配ip地址
8.匹配用尖括號括起來的以a開頭的字符串
9.分割數字每三個以一個逗號劃分
10.判斷字符串是否包含數字
11.判斷電話號碼
12.判斷是否符合指定格式
13.判斷是否符合USD格式
14.JS實現千位分隔符
15.獲取 url 參數
16.驗證郵箱
17.驗證身份證號碼
18.匹配漢字
19.去除首尾的'/'
20.判斷日期格式是否符合 '2017-05-11'的形式,簡單判斷,只判斷格式
21.判斷日期格式是否符合 '2017-05-11'的形式,嚴格判斷(比較復雜)
22.IPv4地址正則
23.十六進制顏色正則
24.車牌號正則
25.過濾HTML標簽
26.密碼強度正則,最少6位,包括至少1個大寫字母,1個小寫字母,1個數字,1個特殊字符
27.URL正則
28.匹配浮點數
1.什么是盒模型
2.行內元素有哪些?塊級元素有哪些? 空(void)元素有那些?行內元素和塊級元素有什么區別?
3.簡述src和href的區別
4.什么是css Hack
5.什么叫優雅降級和漸進增強
6.px和em的區別
7.HTML5 為什么只寫
8.Http的狀態碼有哪些
9.一次完整的HTTP事務是怎么一個過程
10.HTTPS是如何實現加密
11.瀏覽器是如何渲染頁面的
12.瀏覽器的內核有哪些?分別有什么代表的瀏覽器
13.頁面導入時,使用link和@import有什么區別
14.如何優化圖像,圖像格式的區別
15.列舉你了解Html5. Css3 新特性
16.可以通過哪些方法優化css3 animation渲染
17.列舉幾個前端性能方面的優化
18.如何實現同一個瀏覽器多個標簽頁之間的通信
19.瀏覽器的存儲技術有哪些
20.css定位方式
21.盡可能多的寫出瀏覽器兼容性問題
22.垂直上下居中的方法
23.響應式布局原理
25.清除浮動的方法
26.http協議和tcp協議
27.刷新頁面,js請求一般會有哪些地方有緩存處理
28.如何對網站的文件和資源進行優化
29.你對網頁標準和W3C重要性的理解
30.Http和https的區別
31.data-屬性的作用
32.如何讓Chrome瀏覽器顯示小于12px的文字
33.哪些操作會引起頁面回流(Reflow)
34.CSS預處理器的比較less sass
35.如何實現頁面每次打開時清除本頁緩存
36.什么是Virtual DOM,為何要用Virtual DOM
37.偽元素和偽類的區別
38.http的幾種請求方法和區別
39.前端需要注意哪些SEO
40.的title和alt有什么區別
41.從瀏覽器地址欄輸入url到顯示頁面的步驟
42.如何進行網站性能優化
43.語義化的理解
44.HTML5的離線儲存怎么使用,工作原理能不能解釋一下?
45.瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢
46.iframe有那些缺點?
47.WEB標準以及W3C標準是什么?
48.Doctype作用? 嚴格模式與混雜模式如何區分?它們有何意義?
49.HTML全局屬性(global attribute)有哪些
50.Canvas和SVG有什么區別?
51.如何在頁面上實現一個圓形的可點擊區域?
52.網頁驗證碼是干嘛的,是為了解決什么安全問題
53.請描述一下 cookies,sessionStorage 和 localStorage 的區別?
54. CSS選擇器有哪些?哪些屬性可以繼承?
55.CSS優先級算法如何計算?
56.CSS3有哪些新特性?
57.請解釋一下CSS3的flexbox(彈性盒布局模型),以及適用場景?
58.用純CSS創建一個三角形的原理是什么?
59.常見的兼容性問題?
60.為什么要初始化CSS樣式
61.absolute的containing block計算方式跟正常流有什么不同?
62.CSS里的visibility屬性有個collapse屬性值?在不同瀏覽器下以后什么區別?
63.display:none與visibility:hidden的區別?
64.position跟display、overflow、float這些特性相互疊加后會怎么樣?
65.對BFC規范(塊級格式化上下文:block formatting context)的理解?
66.為什么會出現浮動和什么時候需要清除浮動?清除浮動的方式?
67.上下margin重合的問題
68. 設置元素浮動后,該元素的display值是多少?
69.移動端的布局用過媒體查詢嗎?
70.CSS優化、提高性能的方法有哪些?
71.瀏覽器是怎樣解析CSS選擇器的?
72.在網頁中的應該使用奇數還是偶數的字體?為什么呢?
73.margin和padding分別適合什么場景使用?
74.元素豎向的百分比設定是相對于容器的高度嗎?
75.全屏滾動的原理是什么?用到了CSS的哪些屬性?
76.什么是響應式設計?響應式設計的基本原理是什么?如何兼容低版本的IE?
77. 視差滾動效果?
78.::before 和 :after中雙冒號和單冒號有什么區別?解釋一下這2個偽元素的作用
79.讓頁面里的字體變清晰,變細用CSS怎么做?
80. position:fixed;在android下無效怎么處理?
81.如果需要手動寫動畫,你認為最小時間間隔是多久,為什么?
82.li與li之間有看不見的空白間隔是什么原因引起的?有什么解決辦法?
83.display:inline-block 什么時候會顯示間隙?
84. 有一個高度自適應的div,里面有兩個div,一個高度100px,希望另一個填滿剩下的高度
85.png、jpg、gif 這些圖片格式解釋一下,分別什么時候用。有沒有了解過webp?
86.style標簽寫在body后與body前有什么區別?
87.CSS屬性overflow屬性定義溢出元素內容區的內容會如何處理?
88.闡述一下CSS Sprites
89. 一行或多行文本超出隱藏
?
初識小程序
1.注冊小程序
2.微信開發者工具
3.小程序與普通網頁開發的區別
4.小程序尺寸單位rpx
5.樣式導入(WeUI for)
6.選擇器
7.小程序image高度自適應及裁剪問題
8.微信小程序長按識別二維碼
9.給頁面加背景色
10.微信小程序獲取用戶信息
11.代碼審核和發布
12.小程序微信認證
13.小程序申請微信支付
14.小程序的目錄解構及四種文件類型
15.小程序文件的作用域
16.小程序常用組件
1.view
2.scroll-view
3.swiper組件
4.movable-view
5.cover-view
6.cover-image
小程序基礎
17.授權得到用戶信息
18.數據綁定
19.列表渲染
20.條件渲染
21.公共模板建立
22.事件及事件綁定
23.引用
24.頁面跳轉
1.wx.switchTab
2.wx.reLaunch
3.wx.redirectTo
4.wx.navigateTo
5.wx.navigateBack
25.設置tabBar
26.頁面生命周期
27.轉發分享
小程序高級
28.request請求后臺接口
29.http-promise 封裝
30.webview
31.獲取用戶收貨地址
32.獲取地里位置
33.自定義組件
34.微信小程序支付問題
小程序項目實戰
35.微信小程序本地數據緩存
36.下拉刷新和下拉加載
37.列表頁向詳情頁跳轉(動態修改title)
38.客服電話
39.星級評分組件
40.小程序插槽的使用slot
41.模糊查詢
42.wxs過濾
43.小程序動畫
44.列表根據索引值渲染
45.小程序動態修改class
46.小程序常用框架
47.參數傳值的方法
48.提高小程序的應用速度
49.微信小程序的優劣勢
50.小程序的雙向綁定和vue的區別
51.微信小程序給按鈕添加動畫
52.微信小程序的tab按鈕的轉換
53.微信小程序引進echarts
54.APP打開小程序流程
55.小程序解析富文本編輯器
小程序常見bug
1.域名必須是HTTPS
2. input組件placeholder字體顏色
3. wx.navigateTo無法跳轉到帶tabbar的頁面
4. tabbar在切換時頁面數據無法刷新
5.如何去掉自定義button灰色的圓角邊框
6.input textarea是APP的原生組件,z-index層級最高
7.一段文字如何換行
8.設置最外層標簽的margin-bottom在IOS下不生效
9.小程序中canvas的圖片不支持base64格式
10.回到頁面頂部
11.wx.setStorageSync和wx.getStorageSync報錯問題
12.如何獲取微信群名稱?
13.new Date跨平臺兼容性問題
14.wx.getSystemInfoSync獲取windowHeight不準確
15.圖片本地資源名稱,盡量使用小寫命名
1. 1px border問題
2.2X圖 3X圖適配
3.圖片在安卓上,有些設備模糊問題
4.固定定位布局 鍵盤擋住輸入框內容
5.click的300ms延遲問題和點擊穿透問題
6.phone及ipad下輸入框默認內陰影
7.防止手機中頁面放大和縮小
8.flex布局
9.px、em、rem、%、vw、vh、vm這些單位的區別
10. 移動端適配- dpr淺析
11.移動端擴展點擊區域
12 上下拉動滾動條時卡頓、慢
13 長時間按住頁面出現閃退
14. ios和android下觸摸元素時出現半透明灰色遮罩
15. active兼容處理 即 偽類:active失效
16.webkit mask兼容處理
17. pc端與移動端字體大小的問題
18. transiton閃屏
19.圓角bug
20.如何解決禁用表單后移動端樣式不統一問題?
輪播圖插件
二級城市插件
三級城市插件
文字滑動效果
手風琴效果
視頻播放插件
彈層插件
百度編輯器
ACE編輯器(輕巧)
上傳圖片(裁剪)
頁面加載效果
全選反選各種效果
京東樓層效果
懶加載
dedecms(文章累)
discuz(論壇)
ecshop(電商)
PHPEMS(考試)
SS是一個很獨特的語言。看起來非常簡單,但是某種特殊效果看似簡單,實現起來就頗有難度。這篇文章主要是給在學習前端的童鞋分享一些新的CSS技巧,一些在前端教程和培訓課堂中不會講到的知識。第二就是讓還在前端開發這條道路上的童鞋們,重新燃起對前端排版和特效的熱愛和熱情!
這種是一個非常常見的布局方式,但是對于新手來說是比較常見的難題。
這種布局方式在后臺管理系統中比較常見,當我們內容不足瀏覽器窗口高度時,底部內容需要固定在底部。當內容超出了瀏覽器窗口高度,就會隨著內容往后推。
在有CSS3之前,實現這個效果是頗有難度的。瀏覽器窗口高度是會根據不同用戶打開瀏覽器的情況,屏幕大小的差異和瀏覽器的縮放比例而變。我們需要借助JavaScript來實時獲取瀏覽器高度進行運算才能實現。雖然說標題是說“固定”底部,但是我們想要的效果不是position: fixed。使用固定定位,在內容高于窗口高度時,就會擋住我們的內容。
隨著CSS3的來臨,最完美的實現方式是使用Flexbox。實現的關鍵就是使用不太被關注的flex-grow屬性,可以在我們的內容標簽元素(比如div)中使用。在我們下面的例子里使用了main標簽。
我來講解一下實現原理吧。
flew-grow是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間。如果我們使用flex-grow: 0,那這個flex元素就完全不會擴展了。所以我們需要把頭部和底部之間的內容標簽元素設置為flex-grow: 1或者flex-grow: auto,這樣內容部分就會自動填充滿頭部和底部之外的所有空間。
為了避免底部內容受內容部分擴充空間的影響,我們給footer底部元素flex-shrink: 0屬性。flex-shrink的作用與flex-grow是恰恰相反,用來控制flex元素收縮的空間,這里我們給了flex-shrink: 0就是為了底部footer的大小不受影響。
我們直接上HTML和CSS代碼看看是怎么實現的。
<div id="document">
<nav>
<h1>頭部內容</h1>
</nav>
<main>
<p>可以添加更多內容看看底部的變化哦!</p>
</main>
<footer>
<h1>底部內容</h1>
</footer>
</div>
#document {
height: 100vh;
display: flex;
flex-direction: column;
background: #202020;
font-family: microsoft yahei,wenquanyi micro hei,sans-serif !important;
}
nav, footer {
background: #494949;
display: flex;
justify-content: center;
}
main {
color: #bdbdbd;
flex: auto;
}
footer {
flex-shrink: 0;
}
* {
margin: 0;
}
h1,
p {
padding: 15px;
}
nav > h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}
footer > h1 {
color: #82FCFD;
text-shadow: 1px 1px 4px #00000080;
}
知識點總結:
flex-grow --- 是用來控制一個flex元素相對它同等級flex元素的自身可擴充的空間 flex-shrink --- 作用與flex-grow是恰恰相反,用來控制flex元素收縮的空間
懸停放大圖片是一個特別吸引眼球的特效,比較常用于可點擊的圖片。當用戶懸停鼠標在圖片上,圖片會稍微的放大。
其實實現這個特效是非常簡單的。首先我們需要一個div包裹這img標簽,這個包裹層是用來遮擋住圖片,當圖片放大時不會出現圖片超出我們規定的寬高以外。
首先我們來講講div包裹的屬性,我們需要給它一個固定的width寬和height高。然后我們必須給予這個元素overflow: hidden屬性。讓圖片放大的時候不會超出這個div元素的寬高。有了這個包裹層,我們就可以編寫img的各種效果了。
我的例子里面用了transform: scale(1,1)作為懸停時的圖片特效,這個transform是用于改變任何元素的屬性的,然后scale是用于放大(整數就會放大)或者縮小(負數就會縮小)元素的。
上代碼讓大家看看:
<div class="img-wrapper">
<img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
</div>
.img-wrapper {
width: 400px;
height: 400px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.img-wrapper img {
height: 400px;
-webkit-transition: 0.3s linear;
transition: 0.3s linear;
}
.img-wrapper img:hover {
transform: scale(1.1);
}
.img-wrapper {
display: inline-block;
box-sizing: border-box;
border: 3px solid #000;
}
如果你們想讓圖片更加炫酷可以加上圖片過濾屬性filter,讓圖片變灰或者變深褐色,然后懸停時候出現更加炫酷的顏色變幻。灰化的屬性是filter: grayscale(100%);,然后深褐色化的屬性是filter: sepia(100%)。其實圖片還有很多過濾屬性的,大家有興趣也可以去嘗試一下哦!
加入特殊效果的代碼如下:
<!-- 灰度過濾 -->
<div class="img-wrapper">
<img
class="grayscale-img"
src="https://img-blog.csdnimg.cn/2020032211021728.png"
/>
</div>
<!-- 深褐色過濾 -->
<div class="img-wrapper">
<img
class="sepia-img"
src="https://img-blog.csdnimg.cn/2020032122230564.png"
/>
</div>
/*==============* 灰度過濾
*==============*/
.grayscale-img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.grayscale-img:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
/*==============* 深褐色過濾
*==============*/
.sepia-img {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.sepia-img:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}
知識總結
transform --- 用于改變元素 scale --- 對元素進行放大和縮小 filter --- 圖片過濾器 grayscale --- 灰度過濾 sepia --- 深褐色過濾
最近微信也逃脫不了黑暗時代的到來,網頁也很多都做了黑暗模式的兼容和主題。如果我們在做的一個網站想瞬間實現黑暗模式可以怎么實現呢?
其實有一個很快的方式,我們可以使用invert和hue-rotate兩個CSS3過濾器來實現。
filter: invert() — 是從0到1的刻度,1是從白變黑。 filter: hue-rotate() — 用于改變你元素的顏色,同時或多或少保持原本相同的色系。這個屬性的值可以從0deg到360deg。
在我們頁面的body標簽上添加這兩個屬性,我們就可以快速嘗試把我們的網站變成"黑暗模式"。這里需要注意的是,如果body和html上沒有設置background背景顏色,這個過濾就會不起效了哦。
CSS的代碼如下:
html {
background: #fff;
}
body {
background: #fff;
filter: invert(1) hue-rotate(270deg);
}
實現效果
這里我們會發現圖片的顏色會受影響,并不是很美觀,使用css過濾器是無法完美切換黑暗模式的。不過使用JavaScript輔助就可以完美的切換黑暗模式。
最近出了一個JavaScript輔助插件叫Darkmode.js。
其實Darkmode.js運用的也是css里面的一個特性叫mix-blend-mode — “CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合“。加上Javascript的輔助判斷哪些頁面上的元素需要黑化的,哪些是不需要黑化的。就會想我們之前那種做法,導致其他不需要黑化的元素,比如圖片,受到影響導致顏色出現問題。
使用Darkmode.js非常簡單,只要在腳本里面添加以下代碼就可以馬上加入一個插件,
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>
// 這些是這個插件的可配置項:
var options={
bottom: "32px", // 定位底部距離 - 默認: '32px'
right: "32px", // 定位右邊距離 - 默認: '32px'
left: "unset", // 定位左邊距離 - 默認: 'unset'
time: "0.5s", // 默認動畫時間: '0.3s'
mixColor: "#fff", // 需要改變的顏色 - 默認: '#fff'
backgroundColor: "#fff", // 背景顏色 - 默認: '#fff'
buttonColorDark: "#262728", // 黑暗模式下按鈕顏色 - 默認: '#100f2c'
buttonColorLight: "#fff", // 日間模式下按鈕顏色 - 默認: '#fff'
saveInCookies: true, // 是否在cookie保存當前模式 - 默認: true,
label: "", // 切換模式按鈕圖標 - 默認: ''
autoMatchOsTheme: true // 是否自動根據系統適應模式 - 默認: true
};
let darkmode=new Darkmode(options);
darkmode.showWidget();
</script>
如果你不希望用這個插件的默認按鈕,你可以在你的JavaScript代碼中自主控制。我們可以通過.toggle()方法來切換模式,同時可以使用.isActivated()來檢測是否已經進入黑暗模式。
const darkmode=new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // 如果已經進入黑暗模式會返回 true
知識總結
filter: invert() — 可以把頁面從白變黑,也可以從黑變白。 filter: hue-rotate() — 用于改變你元素的顏色,同時或多或少保持原本相同的色系。 Darkmode.js — 瞬間實現黑暗模式。
ul,li的無序列表有默認的符號·,但是在很多情況下我們希望可以給這個符號加入自己的樣式和顏色,甚至是換成自定義的符號。默認的符號我們是無法做任何的樣式處理,而且默認的符號在CSS屬性里面只有幾個選擇可以使用,很多情況下都是無法滿足我們的設計。
其實自定義無序列表符號不難,我們只需要使用偽類::before加content屬性就可以實現。
在我這個例子里面我做了兩個任務列表,一個是待處理任務,一個是已完成任務,各自給了不一樣的列表符號和顏色。
實現原理
一、首先我們禁用了ul的默認符號樣式list-style: none
二、在li的:before偽類上給予content內容值,待處理任務使用,已完成任務li.completed:before使用?
三、為了展示效果更加好看我分別給了li和li .completed兩個不同的顏色
上代碼看看是怎么實現的吧:
HTML
<div>
<h2>待處理</h2>
<ul>
<li>待辦任務1</li>
<li>待辦任務2</li>
<li>待辦任務3</li>
<li>待辦任務4</li>
<li>待辦任務5</li>
</ul>
</div>
<div>
<h2>已完成</h2>
<ul>
<li class="completed">完成任務1</li>
<li class="completed">完成任務2</li>
<li class="completed">完成任務3</li>
</ul>
</div>
CSS
ul {
list-style: none;
color: #fff;
font-size: 20px;
border: 3px solid #000;
padding: 1rem 2rem;
min-height: 200px;
margin: 15px 2rem 0 0;
background: #323232;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
border-radius: 8px;
}
li {
padding: 0.3rem 0;
}
li::before {
content: " ";
color: aqua;
}
li.completed::before {
content: "? ";
text-decoration: none;
color: greenyellow;
}
li.completed {
text-decoration: line-through;
color: #bdbdbd;
}
::before和::after偽類加content屬性可以用來做很多特殊的效果,也是當代前端排版比較常用的“魔法”。說到偽類的使用,我再給大家說一個比較常用的使用場景。
在管理后臺或者是文章展示中,我們經常可以見到的“面包屑導航”也是用偽類來插入每個目錄中間的符號的。
實現邏輯
一、這個導航含有3個a標簽,首先給每個a標簽加入一個偽類::after,然后在content屬性插入/符號。
二、然后使用a:first-child,這個偽類會選擇到第一個a標簽,然后使用content屬性加入?符號。
三、因為我們第一步在每個a標簽的后面插入了/符號, 所以我們需要在最后一個a標簽清除掉。這里我們使用:last-child選擇到最后一個a標簽,然后用content: " "屬性把偽類的內容清楚掉。
HTML
<div class="breadcrumb">
<a>三鉆</a>
<a>前端</a>
<a>教程</a>
</div>
CSS
.breadcrumb {
font-size: 1.6rem;
color: #fff;
}
.breadcrumb a:first-child {
color: #82fcfd;
}
.breadcrumb a:first-child::before {
content: " ? ";
}
.breadcrumb a::after {
content: " /";
color: #ef6eae;
}
.breadcrumb a:last-child::after {
content: "";
}
知識總結
::before | ::after — 偽類用于向某些選擇器添加特殊的效果。 content — CSS 屬性用于在元素的 ::before 和 ::after 偽元素中插入內容。使用content 屬性插入的內容都是匿名的可替換元素。 :first-child — CSS偽類表示在一組兄弟元素中的第一個元素。 :last-child — CSS偽類代表父元素的最后一個子元素。
這個超級炫酷的效果在官網中非常的受歡迎,這種效果可以給用戶帶來視覺沖擊,也給我們的網站帶來了活力。普通的網頁圖片會跟隨著網頁一起滑動,但是視覺差效果圖就會固定在底部,只有圖片所在的窗口上的元素會移動。
對你沒有看錯,這個效果只需要用到CSS就能輕易的實現!我們只要使用一個CSS背景圖的屬性background-attachment: fixed,這個特性會把背景相對于視口固定。即使一個元素擁有滾動機制,背景也不會隨著元素的內容滾動。
實現理論:
一、在含有圖片的元素中加入background: url()和background-size: cover(第二個屬性適用于定義圖片為封面,可以讓圖片大小自動適應,在很大的屏幕也會顯示完整的圖片)
二、然后附加固定背景圖的屬性background-attachment: fixed
三、最后給這個元素加入一個高度height: 100%或者任意的高度height: 400px
就那么簡單哦!不用懷疑,馬上上代碼,大家都可以自己去試試哦!
HTML
<div class="wrapper">
<div class="parallax-img"></img>
<p>這里填寫一堆文字就可以了,盡量多一點哦</p>
</div>
CSS
.wrapper {
height: 100wh;
}
.parallax-img {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {
font-size: 20px;
padding: 1.5rem 3rem;
min-height: 1000px; // 當你的文字內容不夠,也能撐出足夠的高度來看到效果,當然如果你文字足夠多,就不需要了
}
如果想做到我動圖里面一樣的效果,或者想看是怎么實現的,可以查看下面總結里面的“預覽實際效果”或者看“GitHub源碼”。
知識總結
background-attachment: fixed — 把背景相對于視口固定。即使一個元素擁有滾動機制,背景也不會隨著元素的內容滾動。 background-size: cover — 可以讓圖片大小自動適應,在很大的屏幕也會顯示完整的圖片。
有些童鞋可能沒有被這個震撼到或者還是覺得不夠刺激。那我們再來一個高級例子,上面的例子在滑動的時候圖片是固定死的。如果我們加上JavaScript的助力,我們可以讓窗口的圖片緩慢的跟隨這個頁面滑動,使得效果更有動力和更有沖擊感。
實現理論 首先講一下排版,因為我們需要在我們滑動頁面的時候使用JavaScript偏移圖片,所以我們需要給圖片一個CSS屬性讓我們可以讓圖片可以根據一個速度來往上或者往下移動。這個例子里面我們讓所有圖片包裹在一個div里面,class名為block。這個div給予相對定位屬性position: relative,這個時候我們就可以在里面加入圖片,然后讓圖片絕對定位position: absolute在這個div盒子里面。
但是圖片是可能很大的,我們需要把圖片不超出我們定義個盒子,所以我們的div同時也給予了overflow: hidden和一個高度height: 100%。這樣圖片超出div盒子就會被隱藏。
布局代碼如下:
<div class="block">
<img
src="https://unsplash.it/1920/1920/?image=1005"
data-speed="-1"
class="img-parallax"
/>
<h2>視差速度 -1</h2>
</div>
<div class="block">
<img
src="https://unsplash.it/1920/1920/?image=1067"
data-speed="1"
class="img-parallax"
/>
<h2>視差速度 1</h2>
</div>
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: 'Amatic SC', cursive;
}
.block{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
font-size: 16px;
}
.block h2{
position: relative;
display: block;
text-align: center;
margin: 0;
top: 50%;
transform: translateY(-50%);
font-size: 10vw;
color: white;
font-weight: 400;
}
.img-parallax {
width: 100vmax;
z-index: -1;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,0);
pointer-events: none
}
實現這個布局,在你滑動的時候,圖片是不會移動的。因為最后一步就是加入JavaScript的輔助,讓圖片活起來。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 循環獲取每一個圖片元素
$(".img-parallax").each(function () {
var img=$(this);
var imgParent=$(this).parent();
function parallaxImg() {
var speed=img.data("speed"); // 獲取每張圖片設置了的偏移速度
var imgY=imgParent.offset().top; // 獲取圖片盒子所在的Y位置
var winY=$(this).scrollTop(); // 獲取當前滑動到的位置
var winH=$(this).height(); // 獲取瀏覽器窗口高度
var parentH=imgParent.innerHeight(); // 獲取圖片盒子的內高度
// 瀏覽器窗口底部的所在位置
var winBottom=winY + winH;
// 當前圖片是否進入瀏覽器窗口
if (winBottom > imgY && winY < imgY + parentH) {
// 運算圖片需要開始移動的位置
var imgBottom=(winBottom - imgY) * speed;
// 運算出圖片需要停止移動的位置
var imgTop=winH + parentH;
// 獲取從開始移動到結束移動的%(根據開始與結束像素 + 移動速度)
var imgPercent=(imgBottom / imgTop) * 100 + (50 - speed * 50);
}
img.css({
top: imgPercent + "%",
transform: "translate(-50%, -" + imgPercent + "%)",
});
}
$(document).on({
scroll: function () {
parallaxImg();
},
ready: function () {
parallaxImg();
},
});
});
</script>
知識總結
position: relative — 相對定位。 position: absolute — 絕對定位。 overflow: hidden — 如果需要,內容將被剪裁以適合填充框。 不提供滾動條。
在有CSS3之前裁剪圖片實現也是頗有難度的。現在我們有了兩個非常方便簡單的CSS3屬性可以實現裁剪,那就是object-fit和object-position, 這兩個屬性可以讓我們改變圖片的大小,但是不影響圖片的長寬比。
當然我們可以使用圖片處理工具或者使用JavaScript等插件來實現圖片裁剪功能。但是因為有了CSS3的屬性,我們不只可以裁剪,我們還可以用裁剪的屬性來做圖片的動態效果。
為了讓我們的例子更加簡單,我們這里使用了<input type="checkbox">復選框元素,這樣我們就可以使用:checked的偽類來觸發啟動效果。所以在例子里面我們完全不需要JavaScript的協助。
實現原理:
一、首先給予圖片一個寬高height: 1080px,width: 1920px。
二、然后用CSS選擇器,鎖定當input被選中后img標簽的樣式變化。當被選中時,給圖片設定一個新的寬高,這里我們給寬高各自500像素:width: 500px,height: 500px。
三、然后我們加上了過渡效果和時間讓圖片改變寬高時有動畫過渡效果:transition: width 2s, height 4s;。
四、最后加上object-fit: cover和object-position: left-top這兩個屬性來保持圖片的寬高比例,這樣就大功告成了!
我們來看看完成的代碼:
勾選裁剪圖片 <input type="checkbox" />
<br />
<img
src="https://img-blog.csdnimg.cn/2020032122230564.png"
alt="Random"
/>
input {
transform: scale(1.5); /* 只是用來放大復選框大小 */
margin: 10px 5px;
color: #fff;
}
img {
width: 1920px;
height: 1080px;
transition: 0s;
}
/* css選擇器鎖定復選框被選中時的狀態 */
input:checked + br + img {
width: 500px;
height: 500px;
object-fit: cover;
object-position: left-top;
transition: width 2s, height 4s;
}
知識總結
object-fit — CSS 屬性指定可替換元素的內容應該如何適應到其使用的高度和寬度確定的框。 object-position — 用來切換被替換元素的內容對象在元素框內的對齊方式。 transition — 過渡可以為一個元素在不同狀態之間切換的時候定義不同的過渡效果。
如果有使用過Photoshop的同學對blend混合模式應該是非常熟悉了,我們都知道混合模式是非常強大,也是p圖時非常常用的一個功能。但是你們有沒有想象過可以在瀏覽器的CSS中直接使用呢?對我們不需要設計師給我們做圖,我們前端也可以實現混合模式了。
在CSS中我們不只可以對background背景加入混合模式,我們可以對任何一個元素的自帶背景加入混合模式,讓你可以做出很多之前沒有想過的效果和排版。
往一個元素加入混合模式,我們只需要使用到一個CSS屬性mix-blend-mode即可。
簡單實現原理:
首先我們只需要加一個h1標題標簽
<h1>混合模式:顏色減淡</h1>
然后我們給h1標簽加入mix-blend-mode中的顏色減弱模式color-dodge,但是要注意的是我們需要給body和html加入背景顏色background: white,要不你會發現這個效果會無效。因為h1我們沒有給顏色,會自動往上級繼承,并且混合模式是針對背景顏色的過濾,所以body和html需要有背景顏色才行。
h1 {
mix-blend-mode: color-dodge;
font-family: yahei;
font-size: 5rem;
text-align: center;
margin: 0;
padding: 20vh 200px;
color: #D1956C;
}
html,
body {
margin: 0;
background-color: white;
}
body {
background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3302&q=80);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
overflow: hidden;
}
換換背景圖和h1標簽的字體顏色就可以弄出各種不同的特效了。
知識總結
mix-blend-mode — CSS 屬性描述了元素的內容應該與元素的直系父元素的內容和元素的背景如何混合。
CSS Grid和Flexbox讓我們可以更簡便,更容易和更快的實現各式各樣的響應布局,并且讓我們快捷方便的在布局中實現橫向劇中和豎向劇中。但是回想一下以前是頗為困難的。
雖然這些新出的布局方式可以讓我們解決很多以前的布局難題,但是像瀑布流布局這種,就無法用它們簡單來實現了。因為瀑布流一般來說都是寬度一致,但是高度是根據圖片自適應的。并且圖片的位置也是根據在上方圖片的位置而定的。
其實最好實現瀑布流布局的辦法就是用CSS的列屬性套件,這套屬性大多數都是用于排版雜志中的文本列。但是用于布局瀑布流也是特別實用哦。因為以前需要實現瀑布流,就必須有JavaScript的輔助來計算圖片高度然后決定每張圖片的定位和位置,所以現在有了列屬性就可以使用純CSS實現了。
實現原理:
實現這個布局,首選我們需要把所有的內容先包裹在一個div元素里面,然后給這個元素column-width和column-gap屬性。
然后,為了防止任何元素被分割到兩個列之間,將column-break-inside: avoid添加到各個元素中。
神奇的效果就完美實現了,零JavaScript。
我們來看看代碼:
<div class="columns">
<figure>
<img src="https://source.unsplash.com/random?city" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?night" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?developer" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?building" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?water" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?coding" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?stars" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?forest" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?girls" alt="" />
</figure>
<figure>
<img src="https://source.unsplash.com/random?working" alt="" />
</figure>
</div>
.columns {
column-width: 320px;
column-gap: 15px;
width: 90%;
max-width: 1100px;
margin: 50px auto;
}
.columns figure {
display: inline-block;
box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
column-break-inside: avoid;
border-radius: 8px;
}
.columns figure img {
width: 100%;
height: auto;
margin-bottom: 15px;
border-radius: 8px;
}
知識總結
column-width — CSS屬性建議一個最佳列寬。 列寬是在添加另一列之前列將成為最大寬度。 column-width — 該 CSS 屬性用來設置元素列之間的間隔 (gutter) 大小。 column-break-inside — 設置或檢索對象內部是否斷。
我希望這8個前端小技巧和特效對大家有幫助,或多或少有吸收一點新的前端知識。這篇文章提到的內容,其實很多都是值得深挖和學習的。有一些例子我做的比較簡單,但是其實是有無限的可能性。喜歡前端的童鞋們,讓我們繼續在前端領域中一起深挖,讓我們的熱愛無限的燃燒起來吧!
在最后我想給大家講一下我對前端的熱愛和態度。
回想前端這幾年,發展真的是突飛猛進,從前端排版,HTML5+CSS3做H5頁面,到前端組件化,各種UI框架滿天飛。
一開始我隨著熱潮用起了UI框架,起初覺得特別方便,來一個新的項目就直接上一個UI框架,研發速度也非常快。但是久而久之就覺得前端開發變成了處理數據,對接接口,實現交互。
某天在閱覽國外的一些前端設計和框架的時候,我突然發現國內多數的前端開發者都不再怎么使用CSS3做出一些很好玩的布局和特效了。現在市面上的系統和頁面都是千篇一律,普遍都是用一些知名的UI框架搭建系統和APP,基本自己動手去排版已經少之又少。前端已不再是以前的前端,缺少了靈魂。
但是我們回想一下,我們剛剛開始學習前端的時候,讓我們最有成就感,覺得前端特別有意思的那種感覺。就是那種讓我們覺得神乎奇跡,不可思議的布局,特效和交互。那種感覺自己成功實現了很優美,很炫酷的頁面和特效的感覺,讓我們越做越來勁,越做越是興奮。
但是在某些公司,研發部都是要求快速開發,UI設計部門也是受到時間的控制和限制,所以逐步走進了UI框架的限制之中。都是圍繞這一些UI框架來設計和開發系統和應用。
作為一名熱愛前端的開發者,我還是堅持在絕大多數的項目中,自己排版和實現頁面交互特效。然后使用UI框架作為輔助,主要是用來減輕一些小組件和常用組建的快速實現。(可以說我是比較追求完美和外貌協會的程序員 )
作者:三鉆
鏈接:https://juejin.im/post/5e8fc7826fb9a03c677e68d9
來源:掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。