片的位置搞的差不多了之后再来完善一下。你看这个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小时内与您取得联系。