整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          使用HTML,CSS和Javascript創(chuàng)建漂亮的懸停觸發(fā)的可擴(kuò)展側(cè)邊欄

          天,我們將學(xué)習(xí)如何制作一個(gè)在懸停時(shí)展開(kāi)和折疊的側(cè)邊欄。它看起來(lái)很漂亮,實(shí)現(xiàn)比看起來(lái)簡(jiǎn)單得多。我們將逐步完成本教程,并且在此過(guò)程中我還將介紹一些值得注意的HTML / CSS技巧。

          以下是本文將涉及的提示和技巧列表:

          • 將欄放在側(cè)邊欄中
          • 在懸停時(shí)更改項(xiàng)目的顏色
          • 您需要了解如何修復(fù)的Google材質(zhì)圖標(biāo)存在問(wèn)題
          • onmouseover和onmouseout事件
          • 如何將物品保持在一條線(xiàn)上并防止纏繞
          • 如何隱藏側(cè)邊欄中溢出的文本
          • 如何實(shí)現(xiàn)平滑過(guò)渡

          讓我們開(kāi)始!

          第1部分:創(chuàng)建一個(gè)簡(jiǎn)單的側(cè)邊欄

          可以在此筆中找到此步驟的完整代碼:https://codepen.io/dalisc/pen/rEjRWo

          只使用HTML,您的網(wǎng)頁(yè)將如下圖所示。一些CSS可以做出什么改變!所以我們需要用一些CSS來(lái)設(shè)置它,使其看起來(lái)像上面的gif。

          從第1部分學(xué)習(xí)的CSS技巧和竅門(mén):

          • 將欄放在側(cè)邊欄中
          .sidebar {
           height: 100%;
           width: 250px;
           position: fixed;
           top: 0;
           left: 0;
           background-color: #111;
           padding-top: 60px;
          

          此代碼為側(cè)邊欄提供250px(width:250px;)的寬度,背景顏色為深色(background-color:#111;),并使其在頁(yè)面上完全垂直延伸(height:100%;)。在code pen以自定義側(cè)邊欄。

          • 懸停時(shí)更改側(cè)邊欄項(xiàng)目的顏色
          .sidebar a {
           padding: 8px 8px 8px 32px;
           text-decoration: none;
           font-size: 25px;
           color: #818181;
           display: block;
          }
          

          在這里,我們使用“text-decoration:none;”刪除了文本的下劃線(xiàn)和藍(lán)色,并在側(cè)邊欄項(xiàng)目周?chē)砑恿颂畛浜蛪K顯示的一些空格。增強(qiáng)用戶(hù)體驗(yàn)的部分是當(dāng)項(xiàng)目顏色從灰色變?yōu)榘咨珪r(shí),這可以通過(guò)以下代碼完成:

          .sidebar a:hover {
           color: #f1f1f1;
          }
          

          此代碼表示當(dāng)您將鼠標(biāo)懸停在類(lèi)“側(cè)欄”中用<a>標(biāo)記的元素上時(shí),元素的顏色將更改為您設(shè)置的任何顏色,在本例中為#f1f1f1。

          • 您需要了解如何修復(fù)的Google材質(zhì)圖標(biāo)存在問(wèn)題

          如果您使用Google的素材圖標(biāo),您會(huì)發(fā)現(xiàn)一個(gè)令人沮喪的問(wèn)題:默認(rèn)情況下,圖標(biāo)和相鄰文字沒(méi)有正確垂直對(duì)齊。

          .material-icons,
          .icon-text {
           vertical-align: middle;
          }
          .material-icons {
           padding-bottom: 3px;
           margin-right: 30px;
          }
          

          你需要做的是在CSS中垂直對(duì)齊它們(vertical-align:middle;)。即使這樣,對(duì)齊也有點(diǎn)偏離,所以在此之后給你的圖標(biāo)一個(gè)3px垂直增強(qiáng)(padding-bottom:3px;)。

          第2部分:檢測(cè)您的鼠標(biāo)是否懸停在側(cè)邊欄上

          現(xiàn)在我們將添加一些Javascript,因?yàn)槲覀儗⒃趥?cè)邊欄中引入一些功能。可以在此筆中找到此步驟的完整代碼

          • HTML提示:onmouseover和onmouseout

          兩個(gè)非常有用的事件是onmouseover和onmouseout,它們分別檢測(cè)您的鼠標(biāo)是否懸停在特定元素之上或之外。對(duì)于我們的側(cè)邊欄,我們希望檢測(cè)位于側(cè)邊欄的任何部分,因此我們需要將這些事件添加到側(cè)邊欄的<div>中,如下所示:

          <div id=”mySidebar” class=”sidebar” onmouseover=”somethinghappens” onmouseout=”somethinghappens”>
          

          現(xiàn)在,我們可以決定鼠標(biāo)懸停在側(cè)邊欄上或從邊欄懸停的情況。我們需要將“ somethinghappens”替換為我們想要實(shí)際發(fā)生的事情,但首先,讓我們通過(guò)向控制臺(tái)發(fā)送消息來(lái)檢查是否發(fā)生了檢測(cè)。

          現(xiàn)在讓我們編寫(xiě)兩個(gè)Javascript函數(shù)來(lái)確認(rèn)檢測(cè)到事件:

          function testIn() {
           console.log(“hovering in sidebar”);
          }
          function testOut() {
           console.log(“hovering outside sidebar”);
          }
          

          更新我們的側(cè)邊欄:

          <div id=”mySidebar” class=”sidebar” onmouseover=”testIn()” onmouseout=”testOut()”>
          

          現(xiàn)在進(jìn)行懸停并檢查控制臺(tái)以查找我們編寫(xiě)的消息。它應(yīng)該可以工作了!我們已經(jīng)設(shè)置了告訴側(cè)邊欄是折疊還是展開(kāi)所需的檢測(cè)。

          第3部分:展開(kāi)/折疊側(cè)邊欄

          可以在此筆中找到此最終部分的完整代碼:https://codepen.io/dalisc/pen/qzRGxQ

          我們將折疊邊欄稱(chēng)為迷你側(cè)邊欄。我們現(xiàn)在想要根據(jù)鼠標(biāo)是否懸停在我的側(cè)邊欄上進(jìn)行兩次查找,因此我們需要在javascript部分中創(chuàng)建一個(gè)布爾變量mini

          我們還將創(chuàng)建一個(gè)函數(shù)來(lái)切換側(cè)邊欄的擴(kuò)展。該功能的邏輯如下:如果側(cè)邊欄處于迷你模式,將鼠標(biāo)懸停在側(cè)邊欄上會(huì)將側(cè)邊欄擴(kuò)展為其完整模式(并將變量mini設(shè)置為false)。如果側(cè)邊欄處于完全模式,將鼠標(biāo)懸停在側(cè)邊欄上會(huì)將其折疊為迷你模式(并將變量mini設(shè)置為true)。

          因此,我們需要更改onmouseoveronmouseout事件,并相應(yīng)地引入新函數(shù)toggleSidebar()

          更改html:

          <div id=”mySidebar” class=”sidebar” onmouseover=”toggleSidebar()” onmouseout=”toggleSidebar()”>
          

          添加到JS(我們現(xiàn)在可以刪除testIn()和testOut()):

          var mini = true;
          function toggleSidebar() {
          if (mini) {
           console.log(“opening sidebar”);
           document.getElementById(“mySidebar”).style.width = “250px”;
           document.getElementById(“main”).style.marginLeft = “250px”;
           this.mini = false;
          } else {
           console.log(“closing sidebar”);
           document.getElementById(“mySidebar”).style.width = “100px”;
           document.getElementById(“main”).style.marginLeft = “100px”;
           this.mini = true;
           }
          }
          

          從功能中可以看出,它基本上都是改變側(cè)邊欄黑色塊的寬度。完整模式的寬度為250px,迷你模式的寬度為85px。我們還策略性地定位文本和圖標(biāo),以便在側(cè)邊欄折疊時(shí)完全隱藏文本,僅顯示圖標(biāo)。

          默認(rèn)情況下,我們希望側(cè)邊欄處于迷你模式,因此我們也將側(cè)邊欄的寬度(最初未被遮擋時(shí))更改為85px。

          .sidebar {
           height: 100%;
           width: 85px;
           position: fixed;
           z-index: 1;
           top: 0;
           left: 0;
           background-color: #111;
           transition: 0.5s;
           padding-top: 60px;
          }
          

          當(dāng)前默認(rèn)外觀:

          此時(shí),文本溢出仍有一些問(wèn)題,所以我將介紹一些CSS提示和技巧!

          從第3部分學(xué)習(xí)的CSS技巧和竅門(mén):

          • 如何在一行中獲取圖標(biāo)和文本

          將“white-space:nowrap;”添加到側(cè)欄CSS。

          .sidebar {
           height: 100%;
           width: 85px;
           position: fixed;
           top: 0;
           left: 0;
           background-color: #111;
           padding-top: 60px;
           white-space: nowrap;
          }
          

          即使文本大于側(cè)邊欄的寬度,這也會(huì)阻止文本換行到下一行。但正如你在下面看到的那樣,雖然它現(xiàn)在在一行中,它會(huì)溢出,你可以看到溢出...所以我們需要找到隱藏它的方法!

          s

          • 如何隱藏側(cè)邊欄中溢出的文本

          要隱藏溢出的文本,只需將“overflow-x:hidden;”和“z-index:1;”添加到側(cè)邊欄css即可。這將隱藏任何寬于側(cè)邊欄寬度的內(nèi)容。

          .sidebar {
           height: 100%;
           width: 85px;
           position: fixed;
           z-index: 1;
           top: 0;
           left: 0;
           background-color: #111;
           overflow-x: hidden;
           padding-top: 60px;
           white-space: nowrap;
          }
          

          現(xiàn)在我們的側(cè)邊欄看起來(lái)非常好!(我也改變了主要內(nèi)容,但主要內(nèi)容未在本教程中介紹,它包含在code pen。)

          • 如何為擴(kuò)展創(chuàng)建平滑過(guò)渡

          現(xiàn)在我們已經(jīng)遇到了我們需要修復(fù)的最后一個(gè)小故障,以使側(cè)邊欄順利移動(dòng)。目前,隨著側(cè)邊欄折疊和展開(kāi),沒(méi)有動(dòng)畫(huà)添加到它,所以它看起來(lái)有點(diǎn)不連貫,像這樣:

          所以我們想要的是一個(gè)非常平滑的過(guò)渡,如第一頁(yè)上的gif所示。現(xiàn)在,變化立即發(fā)生為了順利,我們需要減緩變化。首先,我們需要讓側(cè)邊欄擴(kuò)展得更慢,比方說(shuō)0.5秒。將其添加到側(cè)邊欄CSS。

          .sidebar {
           height: 100%;
           width: 85px;
           position: fixed;
           z-index: 1;
           top: 0;
           left: 0;
           background-color: #111;
           overflow-x: hidden;
           transition: 0.5s;
           padding-top: 60px;
           white-space: nowrap;
          }
          

          我們還需要將主要部分同時(shí)推到左側(cè)。

          #main {
           transition: margin-left .5s;
           padding: 16px;
           margin-left: 85px;
          }
          

          你有一個(gè)漂亮的側(cè)邊欄!

          在GitHub存儲(chǔ)庫(kù)中找到完整的工作代碼:https//github.com/dalisc/hover-collapsible-sidebar

          轉(zhuǎn):https://medium.com/@9cv9official/create-a-beautiful-hover-triggered-expandable-sidebar-with-simple-html-css-and-javascript-9f5f80a908d1

          今日小知識(shí)】:div和span的作用及用法,希望可以幫到正在學(xué)習(xí)HTML的你噢~~~

          div標(biāo)簽

          一般用于配合css完成網(wǎng)頁(yè)基本布局。<div>標(biāo)簽可定義文檔中的分區(qū)或節(jié) 。可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具,并且不使用任何格式與其關(guān)聯(lián)。如果用 id 或 class 來(lái)標(biāo)記 ,那么該標(biāo)簽的作用會(huì)變得更加有效。class用于元素組(類(lèi)似的元素,或者可以理解為某一類(lèi)元素),而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。class可以在頁(yè)面里面重復(fù)使用,id由于在頁(yè)面里面只能出現(xiàn)一次,所以不能重復(fù)使用,所以盡量用class來(lái)寫(xiě),這樣能在頁(yè)面里面重復(fù)引用你寫(xiě)的css,減小工作量和代碼量。

          span標(biāo)簽

          一般用于配合css修改網(wǎng)頁(yè)中的一些局部信息。它其實(shí)就是用來(lái)組合文檔中的行內(nèi)元素,也就是將內(nèi)容放在span標(biāo)簽之中。span沒(méi)有固定的格式表現(xiàn),如果需要,可以添加屬性來(lái)表現(xiàn)形式

          div和span的區(qū)別

          1.div標(biāo)簽會(huì)獨(dú)占一行,span標(biāo)簽不會(huì)。

          2.div是一個(gè)容器級(jí)別的標(biāo)簽,span是一個(gè)文本級(jí)別的標(biāo)簽。

          3.div基本上與span相似,或者說(shuō)具有span所有的功能,此外還具有span不及的特色。div是一個(gè)塊,也就是所謂的"容器",它具有自己獨(dú)立的段落,獨(dú)立的標(biāo)題,獨(dú)立的表格。

          4.div是一個(gè)塊級(jí)元素,可以包含段落、標(biāo)題、表格,乃至諸如章節(jié)、摘要和備注等。而span是行內(nèi)元素,span的前后是不會(huì)換行的,它沒(méi)有結(jié)構(gòu)的意義,純粹是應(yīng)用樣式,當(dāng)其他行內(nèi)元素都不合適時(shí),可以使用span。

          容器級(jí)別標(biāo)簽和文本級(jí)別標(biāo)簽的區(qū)別

          容器級(jí)別標(biāo)簽可以嵌套所有標(biāo)簽,文本級(jí)別標(biāo)簽只可以嵌套文字/超鏈接/圖片。

          容器級(jí)別標(biāo)簽

          div h ul ol dl li dt dd …

          文本級(jí)標(biāo)簽

          span p buis strong em ins del….


          希望以上內(nèi)容可以幫助到在學(xué)習(xí)HTML的你們噢~~~如有補(bǔ)充可以私聊我噢~~~我們一起學(xué)習(xí)~~~

          js圖片局部放大鏡效果

          ---

          **引言:增強(qiáng)用戶(hù)體驗(yàn),打造沉浸式商品展示**

          在電子商務(wù)和各類(lèi)產(chǎn)品展示網(wǎng)站中,圖片局部放大功能是一項(xiàng)極其實(shí)用且能顯著提升用戶(hù)體驗(yàn)的設(shè)計(jì)。通過(guò)JavaScript實(shí)現(xiàn)圖片局部放大的放大鏡效果,可以讓用戶(hù)在不離開(kāi)頁(yè)面的情況下查看產(chǎn)品的細(xì)節(jié),從而促進(jìn)購(gòu)買(mǎi)決策。本文將深入淺出地介紹如何利用原生JavaScript創(chuàng)建一個(gè)簡(jiǎn)單的圖片局部放大鏡效果,并附上詳細(xì)的代碼實(shí)現(xiàn)步驟。

          ---

          **【第一部分】HTML布局與樣式基礎(chǔ)**

          **標(biāo)題:搭建基礎(chǔ)框架,預(yù)留交互空間**

          首先,我們需要在HTML中設(shè)置好圖片容器以及放大鏡區(qū)域的基本結(jié)構(gòu):

          ```html

          <div id="magnify-container">

          <img id="product-image" src="your-image-source.jpg" alt="Product Image">

          <div id="magnifier">

          <div id="magnified-view"></div>

          </div>

          </div>

          ```

          配合CSS初步設(shè)置放大鏡樣式,確保放大鏡可覆蓋在圖片之上:

          ```css

          #magnify-container {

          position: relative;

          }

          #product-image {

          width: 100%;

          height: auto;

          }

          #magnifier {

          position: absolute;

          border: 1px solid #ccc;

          width: 200px; /* 放大鏡寬度 */

          height: 200px; /* 放大鏡高度 */

          display: none;

          cursor: none;

          }

          #magnified-view {

          width: 100%;

          height: 100%;

          overflow: hidden;

          background-position: center;

          background-repeat: no-repeat;

          background-size: contain;

          }

          ```

          ---

          **【第二部分】JavaScript事件監(jiān)聽(tīng)與坐標(biāo)計(jì)算**

          **標(biāo)題:捕獲鼠標(biāo)移動(dòng),精準(zhǔn)定位放大區(qū)域**

          在JavaScript中,我們將添加事件監(jiān)聽(tīng)器來(lái)追蹤鼠標(biāo)在圖片上的位置,并據(jù)此更新放大鏡及其內(nèi)部視圖的位置:

          ```javascript

          const productImage = document.getElementById('product-image');

          const magnifier = document.getElementById('magnifier');

          const magnifiedView = document.getElementById('magnified-view');

          productImage.addEventListener('mousemove', (e) => {

          const rect = productImage.getBoundingClientRect();

          const x = e.clientX - rect.left;

          const y = e.clientY - rect.top;

          // 更新放大鏡顯示位置

          magnifier.style.display = 'block';

          magnifier.style.left = `${x - magnifier.offsetWidth / 2}px`;

          magnifier.style.top = `${y - magnifier.offsetHeight / 2}px`;

          // 計(jì)算并更新放大視圖背景圖像的位置與縮放比例

          const scale = magnifier.offsetWidth / productImage.offsetWidth;

          const bgX = -((x * scale) - magnifier.offsetWidth / 2);

          const bgY = -((y * scale) - magnifier.offsetHeight / 2);

          magnifiedView.style.backgroundPosition = `${bgX}px ${bgY}px`;

          magnifiedView.style.backgroundSize = `${productImage.offsetWidth * scale}px`;

          });

          ```

          ---

          **【第三部分】響應(yīng)鼠標(biāo)進(jìn)出與觸屏設(shè)備兼容性**

          **標(biāo)題:增強(qiáng)交互體驗(yàn),確保多設(shè)備適用**

          為了使放大鏡效果在鼠標(biāo)移入/移出時(shí)正常切換顯示與隱藏,并考慮到觸屏設(shè)備的兼容性,我們可以增加mouseenter、mouseleave或touchstart、touchend事件處理:

          ```javascript

          productImage.addEventListener('mouseenter', () => {

          magnifier.style.display = 'block';

          });

          productImage.addEventListener('mouseleave', () => {

          magnifier.style.display = 'none';

          });

          // 對(duì)于觸屏設(shè)備

          if ('ontouchstart' in window) {

          productImage.addEventListener('touchstart', (e) => {

          if (!magnifier.classList.contains('active')) {

          magnifier.classList.add('active');

          }

          });

          productImage.addEventListener('touchmove', (e) => {

          // 使用之前的mousemove事件處理函數(shù)邏輯

          // 注意取消默認(rèn)行為防止頁(yè)面滾動(dòng)

          e.preventDefault();

          // ...

          });

          productImage.addEventListener('touchend', () => {

          magnifier.classList.remove('active');

          magnifier.style.display = 'none';

          });

          }

          ```

          ---

          **【第四部分】性能優(yōu)化與擴(kuò)展功能**

          **標(biāo)題:提升性能,引入過(guò)渡動(dòng)畫(huà)與自定義放大倍數(shù)**

          為了進(jìn)一步提升用戶(hù)體驗(yàn),我們可以添加過(guò)渡動(dòng)畫(huà)和允許用戶(hù)自定義放大倍數(shù)的功能:

          ```javascript

          // CSS中加入過(guò)渡效果

          #magnifier {

          transition: all 0.2s ease-out;

          }

          // JavaScript中增加放大倍數(shù)變量

          const zoomScale = 3; // 默認(rèn)放大倍數(shù)

          // 更新放大視圖背景尺寸計(jì)算

          magnifiedView.style.backgroundSize = `${productImage.offsetWidth * zoomScale}px`;

          // 用戶(hù)自定義放大倍數(shù)

          document.getElementById('zoom-slider').addEventListener('input', (e) => {

          zoomScale = parseFloat(e.target.value);

          magnifiedView.style.backgroundSize = `${productImage.offsetWidth * zoomScale}px`;

          });

          ```

          ---

          **結(jié)語(yǔ):實(shí)戰(zhàn)演練,精進(jìn)前端技能**

          通過(guò)上述步驟,我們已經(jīng)成功實(shí)現(xiàn)了基于原生JavaScript的圖片局部放大鏡效果。這一實(shí)踐不僅展示了JavaScript在前端交互設(shè)計(jì)中的強(qiáng)大能力,也提醒我們始終關(guān)注用戶(hù)體驗(yàn),用技術(shù)手段不斷提升網(wǎng)站品質(zhì)。后續(xù)還可在此基礎(chǔ)上增加更多個(gè)性化功能,如平滑滾動(dòng)、縮放限制等,以滿(mǎn)足不同場(chǎng)景下的需求。不斷探索創(chuàng)新,讓你的前端作品更具吸引力與實(shí)用性。


          主站蜘蛛池模板: 国产精品无码一区二区在线观一| 白丝爆浆18禁一区二区三区 | 激情综合一区二区三区| 久久精品国产第一区二区三区| 精品一区二区三区水蜜桃| 亚洲精品色播一区二区| 亚洲中文字幕一区精品自拍 | 久久久无码精品人妻一区| 国产视频一区在线观看| 熟女性饥渴一区二区三区| 精品视频在线观看你懂的一区| av在线亚洲欧洲日产一区二区| 国产伦精品一区二区三区精品| 无码人妻精一区二区三区| 无码中文人妻在线一区| 亚洲Av无码国产一区二区| 无码丰满熟妇一区二区| 伊人久久精品无码麻豆一区| 国产精品一区二区久久精品涩爱| 亚洲AV无码一区二区三区在线 | 动漫精品第一区二区三区| 在线观看国产一区二区三区| 日本免费一区二区三区最新vr| 精品国产亚洲一区二区三区在线观看| 色欲AV蜜桃一区二区三| 精品无码国产AV一区二区三区 | 亚洲国产精品第一区二区三区| 日韩av片无码一区二区三区不卡 | 亚洲福利一区二区精品秒拍| 亚洲高清一区二区三区 | 日韩社区一区二区三区| 精品一区二区三区无码免费直播| 日韩精品久久一区二区三区| 在线|一区二区三区| 国产免费播放一区二区| 亚洲夜夜欢A∨一区二区三区 | 在线观看精品视频一区二区三区| 波多野结衣中文一区| 国模吧无码一区二区三区| 国产午夜精品一区二区三区嫩草| 久久久av波多野一区二区|