<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          使用 JavaScript 實現分屏視覺效果

          時間:?2017-11-13閱讀:?2514標簽:?效果

          今天這篇文章就來講講使用JavaScript來實現這種分屏的視覺UI效果。現在在網站上這種分屏視覺效果應用的也非常廣泛,比如 Corsair website

          HTML結構

          先把基礎結構樣式弄好,要實現這個效果,需要使用div來構建兩個panel。第一個賦予bottom類,另外一個為top類。然后使用一個類名為splitview來包裹起來。

          <div class="splitview">
              <div class="panel bottom">
                  <div class="content">
          
                  </div>
              </div>   
              <div class="panel top">
                  <div class="content">
          
                  </div>
              </div>    
          </div>
          

          內容區域即content可以放任何東西,圖片文字等等。

          然后在splitview結構外面,再添加一個div類名為handle,用來加強表示分屏的視覺效果。

          <div class="handle"></div>
          

          樣式

          首先來寫兩個panel的樣式,要實現這個效果需要用到絕對定位,所以要確保類名為top的panel在另外一個panel的上面。還有一點是為了可以自適應設備屏幕的大小,這里使用vw這個單位。

          /* Panels. */
          .splitview {
              position: relative;
              width: 100%;
              min-height: 45vw;
              overflow: hidden;
          }
          
          .panel {
              position: absolute;
              width: 100vw;
              min-height: 45vw;
              overflow: hidden;
          }
          

          為了區分兩個panel,分別給兩個panel賦予不同的背景顏色。確保top的z-index的值比另外一個panel大,就可以確保top這個panel在另外一個的上面。

          .bottom {
              background-color: rgb(44, 44, 44);
              z-index: 1;
          }
          
          .top {
              background-color: rgb(77, 69, 173);
              z-index: 2;
          }
          

          要實現上面所說的分屏的效果,需要把一個panel的寬度設置為整個寬度的一半,得到如下圖所示的效果:

          JavaScript

          現在整個UI效果已經完成,接下來就是使用JavaScript來實現分屏的交互效果。先定義一個函數,當DOM加載完之后才執行:

          document.addEventListener('DOMContentLoaded', function() {
          
          });
          

          接下來先定義一些需要操作的基本變量,比如panel,handel等。

          var parent = document.querySelector('.splitview'),
              topPanel = parent.querySelector('.top'),
              handle = parent.querySelector('.handle'),
          

          定制handle

          handle是用來加強分屏的視覺表現的。

          /* Handle. */
          .handle {
              height: 100%;
              position: absolute;
              display: block;
              background-color: rgb(253, 171, 0);
              width: 5px;
              top: 0;
              left: 50%;
              z-index: 3;
          }
          

          為了加強分屏的視覺表現,這里handle是一個5px寬的黃色線條,高度和內容區域的高度一樣,z-index是3保證它在兩個panel之上。

          移動handle

          當在視圖上移動鼠標的時候,通過監聽鼠標事件可以獲取鼠標的坐標值即event.clientX,比如left等值。然后把值賦值給handle的left,這樣就可以使handle隨著鼠標的移動而移動。

          parent.addEventListener('mousemove', function(event) {
                  // Move the handle.
                  handle.style.left = event.clientX + 'px';
          });
          

          同樣為了實現跟隨鼠標移動的分屏效果,還需要動態的改變panel的值,把panel的寬度實時根據鼠標移動的坐標值來改變即panel的寬度等于鼠標移動的值event.clientX

          parent.addEventListener('mousemove', function(event) {
                  // Move the handle.
                  handle.style.left = event.clientX + 'px';
          
                  // Adjust the top panel width.
                  topPanel.style.width = event.clientX + 'px';
          });
          

          總結

          一個簡單的分屏視覺效果就完成了。你還可以通過樣式來改變視覺的呈現,比如這里我通過CSS中的transform來使分屏呈現一個斜切的視覺效果,詳細的代碼可以去這里查看,demo地址

          本文主要是從How to Create a Split-Screen Slider With JavaScript這篇文章整理而來,有刪減,有疏漏或者理解不到位的地方,還請多多指教!

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/95

          Css3實現背景毛玻璃效果

          ios里毛玻璃效果的使用非常多,本文介紹一個實現div毛玻璃背景的方法;CSS3的Filter主要用在圖像的特效處理上,默認值為none,還有以下備選項:

          background 實現四角選中框效果

          background 上綁定的多項背景圖實際為background-image 和 background-position;也就是圖片和位置;linear-gradient 是一種特殊的image類型,之后禁止重復和background-size是設置每個點的寬高

          CSS如何在頁面加載時創建淡入效果?

          想要使用CSS在頁面加載上創建淡入效果,可以使用css的animation屬性或transition屬性在頁面加載時創建淡入效果。下面就來通過示例來介紹一下。通過2個關鍵幀來定義CSS動畫:一個不透明度設置為0,另一個不透明度設置為1。

          一個簡易的 LED 數字時鐘Js實現方法

          這個應該是已經有很多人做過的東西,我應該只是算手癢,想寫一下,所以,花了點時間折騰了這個,順便把 Dark Mode 的處理也加上了

          css如何實現首字下沉效果?

          在CSS中可以使用偽元素::first-letter來選中一段文本的首字,然后使用font-size屬性設置首字大小,在通過float屬性來將實現下沉效果。:first-letter 偽元素向文本的第一個字母添加特殊樣式。

          jQuery 效果方法summary

          定義和用法slideDown() 方法通過使用滑動效果,顯示隱藏的被選元素。(被選元素的高度發生變化),該效果適用于通過 jQuery 隱藏的元素,或在 CSS 中聲明 display:none 的元素

          純CSS3制作3d網紅熱詞盒子

          今天給大家分享的是CSS3制作的帶3d效果的方塊,上面簡單整理了一下2019年的網紅熱詞。這個DEMO用到了CSS3的3d變化技巧,做出來的效果還不錯。請注意,該3d效果依賴transform-style: preserve-3d屬性

          Js實現動態輪播圖效果

          功能描述:1.鼠標經過 左右側箭頭顯示,鼠標離開 箭頭隱藏2.動態添加底部小圓圈并綁定單擊事件,并且讓小圓圈的點擊事件和左右箭頭點擊事件同步3.拷貝第一張圖片添加到ul最后可以實現動態添加圖片

          HTML Canvas如何實現線性漸變效果?

          可以先使用HTML Canvas的線性漸變的函數createLinearGradient()來創建一個漸變色線性對象;然后使用addColorStop()方法定義漸變色顏色;最后將漸變顏色分配給strokeStyle或fillStyle屬性進行填充

          vue 實現文字無縫滾動效果(從下往上滾動)

          這種效果需求還是蠻多的,想起之前用JQuery實現的一個無縫滾動( 緬懷過去),是通過jq的animate方法實現的,動畫結束之后就將第一個元素appendTo追加到最后面,實現循環滾動特效,不得不感嘆技術更新換代真的很快。

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网