整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          利用Css3樣式屬性Cursor來更換自定義個性化鼠

          利用Css3樣式屬性Cursor來更換自定義個性化鼠標指針(光標)

          而今,我們縱向的回顧整個大前端的歷史,不難發現,人們對前端的審美要求越來越高,越來越嚴苛,與此同時,人們對追求美的體驗是也極致的,從理性到感性,從平面到幾何,從現實到虛擬,所以從某種角度來說,作為前端工程師,他們所追求的東西往往和人類軟件核心理念南轅北轍,因為人類的終極追求是個性,絕不是共性,換句話說,大家都一樣就不好玩兒了。

          那么作為web前端,追求個性的手段手段之一就是鼠標指針的更換,早在css2時代,Cursor屬性就可以對象鼠標指針光標進行控制,可以根據自身需要選擇設置鼠標指針樣式,代碼如下:

          <head>
              <title>cursor屬性</title>
          </head>
          <body>
              <p>請把鼠標移動到單詞上,可以看到鼠標指針發生變化:</p>
              <span style="cursor:auto">Auto......</span><br />
              <span style="cursor:crosshair">Crosshair......</span><br />
              <span style="cursor:default">Default......</span><br />
              <span style="cursor:pointer">Pointer......</span><br />
              <span style="cursor:move">Move......</span><br />
              <span style="cursor:e-resize">e-resize......</span><br />
              <span style="cursor:ne-resize">ne-resize......</span><br />
              <span style="cursor:nw-resize">nw-resize......</span><br />
              <span style="cursor:n-resize">n-resize......</span><br />
              <span style="cursor:se-resize">se-resize......</span><br />
              <span style="cursor:sw-resize">sw-resize......</span><br />
              <span style="cursor:s-resize">s-resize......</span><br />
              <span style="cursor:w-resize">w-resize......</span><br />
              <span style="cursor:text">text......</span><br />
              <span style="cursor:wait">wait......</span><br />
              <span style="cursor:help">help......</span>
          </body>
          </html>

          不過這些屬性僅僅是更換系統自定義的一些默認樣式,毫無新意,當然也不能滿足所有用戶的需求,特別對于一些追求時尚和個性化的Web應用。因此,CSS允許用戶創建自己的鼠標光標圖片,并保存為 .cur 的光標文件,然后通過 cursor屬性來使用它們。如:

          cursor: url(cursors/cursor.cur) ;


          上述規則表示,要求瀏覽器加載名稱為 cursor.cur 光標文件,并將它用作鼠標光標。當然,瀏覽器也有可能不支持 .cur 格式的光標文件,或光標文件無法正常加載。因此,大多數瀏覽器要求必須指定一個備用的光標,否則,cursor屬性無效。如:

          cursor: url(cursors/cursor.cur), pointer;

          除了更換鼠標指針,我們也可以稍加一些變化,比如鼠標懸停在超鏈接的時候,語義化操作往往需要給用戶一點提示:

          a:hover, a:focus, a:active, a.active {
          	color: #fec503;
          	cursor:url(././mouse/breeze/Hand.cur), pointer;
          }


          效果是下面這樣:

          這里我使用的鼠標風格是在業界鼎鼎有名的 Breeze

          當然了由于不同瀏覽器所支持的光標文件格式不盡相同,Opera和IE僅支持 .cur 格式,Firefox、Chrome和Safari既支持 .cur 格式,也支持常見的 .jpg、.gif、.jpg 等格式。

          所以從通用性的角度來看,.cur格式是最保險的,不過也不用擔心,如果出現不兼容的情況,系統會選擇默認的樣式。

          值得一提的是,對于.cur文件來說,尺寸最好選擇不大于于32*32像素的,因為通過樣式進行樣式的加載會損耗一些網頁性能,同時過大的光標也會影響用戶的點選。

          最后,如果手里有.cur的鼠標光標圖片樣式,這些圖片不僅僅可以應用在web網站上,像電腦系統也可以使用比如win10,ubuntu或者mac,這里推薦一個鼠標指針風格網站的下載地址:https://zhutix.com/tag/cursors/ 這上面的鼠標指針風格不能說清新脫俗吧,但是也比那些爛大街的殺馬特造型要好看多了。

          S 鼠標框選(頁面選擇)時返回對應的 HTML 或文案內容

          一、需求背景

          1、項目需求

          當用戶進行鼠標框選選擇了頁面上的內容時,把選擇的內容進行上報。

          2、需求解析

          雖然這需求就一句話的事,但是很顯然,沒那么簡單...

          因為鼠標框選說起來簡單,就是選擇的內容,但是這包含很多中情況,比如:只選擇文案、選擇圖片、選擇輸入框、輸入框中的內容選擇、iframe、等。

          簡單總結,分為以下幾點:

          1. 選擇文案時
          2. 選擇圖片、svg、iframe、video、audio 等標簽時
          3. 選擇 input、select、textarea 等標簽時
          4. 選擇 input、textarea 標簽內容時
          5. 選擇類似 字符時
          6. 鍵盤全選時
          7. 鼠標右鍵選擇
          8. 以上各模塊結合時
          9. 當包含標簽的時候,返回 html 結構,只有文本時返回文本內容

          二、技術要點

          鼠標框選包含以下幾點:

          1. debounce 防抖
          2. addEventListener 事件監聽
          3. Range 對象
          4. Selection 對象

          1、debounce

          老生常談的技術點了,這里不能用節流,因為肯定不能你鼠標選擇的時候,隔一段時間返回一段內容,肯定是選擇之后一起返回。

          這里用 debounce 主要也是用在事件監聽和事件處理上。

          • 【debounce 掘金】
          • 【debounce CSDN】

          2、addEventListener

          事件監聽,因為鼠標選擇,不僅僅是鼠標按下到鼠標抬起,還包括雙擊、右鍵、全選。

          需要使用事件監聽對事件作處理。

          • 【addEventListener MDN】

          3、Range

          Range 接口表示一個包含節點與文本節點的一部分的文檔片段。

          Range 是瀏覽器原生的對象。

          3.1. 創建 Range 實例,并設置起始位置

          <body>
            <ul>
              <li>Vite</li>
              <li>Vue</li>
              <li>React</li>
              <li>VitePress</li>
              <li>NaiveUI</li>
            </ul>
          </body>
          <script>
            // 創建 Range 對象
            const range=new Range()
            const liDoms=document.querySelectorAll("li");
            // Range 起始位置在 li 2
            range.setStartBefore(liDoms[1]);
            // Range 結束位置在 li 3
            range.setEndAfter(liDoms[2]);
            // 獲取 selection 對象
            const selection=window.getSelection();
            // 添加光標選擇的范圍
            selection.addRange(range);
          </script>


          可以看到,選擇內容為第二行和第三行

          3.1.1 瀏覽器兼容情況


          3.2. Range 屬性

          1. startContainer:起始節點。
          2. startOffset:起始節點偏移量。
          3. endContainer:結束節點。
          4. endOffset:結束節點偏移量。
          5. collapsed:范圍的開始和結束是否為同一點。
          6. commonAncestorContainer:返回完整包含 startContainer 和 endContainer 的最深一級的節點。

          3.2.1. 用我們上面創建的實例來看下 range 屬性的值


          3.2.2. 如果我們只選擇文本內容時

          只選擇 li 中的 itePres


          可以看出 range 屬性對應的值


          3.3. Range 方法

          1. cloneContents():復制范圍內容,并將復制的內容作為 DocumentFragment 返回。
          2. cloneRange():創建一個具有相同起點/終點的新范圍, 非引用,可以隨意改變,不會影響另一方。
          3. collapse(toStart):如果 toStart=true 則設置 end=start,否則設置 start=end,從而折疊范圍。
          4. compareBoundaryPoints(how, sourceRange):兩個范圍邊界點進行比較,返回一個數字 -1、0、1。
          5. comparePoint(referenceNode, offset):返回-1、0、1具體取決于 是 referenceNode 在 之前、相同還是之后。
          6. createContextualFragment(tagString):返回一個 DocumentFragment。
          7. deleteContents():刪除框選的內容。
          8. extractContents():從文檔中刪除范圍內容,并將刪除的內容作為 DocumentFragment 返回。
          9. getBoundingClientRect():和 dom 一樣,返回 DOMRect 對象。
          10. getClientRects():返回可迭代的對象序列 DOMRect。
          11. insertNode(node):在范圍的起始處將 node 插入文檔。
          12. intersectsNode(referenceNode):判斷與給定的 node 是否相交。
          13. selectNode(node):設置范圍以選擇整個 node。
          14. selectNodeContents(node):設置范圍以選擇整個 node 的內容。
          15. setStart(startNode, startOffset):設置起點。
          16. setEnd(endNode, endOffset):設置終點。
          17. setStartBefore(node):將起點設置在 node 前面。
          18. setStartAfter(node):將起點設置在 node 后面。
          19. setEndBefore(node):將終點設置為 node 前面。
          20. setEndAfter(node):將終點設置為 node 后面。
          21. surroundContents(node):使用 node 將所選范圍內容包裹起來。

          3.4. 創建 Range 的方法

          3.4.1. Document.createRange

          const range=document.createRange();

          3.4.2. Selection 的 getRangeAt() 方法

          const range=window.getSelection().getRangeAt(0)

          3.4.3. caretRangeFromPoint() 方法

          if (document.caretRangeFromPoint) {
              range=document.caretRangeFromPoint(e.clientX, e.clientY);
          }

          3.4.4. Range() 構造函數

          const range=new Range()

          3.5. Range 兼容性


          4、Selection

          Selection 對象表示用戶選擇的文本范圍或插入符號的當前位置。它代表頁面中的文本選區,可能橫跨多個元素。

          4.1. 獲取文本對象

          window.getSelection()



          4.2. Selection 術語

          4.2.1. 錨點 (anchor)

          錨指的是一個選區的起始點(不同于 HTML 中的錨點鏈接)。當我們使用鼠標框選一個區域的時候,錨點就是我們鼠標按下瞬間的那個點。在用戶拖動鼠標時,錨點是不會變的。

          4.2.2. 焦點 (focus)

          選區的焦點是該選區的終點,當你用鼠標框選一個選區的時候,焦點是你的鼠標松開瞬間所記錄的那個點。隨著用戶拖動鼠標,焦點的位置會隨著改變。

          4.2.3. 范圍 (range)

          范圍指的是文檔中連續的一部分。一個范圍包括整個節點,也可以包含節點的一部分,例如文本節點的一部分。用戶通常下只能選擇一個范圍,但是有的時候用戶也有可能選擇多個范圍。

          4.2.4. 可編輯元素 (editing host)

          一個用戶可編輯的元素(例如一個使用 contenteditable 的 HTML 元素,或是在啟用了 designMode 的 Document 的子元素)。

          4.3. Selection 的屬性

          首先要清楚,選擇的起點稱為錨點(anchor),終點稱為焦點(focus)。

          1. anchorNode:選擇的起始節點。
          2. anchorOffset:選擇開始的 anchorNode 中的偏移量。
          3. focusNode:選擇的結束節點。
          4. focusOffset:選擇開始處 focusNode 的偏移量。
          5. isCollapsed:如果未選擇任何內容(空范圍)或不存在,則為 true。
          6. rangeCount:選擇中的范圍數,之前說過,除 Firefox 外,其他瀏覽器最多為1。
          7. type:類型:None、Caret、Range

          4.4. Selection 方法

          1. addRange(range): 將一個 Range 對象添加到當前選區。
          2. collapse(node, offset): 將選區折疊到指定的節點和偏移位置。
          3. collapseToEnd(): 將選區折疊到當前選區的末尾。
          4. collapseToStart(): 將選區折疊到當前選區的起始位置。
          5. containsNode(node, partlyContained): 判斷選區是否包含指定的節點,可以選擇是否部分包含。
          6. deleteFromDocument(): 從文檔中刪除選區內容。
          7. empty(): 從選區中移除所有范圍(同 `removeAllRanges()``,已廢棄)。
          8. extend(node, offset): 將選區的焦點節點擴展到指定的節點和偏移位置。
          9. getRangeAt(index): 返回選區中指定索引處的 Range 對象。
          10. removeAllRanges(): 移除所有選區中的范圍。
          11. removeRange(range): 從選區中移除指定的 Range 對象。
          12. selectAllChildren(node): 選中指定節點的所有子節點。
          13. setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 設置選區的起始和結束節點及偏移位置。
          14. setPosition(node, offset):collapse 的別名

          4.5. Selection 兼容性


          三、項目實現

          1、實現思路

          1. 先獲取選擇的內容,開發 getSelectContent 函數
          2. 對獲取的內容進行判斷,是否存在 selection 實例,沒有直接返回 null
          3. 判斷 selection 實例的 isCollapsed 屬性 沒有選中,對 selection 進行 toString().trim() 操作,判斷內容 有內容,直接返回 text 類型 無內容,返回 null 有選中,則判斷內容
          4. 判斷選中的內容有沒有節點 沒有節點,則和沒有選中一樣處理,進行 toString().trim() 操作,判斷內容 有內容,直接返回 text 類型 無內容,返回 null 有節點,進行 toString().trim() 操作,判斷內容 沒有內容,判斷是否有特殊節點 有 'iframe', 'svg', 'img', 'audio', 'video' 節點,返回 html 類型 有 'input', 'textarea', 'select',判斷 value 值,是否存在 存在:返回 html 類型 不存在:返回 null 沒有特殊節點,返回 null 有內容,返回 html 類型
          5. 對鼠標 mousedown、mouseup 事件和 selectionchange、contextmenu、dblclick 事件進行監聽,觸發 getSelectContent 函數
          6. 在需要的地方進行 debounce 防抖處理

          2、簡易流程圖


          2、Debounce 方法實現

          2.1. JS

          function debounce (fn, time=500) {
            let timeout=null; // 創建一個標記用來存放定時器的返回值
            return function () {
              clearTimeout(timeout) // 每當觸發時,把前一個 定時器 clear 掉
              timeout=setTimeout(()=> { // 創建一個新的 定時器,并賦值給 timeout
                fn.apply(this, arguments)
              }, time)
            }
          }

          2.2. TS

          /**
           * debounce 函數類型
           */
          type DebouncedFunction<F extends (...args: any[])=> any>=(...args: Parameters<F>)=> void
          /**
           * debounce 防抖函數
           * @param {Function} func 函數
           * @param {number} wait 等待時間
           * @param {false} immediate 是否立即執行
           * @returns {DebouncedFunction}
           */
          function debounce<F extends (...args: any[])=> any>(
            func: F,
            wait=500,
            immediate=false
          ): DebouncedFunction<F> {
            let timeout: ReturnType<typeof setTimeout> | null
            return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
              // eslint-disable-next-line @typescript-eslint/no-this-alias
              const context=this
              const later=function () {
                timeout=null
                if (!immediate) {
                  func.apply(context, args)
                }
              }
              const callNow=immediate && !timeout
              if (timeout) {
                clearTimeout(timeout)
              }
              timeout=setTimeout(later, wait)
              if (callNow) {
                func.apply(context, args)
              }
            }
          }

          3、獲取選擇的文本/html 元素

          3.1. 獲取文本/html 元素

          nterface IGetSelectContentProps {
            type: 'html' | 'text'
            content: string
          }
          /**
           * 獲取選擇的內容
           * @returns {null | IGetSelectContentProps} 返回選擇的內容
           */
          const getSelectContent=(): null | IGetSelectContentProps=> {
            const selection=window.getSelection()
            if (selection) {
              // 1. 是焦點在 input 輸入框
              // 2. 沒有選中
              // 3. 選擇的是輸入框
              if (selection.isCollapsed) {
                return selection.toString().trim().length
                  ? {
                      type: 'text',
                      content: selection.toString().trim()
                    }
                  : null
              }
              // 獲取選擇范圍
              const range=selection.getRangeAt(0)
              // 獲取選擇內容
              const rangeClone=range.cloneContents()
              // 判斷選擇內容里面有沒有節點
              if (rangeClone.childElementCount > 0) {
                // 創建 div 標簽
                const container=document.createElement('div')
                // div 標簽 append 復制節點
                container.appendChild(rangeClone)
                // 如果復制的內容長度為 0
                if (!selection.toString().trim().length) {
                  // 判斷是否有選擇特殊節點
                  const isSpNode=hasSpNode(container)
                  return isSpNode
                    ? {
                        type: 'html',
                        content: container.innerHTML
                      }
                    : null
                }
                return {
                  type: 'html',
                  content: container.innerHTML
                }
              } else {
                return selection.toString().trim().length
                  ? {
                      type: 'text',
                      content: selection.toString().trim()
                    }
                  : null
              }
            } else {
              return null
            }
          }
          /**
           * 判斷是否包含特殊元素
           * @param {Element} parent 父元素
           * @returns {boolean} 是否包含特殊元素
           */
          const hasSpNode=(parent: Element): boolean=> {
            const nodeNameList=['iframe', 'svg', 'img', 'audio', 'video']
            const inpList=['input', 'textarea', 'select']
            return Array.from(parent.children).some((node)=> {
              if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
              if (
                inpList.includes(node.nodeName.toLocaleLowerCase()) &&
                (node as HTMLInputElement).value.trim().length
              )
                return true
              if (node.children) {
                return hasSpNode(node)
              }
              return false
            })
          }

          3.2. 只需要文本

          /**
           * 獲取框選的文案內容
           * @returns {string} 返回框選的內容
           */
          const getSelectTextContent=(): string=> {
            const selection=window.getSelection()
            return selection?.toString().trim() || ''
          }

          4、添加事件監聽

          // 是否時鼠標點擊動作
          let selectionchangeMouseTrack: boolean=false
          const selectionChangeFun=debounce(()=> {
            const selectContent=getSelectContent()
            console.log('selectContent', selectContent)
            // todo... 處理上報
            selectionchangeMouseTrack=false
          })
          // 添加 mousedown 監聽事件
          document.addEventListener('mousedown', ()=> {
            selectionchangeMouseTrack=true
          })
          // 添加 mouseup 監聽事件
          document.addEventListener(
            'mouseup',
            debounce(()=> {
              selectionChangeFun()
            }, 100)
          )
          // 添加 selectionchange 監聽事件
          document.addEventListener(
            'selectionchange',
            debounce(()=> {
              if (selectionchangeMouseTrack) return
              selectionChangeFun()
            })
          )
          // 添加 dblclick 監聽事件
          document.addEventListener('dblclick', ()=> {
            selectionChangeFun()
          })
          // 添加 contextmenu 監聽事件
          document.addEventListener(
            'contextmenu',
            debounce(()=> {
              selectionChangeFun()
            })
          )

          也可以進行封裝

          /**
           * addEventlistener function 類型
           */
          export interface IEventHandlerProps {
            [eventName: string]: EventListenerOrEventListenerObject
          }
          
          let selectionchangeMouseTrack: boolean=false
          const eventHandlers: IEventHandlerProps={
            // 鼠標 down 事件
            mousedown: ()=> {
              selectionchangeMouseTrack=true
            },
            // 鼠標 up 事件
            mouseup: debounce(()=> selectionChangeFun(), 100),
            // 選擇事件
            selectionchange:  debounce(()=> {
              if (selectionchangeMouseTrack) return
              selectionChangeFun()
            }),
            // 雙擊事件
            dblclick: ()=> selectionChangeFun(),
            // 右鍵事件
            contextmenu: debounce(()=> selectionChangeFun())
          }
          Object.keys(eventHandlers).forEach((event)=> {
            document.addEventListener(event, eventHandlers[event])
          })

          5、返回內容

          5.1. 純文本內容


          5.2. html 格式


          6. 完整 JS 代碼

          function debounce (fn, time=500) {
            let timeout=null; // 創建一個標記用來存放定時器的返回值
            return function () {
              clearTimeout(timeout) // 每當觸發時,把前一個 定時器 clear 掉
              timeout=setTimeout(()=> { // 創建一個新的 定時器,并賦值給 timeout
                fn.apply(this, arguments)
              }, time)
            }
          }
          
          let selectionchangeMouseTrack=false
          document.addEventListener('mousedown', (e)=> {
            selectionchangeMouseTrack=true
            console.log('mousedown', e)
          })
          document.addEventListener('mouseup', debounce((e)=> {
            console.log('mouseup', e)
            selectionChangeFun()
          }, 100))
          document.addEventListener('selectionchange', debounce((e)=> {
            console.log('selectionchange', e)
            if (selectionchangeMouseTrack) return
            selectionChangeFun()
          }))
          document.addEventListener('dblclick', (e)=> {
            console.log('dblclick', e)
            selectionChangeFun()
          })
          document.addEventListener('contextmenu',debounce(()=> {
            selectionChangeFun()
          }))
          
          const selectionChangeFun=debounce(()=> {
            const selectContent=getSelectContent()
            selectionchangeMouseTrack=false
            console.log('selectContent', selectContent)
          })
          
          const getSelectContent=()=> {
            const selection=window.getSelection();
            if (selection) {
              // 1. 是焦點在 input 輸入框
              // 2. 沒有選中
              // 3. 選擇的是輸入框
              if (selection.isCollapsed) {
                return selection.toString().trim().length ? {
                  type: 'text',
                  content: selection.toString().trim()
                } : null
              }
              // 獲取選擇范圍
              const range=selection.getRangeAt(0);
              // 獲取選擇內容
              const rangeClone=range.cloneContents()
              // 判斷選擇內容里面有沒有節點
              if (rangeClone.childElementCount > 0) {
                const container=document.createElement('div');
                container.appendChild(rangeClone);
                if (!selection.toString().trim().length) {
                  const hasSpNode=getSpNode(container)
                  return hasSpNode ? {
                    type: 'html',
                    content: container.innerHTML
                  } : null
                }
                return {
                  type: 'html',
                  content: container.innerHTML
                }
              } else {
                return selection.toString().trim().length ? {
                  type: 'text',
                  content: selection.toString().trim()
                } : null
              }
            } else {
              return null
            }
          }
          
          const getSpNode=(parent)=> {
            const nodeNameList=['iframe', 'svg', 'img', 'audio', 'video']
            const inpList=['input', 'textarea', 'select']
            return Array.from(parent.children).some((node)=> {
              if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
              if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
              if (node.children) {
                return getSpNode(node)
              }
              return false
            })
          }

          四、總結

          1. 鼠標框選上報能監控用戶在頁面的行為,能為后續的數據分析等提供便利
          2. 基于 JS 中的 Selection 和 Range 實現的,使用原生 JS
          3. 涉及到的操作比較多,包含鍵盤、鼠標右鍵、全選等
          4. 能對框選的內容進行分類,區別 html 和 text,更方便的看出用戶選擇了哪些內容

          人人都是產品經理【起點學院】,BAT實戰派產品總監手把手系統帶你學產品、學運營。

          產品設計時細節是產品經理最頭疼的問題,一個button,一個鏈接都要考慮太多的細節問題。作者整理了常見的一些功能設計問題,一篇文章看懂這些功能設計。來學習吧。

          定義

          鏈接也稱為超鏈接,所謂的超鏈接是指從一個網頁指向一個目標的連接關系,這個目標可以是另一個網頁,也可以是相同網頁上的不同位置,還可以是一個圖片,一個電子郵件地址,一個文件,甚至是一個應用程序。而在一個網頁中用來超鏈接的對象,可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后,鏈接目標將顯示在瀏覽器上,并且根據目標的類型來打開或運行。

          樣式

          鏈接可以是一個字或是一段字這樣的文本,也可以是一個按鈕,一張圖片,當你點擊后跳轉到另一個目標,當你把鼠標指針移到某個鏈接時會變成一個小手,當然在手機上沒有這一特點。

          1. 文本樣式的鏈接

          文本樣式的鏈接一般在搜索引擎的網站呈現藍色字樣,大多會在下面加上下劃線以便識別,不過現如今考慮到不影響文本的可讀性與用戶體驗,逐漸取消了下劃線。而在一些別的網站考慮到界面設計風格各方面的因素而不用藍色。

          谷歌的文本鏈接是藍色,沒有下劃線

          百度的文本鏈接也是藍色,關鍵詞是紅色,有下劃線

          而京東的文本鏈接有灰色,有白色,有黑色

          2. 按鈕樣式的鏈接

          按鈕樣式的鏈接比文本樣式的更容易識別,每一個按鈕都是一樣鏈接。

          按鈕樣式鏈接

          3. 圖片樣式的鏈接

          圖片樣式的鏈接可以是單獨的一張圖片,也可以是文字與按鈕一起組成一張圖片,只是鼠標指針掃過圖片的任何一個部位都會變成小手。

          如桌面彈出這種游戲小窗口的圖片式鏈接

          由文字/圖/按鈕樣式一起構成的一張圖片式按鈕,鼠標可以點擊圖中任何一部位

          打開方式

          鏈接打開的方式有三種:第一種是在當前頁面刷新跳轉,國外的網站大多是這樣的打開式;第二種是在新標簽頁面打開鏈接,國內大多采用這種;第三種是提示用APP打開。當然現在出現了一種新的打開方式,那就是二維碼掃描。

          提示用美拍APP打開

          類型

          按照連接路徑的不同,網頁中超鏈接一般分為以下3種類型:內部鏈接,錨點鏈接和外部鏈接。

          鏈接還可以分為動態鏈接和靜態鏈接。動態超鏈接指的是可以通過改變HTML代碼來實現動態變化的鏈接,例如我們可以實現將鼠標移動到某個文字鏈接上,文字就會象動畫一樣動起來或改變顏色的效果,也可以實現鼠標移到圖片上圖片就產生反色或朦朧等等的效果。而靜態鏈接,顧名思義,就是沒有動態效果的鏈接。

          1. 內部鏈接

          與外部鏈接(即反向鏈接)相反,內部鏈接是指同一網站域名下的內容頁面之間互相鏈接。如頻道、欄目、終極內容頁之間的鏈接,乃至站內關鍵詞之間的Tag鏈接都可以歸類為內部鏈接,因此內部鏈接我們也可以稱之為站內鏈接,對內部鏈接的優化其實就是對網站的站內鏈接的優化。

          2. 錨點鏈接

          HTML中的鏈接,正確的說法應該稱作"錨點",它命名錨點鏈接(也叫書簽鏈接)常常用于那些內容龐大繁瑣的網頁,通過點擊命名錨點,不僅讓我們能指向文檔,還能指向頁面里的特定段落,更能當作"精準鏈接"的便利工具,讓鏈接對象接近焦點。便于瀏覽者查看網頁內容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時,標記錨點是最佳的方法。

          3. 外部鏈接

          外部鏈接,又常被稱為:“反向鏈接”或“導入鏈接”,是指通過其他網站鏈接到你的網站的鏈接。

          外部鏈接指的是針對搜索引擎,與其它站點所做的友情鏈接。高質量的外部鏈接指:和你的網站建立鏈接的網站知名度高,訪問量大,同時相對的外部鏈接較少,有助于快速提升你的網站知名度和排名的其他網站的友情鏈接。

          如果按照使用對象的不同,網頁中的鏈接又可以分為:文本超鏈接,圖像超鏈接,E-mail鏈接,錨點鏈接,多媒體文件鏈接,空鏈接等。

          鏈接是一種對象,它以特殊編碼的文本或圖形的形式來實現鏈接,如果單擊該鏈接,則相當于指示瀏覽器移至同一網頁內的某個位置,或打開一個新的網頁,或打開某一個新的WWW網站中的網頁。

          鏈接狀態

          鏈接在交互上一般會呈現4種狀態,即默認狀態/懸停時狀態/點擊時狀態/點擊后狀態。比如谷哥網站的交互體驗。如下圖:

          點擊前

          懸停時,下面浮現半透明線條

          點擊時,有波紋暈開的動態效果

          點擊后,下面線條粗

          有時候是3種狀態,比如百度網和知乎應用:

          默認狀態

          點擊時鏈接變紅

          點擊后鏈接變成紫色

          IOS系統知乎應用的3種狀態,而在Android系統沒有用力點擊這一狀態。

          默認狀態

          點擊狀態

          用力點擊會彈出預覽小窗口

          有些時候只有2種狀態,如下圖谷歌網:

          默認和點擊后狀態一樣

          鼠標懸停時出現下劃線

          默認狀態

          點擊時

          而有時候比如在APP里有時候就一直只有一種狀態,也可以稱靜態鏈接,之前的可以稱之為動態鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效,使用戶體驗更暢快,這在移動端用的使用情況多一些。

          總之鏈接是網頁不可缺少的構成部分,每一個鏈接的呈現都是經過深思熟慮的。

          作者:潘瑤瓊(簡書作者)

          本文由 @潘瑤瓊 授權發布于人人都是產品經理,未經作者許可,禁止轉載。


          主站蜘蛛池模板: 亚洲欧美一区二区三区日产| 国产人妖视频一区二区破除| 波多野结衣的AV一区二区三区| 无码一区二区三区免费| 精品亚洲AV无码一区二区三区 | 国产av夜夜欢一区二区三区| 亚洲综合一区二区精品导航| 亚洲片一区二区三区| 成人精品一区二区三区校园激情| 日韩综合无码一区二区| 日本视频一区二区三区| 日本一区二区三区免费高清| 亚洲一区二区电影| 亚洲日韩精品无码一区二区三区| 无码日韩精品一区二区人妻| 国产精品99精品一区二区三区| 麻豆亚洲av熟女国产一区二| 国产精品特级毛片一区二区三区| 久久久久人妻一区精品| 国产在线观看91精品一区| 国产乱码精品一区二区三区麻豆| 国产福利微拍精品一区二区 | 人妻内射一区二区在线视频| 国产精品无码一区二区三区不卡 | 熟妇人妻系列av无码一区二区| 精品一区二区高清在线观看| 日韩福利视频一区| 国产一区二区成人| 波多野结衣一区二区三区| 亚洲一区二区三区91| 精品成人乱色一区二区| 99精品一区二区三区无码吞精| 久久国产精品无码一区二区三区 | 国产婷婷色一区二区三区深爱网| 蜜芽亚洲av无码一区二区三区| 国精产品999一区二区三区有限| 欧美激情国产精品视频一区二区| 欧洲精品码一区二区三区| 国产乱码精品一区三上 | 国产一区二区三区无码免费| 精品一区二区三区免费毛片|