描述：點擊 save-btn 元素會同時觸發 wrap 綁定的 click 事件。
<div class="wrap" @click="cancel"> <div class="save-btn" @click="save('save result')"></div> </div>
方案一：把特殊變量 $event 傳入內聯語句中，訪問原始的 DOM 事件。
<div class="wrap" @click="cancel"> <div class="save-btn" @click="save('save result',$event)"></div> </div> // ... methods: { save(msg, event){ // 現在可以訪問原生事件對象 if(event) event.preventDefault(); alert(msg); } }
方案二：利用 Vue.js 提供的事件修飾符解決。在 save-btn 元素上使用 @click.stop="save('save result')" 即可。
在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。
.stop .prevent .capture .self .once .passive <!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此處理，然后才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div> <!-- 2.1.4 新增 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a> <!-- 2.3.0 新增 滾動事件的默認行為 (即滾動行為) 將會立即觸發 --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <!-- 該修飾符尤其能夠提升移動端的性能 --> <!-- 不要把 .passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行為。 --> <div v-on:scroll.passive="onScroll">...</div>
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：腳本之家
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作者：一通
來源：簡書
從我們開始接觸Java這門語言后，就有人告訴我們這是一個面向對象的語言。說的最多的是new個對象，其實并不知道什么是對象。以為對象就是一個class（類），并不覺得有什么特殊。直到很久之后，面試官問到什么是OOP，嘴巴都是一個大O，OOP？WTF？那人厭惡的說到就是面向對象編程。我說：Java就是面向對象，就是一切以對象為載體，去編程，去面對。面試官： go out ! now!
滾回來的我趕緊看看什么是OOP，Object Oriented Programming，原來就是面向對象的編程啊，還有OOD（面向對象的設計），OOA（面向對象的分析）。那什么是面向對象呢？要想了解這個問題我們要先了解面向過程，這樣對比我們就好理解了。
很早很早以前的編程是面向過程的，比如實現一個算術運算1+1 = 2，通過這個簡單的算法就可以解決問題。但是隨著時代的進步，人們不滿足現有的算法了，因為問題越來越復雜，不是1+1那么單純了，比如一個班級的學生的數據分析，這樣就有了對象這個概念，一切事物皆對象。將現實的事物抽象出來，注意抽象這個詞是重點啊，把現實生活的事物以及關系，抽象成類，通過繼承，實現，組合的方式把萬事萬物都給容納了。實現了對現實世界的抽象和數學建模。這是一次飛躍性的進步。
舉個最簡單點的例子來區分 面向過程和面向對象
有一天你想吃魚香肉絲了，怎么辦呢？你有兩個選擇
1、自己買材料，肉，魚香肉絲調料，蒜苔，胡蘿卜等等然后切菜切肉，開炒，盛到盤子里。
2、去飯店，張開嘴：老板！來一份魚香肉絲！
看出來區別了嗎？這就是1是面向過程，2是面向對象。
面向對象有什么優勢呢？首先你不需要知道魚香肉絲是怎么做的，降低了耦合性。如果你突然不想吃魚香肉絲了，想吃洛陽白菜，對于1你可能不太容易了，還需要重新買菜，買調料什么的。對于2，太容易了，大喊：老板！那個魚香肉絲換成洛陽白菜吧，提高了可維護性?？偟膩碚f就是降低耦合，提高維護性！
面向過程是具體化的，流程化的，解決一個問題，你需要一步一步的分析，一步一步的實現。
面向對象是模型化的，你只需抽象出一個類，這是一個封閉的盒子，在這里你擁有數據也擁有解決問題的方法。需要什么功能直接使用就可以了，不必去一步一步的實現，至于這個功能是如何實現的，管我們什么事？我們會用就可以了。
面向對象的底層其實還是面向過程，把面向過程抽象成類，然后封裝，方便我們我們使用的就是面向對象了。
面向過程：
優點：性能比面向對象好，因為類調用時需要實例化，開銷比較大，比較消耗資源。
缺點：不易維護、不易復用、不易擴展.
優點：易維護、易復用、易擴展，由于面向對象有封裝、繼承、多態性的特性，可以設計出低耦合的系統，使系統 更加靈活、更加易于維護 .
缺點：性能比面向過程差
1、封裝
隱藏對象的屬性和實現細節，僅對外提供公共訪問方式，將變化隔離，便于使用，提高復用性和安全性。
2、繼承
提高代碼復用性；繼承是多態的前提。
3、多態
父類或接口定義的引用變量可以指向子類或具體實現類的實例對象。提高了程序的拓展性。
1、單一職責原則SRP(Single Responsibility Principle)
類的功能要單一，不能包羅萬象，跟雜貨鋪似的。
2、開放封閉原則OCP(Open－Close Principle)
一個模塊對于拓展是開放的，對于修改是封閉的，想要增加功能熱烈歡迎，想要修改，哼，一萬個不樂意。
3、里式替換原則LSP(the Liskov Substitution Principle LSP)
子類可以替換父類出現在父類能夠出現的任何地方。比如你能代表你爸去你姥姥家干活。哈哈~~
4、依賴倒置原則DIP(the Dependency Inversion Principle DIP)
高層次的模塊不應該依賴于低層次的模塊，他們都應該依賴于抽象。抽象不應該依賴于具體實現，具體實現應該依賴于抽象。就是你出國要說你是中國人，而不能說你是哪個村子的。比如說中國人是抽象的，下面有具體的xx省，xx市，xx縣。你要依賴的是抽象的中國人，而不是你是xx村的。
5、接口分離原則ISP(the Interface Segregation Principle ISP)
設計時采用多個與特定客戶類有關的接口比采用一個通用的接口要好。就比如一個手機擁有打電話，看視頻，玩游戲等功能，把這幾個功能拆分成不同的接口，比在一個接口里要好的多。
1、抽象會使復雜的問題更加簡單化。
2、從以前面向過程的執行者，變成了張張嘴的指揮者。
3、面向對象更符合人類的思維，面向過程則是機器的思想
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
作者：豬_隊友
鏈接：https://www.jianshu.com/p/7a5b0043b035
來源：簡書
前言
有echarts使用經驗的同學可能遇到過這樣的場景，在window.onresize事件回調里觸發echartsBox.resize()方法來達到重繪的目的，resize事件是連續觸發的這意味著echarts實例會連續的重繪這是非常耗性能的。還有一個常見的場景在input標簽的input事件里請求后端接口，input事件也是連續觸發的，假設我輸入了“12”就會請求兩次接口參數分別是“1”和“12”，比浪費網絡資源更要命的是如果參數為“1”的請求返回數據的時間晚于參數為“12”的接口，那么我們得到的數據是和期望不符的。當然基于axios可以做很多封裝可以取消上一個請求或者通過攔截做處理，但還是從防抖入手比較簡單。
防抖和節流到底是啥
函數防抖（debounce）
解釋：當持續觸發某事件時，一定時間間隔內沒有再觸發事件時，事件處理函數才會執行一次，如果設定的時間間隔到來之前，又一次觸發了事件，就重新開始延時。
案例：持續觸發scroll事件時，并不立即執行handle函數，當1000毫秒內沒有觸發scroll事件時，才會延時觸發一次handle函數。
|
1
2
3
4
5
6
7
8
9
10
11
|
function debounce(fn, wait) {
let timeout = null
return function() {
if(timeout !== null) clearTimeout(timeout)
timeout = setTimeout(fn, wait);
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('scroll', debounce(handle, 1000))
|
addEventListener的第二個參數實際上是debounce函數里return回的方法，let timeout = null 這行代碼只在addEventListener的時候執行了一次 觸發事件的時候不會執行，那么每次觸發scroll事件的時候都會清除上次的延時器同時記錄一個新的延時器，當scroll事件停止觸發后最后一次記錄的延時器不會被清除可以延時執行，這是debounce函數的原理
函數節流（throttle）
解釋：當持續觸發事件時，有規律的每隔一個時間間隔執行一次事件處理函數。
案例：持續觸發scroll事件時，并不立即執行handle函數，每隔1000毫秒才會執行一次handle函數。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function throttle(fn, delay) {
var prev = Date.now()
return function() {
var now = Date.now()
if (now - prev > delay) {
fn()
prev = Date.now()
}
}
}
function handle() {
console.log(Math.random())
}
window.addEventListener('scroll', throttle(handle, 1000))
|
原理和防抖類似，每次執行fn函數都會更新prev用來記錄本次執行的時間，下一次事件觸發時判斷時間間隔是否到達預先的設定，重復上述操作。
防抖和節流都可以用于 mousemove、scroll、resize、input等事件，他們的區別在于防抖只會在連續的事件周期結束時執行一次，而節流會在事件周期內按間隔時間有規律的執行多次。
在vue中的實踐
在vue中實現防抖無非下面這兩種方法
封裝utils工具
把上面的案例改造一下就能封裝一個簡單的utils工具
utils.js
|
1
2
3
4
5
6
|
let timeout = null
function debounce(fn, wait) {
if(timeout !== null) clearTimeout(timeout)
timeout = setTimeout(fn, wait)
}
export default debounce
|
app.js
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<input type="text" @input="debounceInput($event)">
import debounce from './utils'
export default {
methods: {
debounceInput(E){
debounce(() => {
console.log(E.target.value)
}, 1000)
}
}
}
|
封裝組件
至于組件的封裝我們要用到$listeners、$attrs這兩個屬性，他倆都是vue2.4新增的內容，官網的介紹比較晦澀，我們來看他倆到底是干啥的：
$listeners: 父組件在綁定子組件的時候會在子組件上綁定很多屬性，然后在子組件里通過props注冊使用，那么沒有被props注冊的就會放在$listeners里，當然不包括class和style，并且可以通過 v-bind="$attrs" 傳入子組件的內部組件。
$listeners: 父組件在子組件上綁定的不含.native修飾器的事件會放在$listeners里，它可以通過 v-on="$listeners" 傳入內部組件。
簡單來說$listeners、$attrs他倆是做屬性和事件的承接，這在對組件做二次封裝的時候非常有用。
我們以element-ui的el-input組件為例封裝一個帶防抖的debounce-input組件
debounce-input.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<template>
<el-input v-bind="$attrs" @input="debounceInput"/>
</template>
<script>
export default {
data() {
return {
timeout: null
}
},
methods: {
debounceInput(value){
if(this.timeout !== null) clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
this.$emit('input', value)
}, 1000)
}
}
}
</script>
|
app.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<template>
<debounce-input placeholder="防抖" prefix-icon="el-icon-search" @input="inputEve"></debounce-input>
</template>
<script>
import debounceInput from './debounce-input'
export default {
methods: {
inputEve(value){
console.log(value)
}
},
components: {
debounceInput
}
}
</script>
|
上面組件的封裝用了$attrs，雖然不需要開發者關注屬性的傳遞，但是在使用上還是不方便的，因為把el-input封裝在了內部這樣對樣式的限定也比較局限。有接觸過react高階組件的同學可能有了解，react高階組件本質上是一個函數通過包裹被傳入的React組件，經過一系列處理，最終返回一個相對增強的React組件。那么在vue中可以借鑒這種思路嗎，我們來了解一下vue的函數式組件。
關于vue函數式組件
什么是函數式組件？
函數式組件是指用一個Function來渲染一個vue組件，這個組件只接受一些 prop，我們可以將這類組件標記為 functional，這意味著它無狀態 (沒有響應式數據)，也沒有實例 (沒有this上下文)。
一個函數式組件大概向下面這樣：
|
1
2
3
4
5
6
7
8
9
10
|
export default () => {
functional: true,
props: {
// Props 是可選的
},
// 為了彌補缺少的實例, 提供第二個參數作為上下文
render: function (createElement, context) {
return vNode
}
}
|
注意：在 2.3.0 之前的版本中，如果一個函數式組件想要接收 prop，則 props 選項是必須的。在 2.3.0 或以上的版本中，你可以省略 props 選項，所有組件上的特性都會被自動隱式解析為 prop。但是你一旦注冊了 prop 那么只有被注冊的 prop 會出現在 context.prop 里。
render函數的第二個參數context用來代替上下文this他是一個包含如下字段的對象：
vm.$slots API 里面是什么
slots用來訪問被插槽分發的內容。每個具名插槽 有其相應的屬性 (例如：v-slot:foo 中的內容將會在 vm.$slots.foo 中被找到)。default 屬性包括了所有沒有被包含在具名插槽中的節點，或 v-slot:default 的內容。
slots() 和 children 對比
你可能想知道為什么同時需要 slots() 和 children。slots().default 不是和 children 類似的嗎？在一些場景中，是這樣——但如果是如下的帶有子節點的函數式組件呢？
|
1
2
3
4
5
6
|
<my-functional-component>
<p v-slot:foo>
first
</p>
<p>second</p>
</my-functional-component>
|
對于這個組件，children 會給你兩個段落標簽，而 slots().default 只會傳遞第二個匿名段落標簽，slots().foo 會傳遞第一個具名段落標簽。同時擁有 children 和 slots()，因此你可以選擇讓組件感知某個插槽機制，還是簡單地通過傳遞 children，移交給其它組件去處理。
一個函數式組件的使用場景
假設有一個a組件，引入了 a1,a2,a3 三個組件，a組件的父組件給a組件傳入了一個type屬性根據type的值a組件來決定顯示 a1,a2,a3 中的那個組件。這樣的場景a組件用函數式組件是非常方便的。那么為什么要用函數式組件呢？一句話：渲染開銷低，因為函數式組件只是函數。
用函數式組件的方式來實現防抖
因為業務關系該防抖組件的封裝同時支持 input、button、el-input、el-button 的使用，如果是input類組件對input事件做防抖處理，如果是button類組件對click事件做防抖處理。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
const debounce = (fun, delay = 500, before) => {
let timer = null
return (params) => {
timer && window.clearTimeout(timer)
before && before(params)
timer = window.setTimeout(() => {
// click事件fun是Function input事件fun是Array
if (!Array.isArray(fun)) {
fun = [fun]
}
for (let i in fun) {
fun[i](params)
}
timer = null
}, parseInt(delay))
}
}
export default {
name: 'Debounce',
functional: true, // 靜態組件 當不聲明functional時該組件同樣擁有上下文以及生命周期函數
render(createElement, context) {
const before = context.props.before
const time = context.props.time
const vnodeList = context.slots().default
if (vnodeList === undefined){
console.warn('<debounce> 組件必須要有子元素')
return null
}
const vnode = vnodeList[0] || null // 獲取子元素虛擬dom
if (vnode.tag === 'input') {
const defaultFun = vnode.data.on.input
const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數
vnode.data.on.input = debounceFun
} else if (vnode.tag === 'button') {
const defaultFun = vnode.data.on.click
const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數
vnode.data.on.click = debounceFun
} else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-input') {
const defaultFun = vnode.componentOptions.listeners.input
const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數
vnode.componentOptions.listeners.input = debounceFun
} else if (vnode.componentOptions && vnode.componentOptions.tag === 'el-button') {
const defaultFun = vnode.componentOptions.listeners.click
const debounceFun = debounce(defaultFun, time, before) // 獲取節流函數
vnode.componentOptions.listeners.click = debounceFun
} else {
console.warn('<debounce> 組件內只能出現下面組件的任意一個且唯一 el-button、el-input、button、input')
return vnode
}
return vnode
}
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<template>
<debounce time="300" :before="beforeFun">
<input type="text" v-model="inpModel" @input="inputChange"/>
</debounce>
</template>
<script>
import debounce from './debounce'
export default {
data() {
return {
inpModel: 1
}
},
methods: {
inputChange(e){
console.log(e.target.value, '防抖')
},
beforeFun(e){
console.log(e.target.value, '不防抖')
}
},
components: {
debounce
}
}
</script>
|
原理也很簡單就是在vNode中攔截on下面的click、input事件做防抖處理，這樣在使用上就非常簡單了。
自定義指令 directive
我們來思考一個問題，函數式組件封裝防抖的關節是獲取vNode，那么我們通過自定義指令同樣可以拿到vNode，甚至還可以得到原生的Dom，這樣用自定義指令來處理會更加方便。。。。。。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
轉自：腳本之家
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
export default { data() { return { min: 1, max: 10, timer:null //定時器名稱 } }, mounted() { this.add(); }, methods: { add() { let _this = this; _this.timer = setInterval(function(){//定時器開始 _this.min++; if(_this.min == _this.max){ clearInterval(_this.timer);// 滿足條件時 停止計時 } },1000) }, } };
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
好不容易是用wordpress搭建好了我的網站，找了幾個不錯的插件提升了一下性能，也解決了安裝主題時出現的各種問題，終于能夠正常地使用了。正當我興致沖沖地打開文章編輯器，正打算開始寫我的第一篇博客的時候，又有一個意外的錯誤出現了——那就是wordpress的默認編輯器古騰堡。
我上網搜索了好半天，好像大多數人都有遇到這個問題，古騰堡是WordPress十多年來第一次更換的全新的編輯器，從他的外觀來看，確實是十分的舒服，功能也似乎很完善，可惜還是有些小bug。
網上主要的解決方法有三種：
1、切換瀏覽器。他們都說換成谷歌瀏覽器的時候就不會出現這個問題了。但是我一開始用的就是谷歌瀏覽器，所以對我不起作用。
2、清楚瀏覽器緩存， 這個我也照做了，也是沒有什么效果。
3、安裝Classic Editor 插件，我就是采用這個辦法解決的。而且Classic Editor 插件可以切換區塊編輯模式和經典編輯模式，雖然經典編輯模式十分的丑陋，而且用的也不是特別舒服，但是我意外地發現，區塊編輯模式就是原來的古騰堡編輯器，在安裝了插件之后，原來的意外的錯誤就再也不出現了，而且當我把Classic Editor禁用了之后，也仍然不見原來的報錯。
雖然問題是解決了，但可惜我剛開始使用wordpress，還沒有開啟錯誤日志，所以也不知道這個問題到底是為什么出現，在網上搜索了好久，也不能確定我這個問題到底出現在哪里。
反正結果還是好的，就先在這里埋個坑吧，以后再遇到的時候再回來補充！
另外，如果你有興趣，或者是有問題想要與我探討，歡迎來訪問我的博客：https:mu-mu.cn/blog 作者：貪玩的木木 https://www.bilibili.com/read/cv6589030/ 出處：bilibili
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在Envato Tuts +的代碼類別中，我們涵蓋了很多 內容。 范圍從諸如如何使用一些最新JavaScript框架編寫代碼到如何通過諸如WordPress和OpenCart之類的內容管理系統實現某些目的 。
因為我們傾向于將大部分內容集中在已經對計算有一定程度的了解的人們，所以我們經常假設在開始教程之前已經做好了某些準備。
例如，有時我們假設您在進入實際框架之前已經掌握JavaScript的知識。 或者，也許我們假設您在開始有關如何使用新庫構建Web應用程序的教程之前對PHP或Ruby有一定的了解。
在我們發布的“ 如何做”文章中，我們正在努力提供教程，向讀者提供建立和運行特定軟件所絕對必要的步驟，尤其是那些與很多軟件兼容的軟件。在Envato市場可用。
如果您有興趣使用WordPress構建網站，那么您應該對WordPress主題應該有一個有效的定義，并且對如何安裝WordPress主題有一個實際的了解。
在了解如何安裝WordPress主題之前，讓我們定義WordPress主題應該是什么。 我區分這從一個WordPress主題是什么，因為你經常會發現，做更多的比他們應該的主題。 如果您選擇更改主題的設計，這些主題將很難嘗試其他主題。
我將在稍后詳細討論。
現在，讓我們使用WordPress Codex中提供的定義：
從根本上講，WordPress主題系統是一種“蒙皮”您的Weblog的方法。 然而，它不僅僅是一個“皮膚”。 對您的網站進行外觀設計意味著僅更改設計。 WordPress主題可以更好地控制您網站上材料的外觀和呈現方式。
從此定義中得出的主要結論是，WordPress主題提供了您網站的演示。 也就是說，它負責使您的網站或博客具有特定外觀。
它會影響您所看到的所有內容，設置內容樣式以及影響字體，配色方案等。
安裝WordPress主題時，請務必注意其提供的功能。 現代主題通常不僅僅包括演示。 也就是說，它們引入了功能。
功能可以定義為任何可以改變主題行為的東西。 例如，假設您的主題在帖子編輯器屏幕上提供了某種類型的搜索引擎優化選項。
并且由于這不在表示的范圍之內，因此被認為是功能。 如果主題提供了類似的內容，那么您就有遭受“主題鎖定”之苦的危險。
它是這樣工作的：安裝一個主題，它不僅提供演示文稿（例如上面概述的SEO功能）。 如果您選擇將站點更新為不提供完全相同的SEO功能實現的新主題，則會丟失它。 所有的。
您可能會得到一個很棒的設計，但是您已經失去了為主題提供所有SEO信息的工作。 因此，您要么被鎖定使用與開始時相同的主題，要么面臨使用新主題并失去所有工作的麻煩。
最終，主題不應該包括這種類型的功能。 功能保留給插件。 這是我們將在另一篇文章中討論的內容。
現在，請記住主題應該全部與演示有關。 如果您可以使用主題鎖定，那么選擇一個可以提供很多功能的主題可能就可以了。 但是，如果您希望最終不時更改設計，請嘗試堅持嚴格遵循修改網站外觀的主題。
話雖如此，現在我們可以討論安裝WordPress主題所需的過程。 實際上，有兩種方法可以執行此操作：
盡管第一個選項可以說是最簡單的，但我們將在本指南中介紹這兩個選項，以確保為您提供了最全面的信息。
請注意，本指南假定您已經在計算機或Web主機上安裝了WordPress。 我們將逐步完成獲取主題并通過WordPress或FTP進行安裝的過程。
話雖如此，讓我們開始吧。
網上有很多地方可以下載WordPress主題。 但是，從任何地方下載主題并不總是安全的。 審查主題提供者的聲譽很重要。
這超出了本文的范圍； 但是，從WordPress主題存儲庫或Envato Market中選擇主題不會出錯。
出于本教程的目的，我們將使用免費提供的第二十六主題。 首先，我們將從WordPress中安裝它，然后我們將了解如何通過S / FTP安裝它。
對于以下步驟，我假設您是從WordPress儀表板開始的：
無論您選擇使用哪種方法來安裝主題，這都是我們開始本教程步驟的地方。
要從WordPress本身安裝主題，請單擊“ 外觀”菜單，然后選擇“ 主題”選項。
從那里，您將看到所有已安裝的主題。
接下來，單擊屏幕頂部的添加新按鈕。 從這里開始，您將進入一個如下所示的屏幕：
注意 頁面頂部的“ 搜索主題”字段。 在此字段中，輸入“ 二十十六”（不帶引號），它將返回以下屏幕：
之后，單擊選項以安裝主題。 之后，WordPress將為您提供預覽主題或激活主題的選項。 對于通過S / FTP上傳主題的用戶，也將提供相同的選項。
因此，目前，我們將看一下通過上傳文件來安裝主題的必要步驟。 如果您對以下替代步驟不感興趣，則可以跳至下面的“ 激活主題”部分。
此版本的主題安裝假定您熟悉術語服務器，端口，用戶名和密碼。 它還假定您熟悉wp-content和theme目錄。 如果不是這樣，那么最好的做法就是堅持上述方法。
但是，如果以上都不是行話，那就繼續吧。 就本演示而言，我將使用Transmit作為我的S / FTP客戶端； 但是，請隨時使用您喜歡的任何客戶端。
首先，我們需要從WordPress Theme Repository下載二十一十六 。
一旦您單擊Download ，這會將主題的zip文件放置在您選擇的目錄中。
接下來，您將要提取存檔。 這將在包含zip文件的目錄中創建一個包含所有主題文件的子目錄。
之后，連接到您的Web服務器并導航到WordPress安裝的wp-content/themes目錄。
上載提取主題文件時創建的目錄。 從那里跳到WordPress儀表板，然后導航到“ 主題”頁面。 您應該看到《 二十一歲月》的副本 出現在主題列表中。
此時，無論我們如何安裝主題，我們都準備好繼續激活主題。 就是說，如果您選擇使用S / FTP或選擇從WordPress中安裝主題，則會為您提供相同的選項集。
所以做吧。
通過WordPress下載主題或通過S / FTP上傳主題之后，便擁有了激活主題并更新網站外觀所需的一切。
獲得主題之后，應該為您提供激活主題的選項：
在這里，您可以選擇 實時預覽以了解如何更改當前內容，或者您可以單擊“ 激活”繼續進行設置。 我選擇與后者一起使用。
完成后，您將看到以下屏幕：
從那里開始，您應該能夠像在安裝此主題之前一樣繼續使用WordPress。 這意味著您可以繼續添加帖子，頁面，類別等。
根據主題，您還可能有機會更新標題圖像，背景圖像等。 請注意，這取決于已安裝的主題。
要確切了解您的主題提供了什么，請務必參考文檔。
如您所見，安裝WordPress主題是一個相對簡單的過程，尤其是從WordPress應用程序中進行安裝時。 即使您對使用FTP客戶端的過程感到有些恐懼，一旦上傳了文件，激活主題仍然相對容易。
其次，請注意區分想要的主題類型很重要。 您是否想要一個具有很多功能而您永遠都不會改變的主題，還是想要一個與一組插件完美配合，可以獨立于該功能更改網站外觀的主題？
無論哪種情況，您都應該擁有選擇主題，安裝主題并以最適合自己的方式激活它所需的一切。
最后，如果您要尋找適合幾乎所有情況的主題主題，請務必查看Envato Market中提供的功能 。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
部分借鑒自：csdn
原文鏈接：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
html {
height: 100%;
}
.container {
width: 400px;
margin: 200px auto;
height: 100px;
position: relative;
}
.box {
width: 100px;
height: 100px;
position: absolute;
float: left;
}
#rigth {
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
}
#left {
position: absolute;
left: 0px;
background-color: rgba(0, 0, 0, 0.3);
top: 50%;
transform: translateY(-50%);
}
span:hover {
cursor: pointer;
color: red;
}
ul {
width: 100px;
height: 100px;
transform-style: preserve-3d;
float: left;
transition: all 1s;
}
.top {
background-color: red;
transform: translateY(50px) rotateX(-90deg);
transform: translateY(50px) rotateX(-90deg);
background: url('./image/4.jpg') no-repeat;
}
.footer {
transform: translateY(-50px) rotateX(90deg);
background: url('./image/2.jpg') no-repeat;
}
.left {
transform: translateX(50px) rotateY(90deg)
}
.rigth {
background-color: yellow;
transform: translateX(-50px) rotateY(-90deg);
}
.Front {
background-color: pink;
transform: translateZ(50px);
background: url('./image/1.jpeg') no-repeat;
}
.behind {
background-color: blue;
transform: translateZ(-50px) rotateX(-180deg);
background: url('./image/3.jpg') no-repeat;
}
/* 前 */
.container ul:nth-child(2) .Front {
background-position: -100px 0;
}
.container ul:nth-child(3) .Front {
background-position: -200px 0;
}
.container ul:nth-child(4) .Front {
background-position: -300px 0;
}
/* 底部 */
.container ul:nth-child(2) .footer {
background-position: -100px 0;
}
.container ul:nth-child(3) .footer {
background-position: -200px 0;
}
.container ul:nth-child(4) .footer {
background-position: -300px 0;
}
/* 后面 */
.container ul:nth-child(2) .behind {
background-position: -100px 0;
}
.container ul:nth-child(3) .behind {
background-position: -200px 0;
}
.container ul:nth-child(4) .behind {
background-position: -300px 0;
}
/* 上面 */
.container ul:nth-child(2) .top {
background-position: -100px 0;
}
.container ul:nth-child(3) .top {
background-position: -200px 0;
}
.container ul:nth-child(4) .top {
background-position: -300px 0;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li class="box top"></li>
<li class="box footer"></li>
<li class="box left"></li>
<li class="box rigth"></li>
<li class="box Front"></li>
<li class="box behind"></li>
</ul>
<ul>
<li class="box top"></li>
<li class="box footer"></li>
<li class="box left"></li>
<li class="box rigth"></li>
<li class="box Front"></li>
<li class="box behind"></li>
</ul>
<ul>
<li class="box top"></li>
<li class="box footer"></li>
<li class="box left"></li>
<li class="box rigth"></li>
<li class="box Front"></li>
<li class="box behind"></li>
</ul>
<ul>
<li class="box top"></li>
<li class="box footer"></li>
<li class="box left"></li>
<li class="box rigth"></li>
<li class="box Front"></li>
<li class="box behind"></li>
</ul>
<span id="rigth">下張</span>
<span href="JavaScript:;" id="left">上張</span>
</div>
</body>
<script>
var rigth = document.getElementById("rigth")
var left = document.getElementById("left")
var ul = document.querySelectorAll(".container ul")
var index = 0
var flags = false
rigth.onclick = function () {
if (flags == false) {
flags = true
index++
for (var i = 0; i < ul.length; i++) {
ul[i].style.transform = "rotateX(" + index * 90 + "deg)"
ul[i].style.transitionDelay = "" + i * 0.3 + "s"
}
setTimeout(function () {
flags = false
}, 2000)
}
}
left.onclick = function () {
if (flags == false) {
flags = true
index--
for (var i = 0; i < ul.length; i++) {
ul[i].style.transform = "rotateX(" + index * 90 + "deg)"
ul[i].style.transitionDelay = "" + i * 0.3 + "s"
}
setTimeout(function () {
flags = false
}, 2000)
}
}
</script>
</html>
作者：yuanzhuang
鏈接：https://www.jianshu.com/p/10c90c482795
來源：簡書
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
-
旋轉正方形
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-
<meta charset="utf-8">
-
<title>旋轉立方體</title>
-
<style type="text/css">
-
.stage{
-
position: relative;
-
perspective: 800px;
-
}
-
@keyframes rotate-frame{ /* 設置動畫效果 */
-
0% {
-
transform: rotateX(0deg) rotateY(0deg);
-
}
-
-
50% {
-
transform: rotateX(360deg) rotateY(0deg);
-
}
-
100% {
-
transform: rotateX(360deg) rotateY(360deg);
-
}
-
}
-
.container{
-
width: 450px;
-
height: 450px;
-
margin: 0 auto;
-
transform-style:preserve-3d;
-
animation: rotate-frame 8s infinite linear;
-
animation-timing-function: all;
-
animation-direction: normal;
-
-
animation-fill-mode: backwards;
-
-
transform-origin: 50% 50% 75px;
-
-
/*background: yellow; 容器屏幕背景色*/
-
}
-
.container:hover{
-
/*覆蓋時暫停動畫*/
-
animation-play-state: paused;
-
}
-
.side{
-
width: 150px;
-
height: 150px;
-
position: absolute;
-
text-align: center;
-
line-height: 150px;
-
font-size: 50px;
-
}
-
.top{
-
left: 150px;
-
top: 0;
-
transform: rotateX(-90deg); /* 設置角度 */
-
transform-origin: bottom;
-
background-color: rgba(0,0,255,0.5);
-
}
-
.bottom{
-
left: 150px;
-
top: 300px;
-
transform: rotateX(90deg);
-
transform-origin: top;
-
background-color: rgba(0,255,0,0.5);
-
}
-
.left{
-
left: 0;
-
top: 150px;
-
transform: rotateY(90deg);
-
transform-origin: right;
-
background-color: rgba(255,0,0,0.5);
-
}
-
.right{
-
left: 300px;
-
top: 150px;
-
transform: rotateY(-90deg);
-
transform-origin: left;
-
background-color: rgba(0,0,100,0.5);
-
}
-
.front{
-
left: 150px;
-
top: 150px;
-
transform: translateZ(150px);
-
background-color: rgba(0,100,0,0.5);
-
}
-
.back{
-
left: 150px;
-
top: 150px;
-
background-color: rgba(100,0,0,0.5);
-
}
-
.rotateX180{
-
/*讓倒置的數字倒置回正常狀態*/
-
transform: rotateX(180deg);
-
}
-
-
</style>
-
-
</head>
-
<body>
-
<div class="stage">
-
<div class="container">
-
<div class="side top" >1</div>
-
<div class="side bottom">2</div>
-
<div class="side left">3</div>
-
<div class="side right">4</div>
-
<div class="side front">5</div>
-
<div class="side back">6</div>
-
</div>
-
</div>
-
</body>
-
</html>
-
紙片旋轉
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<style type="text/css">
-
.zpbox{
-
/*設置3D視角*/
-
perspective: 800px;
-
perspective-origin: bottom right;
-
}
-
.box{
-
height: 200px;
-
width: 100px;
-
margin: 50px auto;
-
-
/*preserve-3d 指定子元素定位在三維空間內 */
-
transform-style: preserve-3d;
-
/*指定變換為：linear-線性過渡*/
-
transition-timing-function：linear;
-
-
/*指定旋轉動畫*/
-
animation-name: action_b1;
-
animation-duration: 4s;
-
animation-timing-function: all;
-
animation-direction: normal;
-
animation-iteration-count: infinite;
-
animation-fill-mode: backwards;
-
-
position: relative;
-
}
-
.box:hover{
-
/*覆蓋時暫停動畫*/
-
animation-play-state: paused;
-
}
-
-
.b1{
-
/*聲明第一個卡片為浮動，使得兩個卡片能重疊*/
-
float: left;
-
height: 200px;
-
width: 100px;
-
background-color: #000;
-
text-align:center;
-
line-height: 100px;
-
color: #fff;
-
font-size:50px;
-
}
-
.b2{
-
height: 200px;
-
width: 100px;
-
background-color: #000;
-
text-align:center;
-
line-height: 100px;
-
color: #fff;
-
font-size:50px;
-
-
/*第二個卡片旋轉90度*/
-
transform: rotateX(90deg);
-
-
/*第二個卡片位于中間位置*/
-
position: absolute;
-
margin-left: 0;
-
margin-top: 0;
-
}
-
.rotateX180{
-
/*讓倒置的2、4數字倒置回正常狀態*/
-
transform: rotateX(180deg);
-
}
-
-
@keyframes action_b1{
-
100%{
-
transform: rotateX(-360deg);
-
}
-
}
-
-
-
-
-
</style>
-
</head>
-
<body>
-
<div class="zpbox">
-
<div class="box">
-
<div class="b1">
-
<div>1</div>
-
<div class="rotateX180">3</div>
-
</div>
-
<div class="b2">
-
<div>2</div>
-
<div class="rotateX180">4</div>
-
</div>
-
</div>
-
</div>
-
-
-
</body>
-
</html>
-
輪播圖3D
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Document</title>
-
<style type="text/css">
-
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } /*去掉多余的像素*/
-
body{
-
perspective: 800px;
-
}
-
.box{
-
width: 800px;
-
height: 360px;
-
margin: 100px auto;
-
text-align:center;
-
position: relative;
-
left: 50%;
-
margin-left: -400px;
-
/*background-color: #eee;*/
-
transform-style: preserve-3d; /*設置為3D模式*/
-
/*transform: rotateY(-30deg) rotateX(57deg);*/
-
/*transition:5s ease;*/
-
animation-name: animate;
-
animation-duration: 10s;
-
animation-iteration-count: infinite;
-
}
-
-
.box>div{
-
width: 800px;
-
height: 360px;
-
position: absolute;
-
}
-
.box>.up{
-
background: url(flower.jpg); /*引入照片*/
-
transform: rotateX(90deg) translateZ(180px); /* 設置角度 */
-
}
-
.box>.down{
-
background: url(flower.jpg);
-
transform: rotateX(90deg) rotateZ(180deg)translateZ(-180px);
-
}
-
.box>.before{
-
background: url(flower.jpg);
-
transform: translateZ(180px);
-
}
-
.box>.after{
-
background: url(flower.jpg);
-
transform: translateZ(-180px) rotateX(180deg);
-
}
-
.box:hover{
-
animation-play-state: paused; /* 當鼠標懸停的時候停止 */
-
}
-
@keyframes animate{
-
0%{
-
-
}
-
25%{
-
transform: rotateX(90deg);
-
}
-
50%{
-
transform: rotateX(180deg);
-
}
-
75%{
-
transform: rotateX(270deg);
-
}
-
100%{
-
transform: rotateX(360deg);
-
}
-
</style>
-
</head>
-
<body>
-
<div class="box">
-
<div class="up"></div>
-
<div class="down"></div>
-
<div class="before"></div>
-
<div class="after"></div>
-
</div>
-
</body>
-
</html>
-
輪播
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>輪播</title>
-
<style>
-
.frame{
-
position:absolute;
-
margin: 50px 200px;
-
width:280px;
-
height:200px;
-
overflow:hidden;
-
border-radius:6px;
-
background-color: #000;
-
}
-
.imgdiv img{
-
float:left;
-
width:280px;
-
height:200px;
-
}
-
.imgdiv {
-
position: absolute;
-
width: 1500px;
-
}
-
.play{
-
animation: lbt 10s ;
-
animation-direction: normal;
-
animation-iteration-count: infinite;
-
}
-
.play:hover{
-
animation-play-state: paused;
-
}
-
-
@keyframes lbt {
-
0%,20% {
-
margin-left: 0px;
-
}
-
20%,40% {
-
margin-left: -300px;
-
}
-
40%,60% {
-
margin-left: -600px;
-
}
-
60%,80% {
-
margin-left: -900px;
-
}
-
80%,100% {
-
margin-left: -1200px;
-
}
-
}
-
-
</style>
-
</head>
-
<body>
-
<div class="frame" >
-
<div class="imgdiv play">
-
<img src="lunbo.jpg" > <!-- 引入照片 -->
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
<img src="lunbo.jpg" >
-
</div>
-
</div>
-
</body>
-
</html>
-
1
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
部分借鑒自：csdn
原文鏈接：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
聊一聊力導向圖。力導向圖在echarts等快捷的可視化工具中都有非常方便的實現方式。來看看d3.js是如何實現的。
先來一張d3.js官網實現的力導向圖的照片：
接下來解釋一下d3.js中實現此力導向圖的過程。
<!DOCTYPE html> <meta charset="utf-8"> <style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } </style> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> // 定義一個svg畫布 var svg = d3.select("svg"), // 獲取svg畫布的寬度 width = +svg.attr("width"), // 獲取svg畫布的高度 height = +svg.attr("height"); // 定義一個顏色函數 // d3.scaleOrdinal()函數用來定義一個序列，其中的參數d3.schemeCategory20代表序 // 列函數的值域，這里d3.schemeCategory20指的是由RGB十六進制字符串表示的二十種分類 // 顏色的數組。因此，color()函數的值域就是離散的20中顏色值 var color = d3.scaleOrdinal(d3.schemeCategory20); // 創建一個力學模擬器 // d3.forceSimulation()函數用來創建一個空的模擬器 var simulation = d3.forceSimulation() // simulation.force(name,[force])函數的作用是：如果指定了力force，則為指 // 定的名稱name分配力并返回該模擬。 如果未指定力，則返回具有指定名稱的力，如果 // 沒這樣的力，則返回undefined。 （默認情況下，新的模擬沒有力量。） // d3.forceLink()函數用來創建一個空的link力數組 // d3.forceLink().id()用來指定link力數組中每個節點的id的獲取方式 .force("link", d3.forceLink().id(function(d) { return d.id; })) // 創建一個charge數組，forceManyBody()返回一個新的多體力數組 .force("charge", d3.forceManyBody()) // d3.forceCenter()用指定的x坐標和y坐標創建一個新的居中力。 // 如果未指定x和y，則默認為?0,0?。 .force("center", d3.forceCenter(width / 2, height / 2)); // 讀取數據，該例子中的數據是雨果的《悲慘世界》中的人物關系信息。 // 通過力學模擬，人物關系相近的節點會比較接近；反之，節點會比較疏遠 d3.json("miserables.json", function(error, graph) { if (error) throw error; // 定義人物節點之間連線的信息 var link = svg.append("g")
.attr("class", "links") // 用line元素來繪制 .selectAll("line") // 綁定json文件中的links數據 .data(graph.links)
.enter().append("line") // 人物節點之間連接線的粗細通過連接線的value字段來計算，value越大，連接線 // 越粗 .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); // 定義人物節點信息 var node = svg.append("g")
.attr("class", "nodes") // 人物節點通過圓來繪制 .selectAll("circle") // 為人物節點綁定nodes數據 .data(graph.nodes)
.enter().append("circle") // 設置節點半徑 .attr("r", 5) // 設置節點的填充色，通過節點的group屬性來計算節點的填充顏色 .attr("fill", function(d) { return color(d.group); }) // 以定義的這些人物節點為參數，調用drag()函數 // 綁定拖拽函數的三個鉤子，即拖拽開始、拖拽中、拖拽結束 .call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended)); //為人物節點綁定文字 node.append("title")
.text(function(d) { return d.id; }); // 為力模擬器綁定節點數據 // 會為每個節點自動添加可視化時所需的index,vx,xy,x,y五個字段信息 // 并且為simulation內部計時器tick監聽綁定動作，來繪制圖形 simulation
.nodes(graph.nodes)
.on("tick", ticked);// 此處在每次tick時繪制力導向圖 // 為力模擬器綁定連接線數據 // 調用結束后，會為每個連接線添加可視化時所需要的index,vx,vy,x,y五個字段信息 simulation.force("link")
.links(graph.links); // 定義simulation內部計時器tick每次結束時的動作 function ticked() { // 每次tick計時到時，連接線的響應動作 // 設置連接線兩端的節點的位置 link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; }); // 每次tick計時到時，節點的響應動作 // 設置節點的圓心坐標 node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
}
}); // 定義開始拖拽節點時的動作 function dragstarted(d) { // restart()方法重新啟動模擬器的內部計時器并返回模擬器。 // 與simulation.alphaTarget或simulation.alpha一起使用時，此方法可用于在交互 // 過程中進行“重新加熱”模擬，例如在拖動節點時，在simulation.stop暫停之后恢復模 // 擬。 if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
} // 定義拖拽中的動作 function dragged(d) { d.fx = d3.event.x;
d.fy = d3.event.y;
} // 定義拖拽結束的動作 function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
} </script>
至此，力導向圖解析完畢，這篇中有很多關于力學的專業的功能函數，理解起來有點難度。今天周日，起床后第一件事就是把這篇完結了，歐耶~
這篇文
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
部分借鑒自：csdn
原文鏈接：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
input失去焦點和獲得焦點
鼠標在搜索框中點擊的時候里面的文字就消失了。
我們在做網站的時候經常會用到搜索框的獲得焦點和失去焦點的事件，因為懶，每次都去寫非常的煩，于是就一勞永逸，遇到類似情況就來調用一下就OK 了
相關js代碼:
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#username').focus(function ()//得到教室時觸發的時間
{
$('#username').val('');
})
$('#username').blur(function () 失去焦點時觸發的時間
{
if ($('#username').val() == 'marry') {
$('#q').text('用戶名已存在！')
}
else { $('#q').text('ok!') }
})
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
部分借鑒自：腳本之家
原文鏈接：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn