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