整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
片的位置搞的差不多了之后再來完善一下。你看這個Demo里面把鼠標挪到圖片這里之后有沒有發現什么變化？鼠標挪到圖片這里，鼠標從箭頭變成了一個手指，這是第一個。鼠標懸浮到圖片上的時候圖片是會放大的，所以接下來在圖片上加上這兩個效果。
·第一個效果也就是鼠標挪過來之后從箭頭變成手指。這個怎么搞？其實很簡單，有個CSS的屬性也叫pointer，這個是光標的意思。如果要讓它變成手指就是設置成pointer，然后保存，把鼠標挪過來，挪到圖片范圍里面去就變成手指了，出來就變成箭頭了。
如果想換成別的也可以，比如crosshair，變成十字架了，換成pointer，第一個效果已經實現了。
·第二個效果就是挪到圖片上之后會放大。這個怎么搞？其實也簡單，可以再加一個CSS選擇器。首先針對的是這些image元素，所以image要處理的是當鼠標懸浮到圖片上的時候是什么效果，所以后面加個冒號，再加上一個hover大括號。
hover是什么意思？就是懸停的意思，也就是這里面的一些設置只會在什么時候起效？就是當鼠標懸停到圖片上的時候可以實驗一下看起不起效果。比如當鼠標懸停到圖片的時候讓圖片的邊框顯示出來，那就是border，width，3Pixel，border style，solid，實實線。它的顏色border，color，比如白色。
把鼠標挪過來，這里的設置是不是只有在我這個鼠標，懸停到了某張圖片上的時候才會起效果。但是需要的效果不是把邊框顯示出來，是希望坤坤能夠變大，所以可以搞一個transform，這個是幾何變換的意思。
想讓坤坤變大肯定是縮放，這里有個scale是縮放，點一下，這里就可以設置坤坤到底要縮放成多大。這里可以填一個系數，比如填個1.1就相當于是會比原來大1.1倍，填個0.9就會比之前縮小10%。
這里來試一下，比如1.4，保存好移過來，是不是變大了？但是變大不像這邊這么絲滑，像是有一個過渡圖動畫一樣。這個怎么搞？也簡單，再加一個設置transition，這個就是變化的意思。
后面可以加上一個時間，也就是當鼠標挪過來之后不是會變大嗎？從原始大小變成這么大，這個過程需要多長時間？這個時間就可以在這里設置，比如搞個一秒鐘，就1S好保存，挪過來是不是一秒鐘的樣子？如果覺得時間太長了，可以再縮短，比如0.3，快一點了。
果您曾訪問過任何在線購物網站，那么您必須看到以下翻轉縮放效果，其中您將鼠標懸停在產品圖像的不同部分上以查看該部分的放大預覽。
以下是這種效果的演示。將鼠標懸停在兩個圖像上以查看其放大視圖。
您可以在不使用任何jQuery插件的情況下創建此效果，只需使用CSS和JavaScript。現在讓我們編碼吧。
HTML
<div class = “container-fluid” > <div class = “row” > <div class = “col-lg-3 col-md-3 col-sm-3 col-xs-12” id = “samples” > <img id = “zoom1” src = “pic1.jpg” width = “100px” height = “250px” > <img id = “zoom2” src = “pic2.jpg” width = “100px” height = “250px” > </ div> <div class = “col-lg-9 col-md-9 col-sm-9 col-xs-12“ > <div id = ”preview“ > </ div> </ div> </ div> </ div>
HTML很簡單，其中行分為兩列，第一列包含我們想要查看其預覽的兩個圖像，第二列包含id為'preview'的div，它將顯示預覽。兩個圖像都具有相同的寬度和高度。
CSS
對于CSS代碼，讓我們分別討論每個元素。
首先談論預覽div，它給出了一些維度，邊界和邊距。該 background-repeat: no-repeat 屬性確保它將預覽的圖像（將在JavaScript中成為其背景圖像）不會重復。 margin-left: auto 并將 margin-right: auto 此div對齊其父級寬度的中心。
#preview{
margin-top: 10px;
border:1px solid black;
width:350px;
height:500px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
給出圖像 display: block 以防止它們并排顯示，并且其父div被給予 text-align: center 中心對齊圖像。將鼠標懸停在圖像上時，鼠標光標將變為zoom-in。
此外，我給display: inline-block 媒體查詢中的圖像賦值 ，以便在屏幕寬度小于或等于767像素時在同一行顯示兩個圖像。
最終的CSS如下。
#preview{
margin-top: 10px;
border:1px solid black;
width:350px;
height:500px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
#samples{
text-align: center;
}
#samples img {
margin: 10px;
display: block;
border: 2px solid #6A6462;
}
#samples img:hover {
cursor: zoom-in;
border: 0;
-moz-box-shadow:2px 2px 7px 2px rgba(130,130,130,1),-1px -1px 7px 2px rgba(130,130,130,1);
-webkit-box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-1px -1px 7px 2px rgba(130,130,130,1);
box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-2px -2px 7px 2px rgba(130,130,130,1);
}
@media screen and (max-width: 767px){
#samples img {
display: inline-block;
}
}
這部分有關鍵代碼，負責預覽。我們把它分成幾步。
步驟1
首先，我定義了兩個函數' zoomIn '和' zoomOut '來定義分別放大和縮小對象（在本例中為圖像）的操作。這些函數在Javascript中定義。由于我想在鼠標移過圖像時放大圖像并在鼠標離開圖像時縮小圖像，我將兩個函數分別與 onmousemove 和 onmouseout 事件相關聯。
HTML
<div class = “container-fluid” > <div class = “row” > <div class = “col-lg-3 col-md-3 col-sm-3 col-xs-12” id = “samples” > <img id = “zoom1” width = “100px” height = “250px” onmousemove = “ zoomIn （event）” onmouseout = “zoomOut （）” src = “pic1.jpg” > <img id = “zoom2” width = “ 100px“ height = ”250px“ onmousemove = ”zoomIn（event）“ onmouseout = ”zoomOut （）“ src = ”pic2.jpg“> </ div> <div class = “col-lg-9 col-md-9 col-sm-9 col-xs-12” > <div id = “preview” onmousemove = “ zoomIn （event）” > </ div> </ div> </ div> </ div>
第2步
來到JavaScript部分，讓我們從zoomOut 函數開始 。我將id為'preview'的div返回到變量 pre 并隱藏其可見性 。
第3步
在 zoomIn 函數中，'pre'的可見性設置為 visible。因此，只要鼠標在圖像上移動，預覽div就會顯示。在所有情況下，它將被隱藏。
條件 $('#zoom1').is(':hover') 是檢查鼠標是否懸停在第一張圖像上（id為'zoom1'）。如果條件為真，則將第一個圖像設置為預覽div的背景圖像。因此，每當您將鼠標懸停在第一個圖像上時，預覽div將以第一個圖像作為背景顯示。同樣適用于第二張圖像。
但那么預覽div中的圖像如何變大？
這是因為我分別設置了圖像的寬度和高度100px和250像素，但其實際尺寸要大得多。由于我沒有在預覽div的背景圖像上給出任何這樣的尺寸約束，因此它在這里采用其全寬和高度。預覽div的寬度和高度小于其背景圖像的寬度和高度，因此背景圖像不會完全覆蓋整個div，它給人的感覺就像圖像被放大一樣。
JS
function zoomIn(event) {
var pre = document.getElementById("preview");
pre.style.visibility = "visible";
if ($('#zoom1').is(':hover')) {
var img = document.getElementById("zoom1");
pre.style.backgroundImage = "url('pic1.jpg')";
}
if ($('#zoom2').is(':hover')){
var img = document.getElementById("zoom2");
pre.style.backgroundImage = "url('pic2.jpg')";
}
}
function zoomOut() {
var pre = document.getElementById("preview");
pre.style.visibility = "hidden";
}
第4步
該語句 var posX = event.offsetX 指定鼠標指針相對于鼠標移動到var posX的圖像的位置的X坐標值 。類似地， posY 存儲Y坐標的值。
預覽div的背景圖像的位置由語句給出 pre.style.backgroundPosition=(-posX*2.5)+"px "+(-posY*5.5)+"px";。在這里，我取消了posX和posY，使預覽圖像背景朝著與鼠標移動相反的方向移動。此外，一些數字乘以posX和posY，以便我們可以在鼠標移動時看到整個預覽圖像。當您自己嘗試根據圖像尺寸和預覽div更改數字時，這將變得更加清晰。
總結一下，動畫的整個代碼如下。
HTML
<div class = “container-fluid” > <div class = “row” > <div class = “col-lg-3 col-md-3 col-sm-3 col-xs-12” id = “samples” > <img id = “zoom1” width = “100px” height = “250px” onmousemove = “ zoomIn （event）” onmouseout = “zoomOut （）” src = “pic1.jpg” > <img id = “zoom2” width = “ 100px“ height = ”250px“ onmousemove = ”zoomIn（event）“ onmouseout = ”zoomOut （）“ src = ”pic2.jpg“> </ div> <div class = “col-lg-9 col-md-9 col-sm-9 col-xs-12” > <div id = “preview” onmousemove = “ zoomIn （event）” > </ div> </ div> </ div> </ div>
css
#preview{
margin-top: 10px;
border:1px solid black;
width:350px;
height:500px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
#samples{
text-align: center;
}
#samples img {
margin: 10px;
display: block;
border: 2px solid #6A6462;
}
#samples img:hover {
cursor: zoom-in;
border: 0;
-moz-box-shadow:2px 2px 7px 2px rgba(130,130,130,1),-1px -1px 7px 2px rgba(130,130,130,1);
-webkit-box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-1px -1px 7px 2px rgba(130,130,130,1);
box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-2px -2px 7px 2px rgba(130,130,130,1);
}
@media screen and (max-width: 767px){
#samples img {
display: inline-block;
}
}
JS
function zoomIn(event) {
var pre = document.getElementById("preview");
pre.style.visibility = "visible";
if ($('#zoom1').is(':hover')) {
var img = document.getElementById("zoom1");
pre.style.backgroundImage = "url('pic1.jpg')";
}
if ($('#zoom2').is(':hover')){
var img = document.getElementById("zoom2");
pre.style.backgroundImage = "url('pic2.jpg')";
}
var posX = event.offsetX;
var posY = event.offsetY;
pre.style.backgroundPosition=(-posX*2.5)+"px "+(-posY*5.5)+"px";
}
function zoomOut() {
var pre = document.getElementById("preview");
pre.style.visibility = "hidden";
}
歡迎大家在評論區討論，整理不易，請大家收藏和關注，感謝您的支持。
建民 翻譯
您是否曾經訪問過一個網站并被其驚人的功能所震撼？其中之一可能是一個很酷的鼠標光標，它不同于您習慣的常規箭頭或指針光標。
這確實可以改善用戶體驗，最近我一直想知道它是如何工作的。所以我開始做一些研究，我發現它是如何完成的。
在本文中，我將解釋如何制作自定義鼠標光標。在本文結束時，您將學習如何使用CSS和JavaScript兩種不同的方法制作這些光標。然后，您將準備好使用不同的創意光標來充實您的網站，以保持您的觀眾的參與度。
使用CSS自定義鼠標光標非常簡單，因為CSS已經有一個屬性來處理這個問題。我們需要做的就是識別這個屬性并使用它。作為前端工程師，我們經常使用這個屬性——它就是萬能的cursor屬性。是的，該屬性使我們能夠制作我們選擇的自定義光標。
在我們進入一個實際的例子之前，讓我們看一下與CSS cursor屬性相關的值。雖然大多數開發人員只使用了一些重要的，但我們應該看看更多。
從上圖中，您可以看到每個CSS cursor屬性值名稱和對應的值的說明。
現在如何使用CSS自定義鼠標光標？要使用它，您只需告訴CSS您打算使用什么圖像，并使用該url值將光標屬性指向圖像URL。
從上面的代碼片段中，你可以看到我在文檔正文上設置了這個，所以無論光標移動到哪里，它都可以應用于光標。它具有指定的圖像url()。
該屬性的下一個值是備用，以防圖像未加載或可能由于某些內部故障而無法找到。我確定您不希望您的網站“無光標”，因此添加后備非常重要。您還可以添加盡可能多的后備URL。
您還可以在網頁的特定元素或部分上自定義光標。下面是一個 CodePen 示例：
這就是在CSS中自定義光標的全部內容。現在讓我們看看如何用 JavaScript 做到這一點。
要使用JavaScript實現這一點，您需要操作DOM以獲得所需的結果。
首先，讓我們看一下 HTML：
從上面的代碼片段中，我創建了兩個div來表示光標。計劃是從JavaScript操作這些 div，以便它們在網頁上的移動由 JavaScriptmousemove事件使用鼠標移動的 X 和 Y 坐標滾動。
現在讓我們來看看 CSS 部分，這將是一件有意義的事情。
如何使用CSS設置自定義光標的樣式
看看上面的CSS代碼，我禁用了光標（還記得cursor:none嗎？）。這將使光標不可見，只允許我們的自定義光標顯示。
我設計的divs樣式賦予它們獨特的“類似光標”的外觀。你絕對可以用它做更多的事情，如果有圖像，可以添加背景圖像、表情符號、貼紙等。現在，讓我們看一下JavaScript
我在全局窗口對象上添加了一個事件監聽器來監聽任何鼠標移動。當鼠標移動時，moveCursor函數表達式被調用并接收事件對象作為參數。使用此參數，我能夠在頁面上的任何位置獲取鼠標上的 X 和 Y 坐標。
我已經使用JavaScript從DOM中選擇了每種類型的光標querySelector。所以我所要做的就是根據鼠標的 X 和 Y 坐標移動它們，方法是使用translate3d值控制樣式上的變換屬性。這將使div 在鼠標移動到網頁上的任何點時移動。
您看到的反引號稱為模板文字。這可以輕松編寫變量以將它們附加到字符串。另一種方法是將變量連接到字符串。
現在由您作為開發人員來選擇最適合您的方法。如果您想使用一些漂亮的表情符號或圖像作為光標，您可以選擇使用CSS。另一方面，您可能想要使用JavaScript，這樣您就可以自定義您選擇的復雜形狀并為光標的移動設置動畫。
無論哪種方式都很好，只要您獲得所需的結果并讓您網站的所有訪問者驚嘆。
*原文鏈接：https://www.freecodecamp.org/news/how-to-make-a-custom-mouse-cursor-with-css-and-javascript/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
