国内区块链职业教育引领品牌，专注于区块链底层开发与技术培训。
Day22 - 鼠标锚点动画生成指南
本文出自：
推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 22 篇。完整中文版指南及视频教程在 。
第22天的练习是一个动画练习，当鼠标移动到锚点处，会有一个白色的色块移动到当前锚点所在的位置。演示图如下所示：
&!DOCTYPE html&
lang="en"&
charset="UTF-8"&
&??????Follow Along Nav&
rel="stylesheet" href="style.css"&
class="menu"&
& href=""&Home&&
& href=""&Order Status&&
& href=""&Tweets&&
& href=""&Read Our History&&
& href=""&Contact Us&&
class="wrapper"&
&Lorem ipsum dolor sit amet,
href=""&consectetur& adipisicing elit. Est
href=""&explicabo& unde natus
necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!&
&Aspernatur sapiente quae sint
href=""&soluta& modi, atque praesentium laborum pariatur earum
href=""&quaerat&
cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.&
&Cum ipsam quod, incidunt sit ex
href=""&tempore& placeat maxime
href=""&corrupti& possimus
href=""&veritatis&
ipsum fugit recusandae est doloremque? Hic,
href=""&quibusdam&, nulla.&
&Esse quibusdam, ad, ducimus cupiditate
href=""&nulla&, quae magni odit
href=""&totam& ut consequatur
eveniet sunt quam provident sapiente dicta neque quod.&
href=""&dicta& sequi culpa fugiat
href=""&consequuntur& pariatur optio ad minima, maxime
href=""&odio&,
distinctio magni impedit tempore enim repellendus
href=""&repudiandae& quas!&
box-sizing: border-box;
box-sizing: inherit;
min-height: 100vh;
margin: 0;
font-family: sans-serif;
background: linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%), linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%), linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%), linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
.wrapper {
margin: 0 auto;
max-width: 500px;
font-size: 20px;
line-height: 2;
position: relative;
text-decoration: none;
color: black;
background: rgba(0, 0, 0, 0.05);
border-radius: 20px
.highlight {
transition: all 0.2s;
border-bottom: 2px solid white;
position: absolute;
background: white;
z-index: -1;
border-radius: 20px;
display: block;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
padding: 0;
display: flex;
list-style: none;
justify-content: center;
margin: 100px 0;
display: inline-block;
padding: 5px;
margin: 0 20px;
color: black;
const triggers = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.appendChild(highlight);
function highlightLink() {
const linkCoords = this.getBoundingClientRect();
const coords = {
width: linkCoords.width,
height: linkCoords.height,
top: linkCoords.top + window.scrollY,
left: linkCoords.left + window.scrollX
highlight.style.width = `${coords.width}px`;
highlight.style.height = `${coords.height}px`;
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
triggers.forEach(a =& a.addEventListener('mouseenter', highlightLink));
通过HTML源码我们不难发现，所有锚点都是由a标签组成，所以在js代码中我们首先先获取所有的a标签对象，将其存储到triggers变量中。
const triggers = document.querySelectorAll('a');
在效果图中高亮状态的小块其实就是一个span标签，在JS代码中创建了一个span标签，并且为其添加了一个highlight的class。
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.appendChild(highlight);
对所有的a标签进行事件监听，当鼠标移动到锚点时，会自动触发highlightLink方法。
triggers.forEach(a =& a.addEventListener('mouseenter', highlightLink));
getBoundingClientRect()
Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
rectObject = object.getBoundingClientRect();
返回值是一个
对象，这个对象是由该元素的
方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。
DOMRect属性表：
Y 轴，相对于视口原点（viewport origin）矩形盒子的底部。只读。
矩形盒子的高度（等同于 bottom 减 top）。只读。
X 轴，相对于视口原点（viewport origin）矩形盒子的左侧。只读。
X 轴，相对于视口原点（viewport origin）矩形盒子的右侧。只读。
Y 轴，相对于视口原点（viewport origin）矩形盒子的顶部。只读。
矩形盒子的宽度（等同于 right 减 left）。只读。
X轴横坐标，矩形盒子左边相对于视口原点（viewport origin）的距离。只读。
Y轴纵坐标，矩形盒子顶部相对于视口原点（viewport origin）的距离。只读。
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
空边框盒（译者注：没有内容的边框）会被忽略。如果所有的元素边框都是空边框，那么这个矩形给该元素返回的 width、height 值为0，left、top值为第一个css盒子（按内容顺序）的top-left值。
当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果不希望属性值随视口变化，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的常量值。
highlightLink方法
function highlightLink() {
const linkCoords = this.getBoundingClientRect();
&!--`coords`计算坐标，宽和高。--&
const coords = {
width: linkCoords.width,
height: linkCoords.height,
top: linkCoords.top + window.scrollY,
left: linkCoords.left + window.scrollX
highlight.style.width = `${coords.width}px`;
highlight.style.height = `${coords.height}px`;
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;js如何实现鼠标模拟点击_百度知道
js如何实现鼠标模拟点击
请问有什么办法网页打开后鼠标可以自动点击一下网页指定的位置？
主要是想点击这个
&li&&a href=&javascript:;& id=&admin-fullscreen&&&span class=&am-icon-arrows-alt&&&/span& &span class=&admin-fullText&&自定义点击一次&/span&&/a&&/li&
我尝试过...
我有更好的答案
主动触发事件是一个经常会用到的技巧，它很重要。它和事件绑定一样存在着浏览器兼容性问题。传统浏览器（IE8-）使用createEventObject来创建事件对象，用fireEvent这个方法来触发事件；现代浏览器用createEvent来创建对象，用dspatchEvent来触发事件。//获取浏览器版本var isIE=navigator.userAgent.match(/MSIE (\d)/i);isIE=isIE?isIE[1]://事件函数function onclick(e){
alert(e.msg||&表酱紫啦，人家羞涩啦～&);};//给document绑定一个点击事件isIE&9
//传统浏览器使用attachEvent
?document.attachEvent(&onclick&,onclick)
//现代浏览器使用addEventListner
:document.addEventListener(&click&,onclick,false);//触发自定义事件if(isIE&9){
//传统浏览器
//创建对象
var event=document.createEventObject();
//给事件对象添加属性
event.msg=&我是fireEvent触发的&;
//触发事件
document.fireEvent(&onclick&,event);}else{
//现代浏览器
//创建事件对象
var e=document.createEvent(&MouseEvents&);
//初始化事件对象
e.initMouseEvent(&click&),
//给事件对象添加属性
e.msg=&我是despatchEvent触发的&;
//触发事件
document.dispatchEvent(e);};
采纳率：88%
来自团队：
&!DOCTYPE&html&&html&&&&head&
&meta&http-equiv=&Content-Type&&content=&text/&charset=UTF-8&&
RunJS&演示代码
&script&type=&text/javascript&&
function&autoclick(){
var&lnk&=&document.getElementById(&admin-fullscreen&);
lnk.click();
onload&=&function(){
var&lnk&=&document.getElementById(&admin-fullscreen&);
lnk.onclick&=&function(){
alert(&被点击&);
setTimeout(autoclick,&1000);
&/script&&&&/head& &body&
&a&href=&javascript:void(0);&&id=&admin-fullscreen&&
&span&class=&am-icon-arrows-alt&&
&span&class=&admin-fullText&&
自定义点击一次
&/ul&&&&/body&&/html&
谢谢！请问有控制鼠标的办法吗？这个可以点击，但是还是没有反应！就行那个软件模拟点击哪有！谢谢 高手！
本回答被提问者和网友采纳
让珊瑚远离惊涛骇浪的侵蚀吗？那无异是将它们的美丽葬送。
为您推荐：
其他类似问题
鼠标的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。原生js模拟锚点，实现点击后，内容定位到本页的对应位置
原文地址：http://www.cnblogs.com/xiangming25/p/6078126.html
这时，如果我们使用锚点的方法就会存在一个问题，当我们点击顶部的tab部分是，
页面的url就回变成http://www.×××××.com?brandId=1&brandName=***#434
这个时候我们在点击翻页的时候，页面就会跳转到页面的顶部，而不是我们访问的这个位置。
解决的办法是：
1. 不给tab部分添加类似与&a href="/test#333"&&/a&, 写成 &a href="javascript:;"&&/a&阻止a标签的默认操作。
2. 给 a 标签添加点击事件： &a href="javascript:;" ng-click="_scrollTo('someId')"&&/a&
3. 定义对应的实现方法：
　　function _scrollTo(id){
　　　　var _id = document.getElementById(id);
　　　　window.scrollTo(0,_id.offsetTop);
ps: 这里的id是我们想跳转到的节点对应的id
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！html点击一个按钮，跳转到当前页面的另一个指定位置！这样的代码怎么写_百度知道
html点击一个按钮，跳转到当前页面的另一个指定位置！这样的代码怎么写
html点击一个按钮，跳转到当前页面的另一个指定位置！这样的代码怎么写，最好带教程，还有这样的代码叫什么名字？
我有更好的答案
HTML锚点。。设置锚点&a&name=&goto&&&/a&跳转到锚点&a&href=&#goto&&......&/a&当然这个是没有动画效果的，需要js css才能实现动画
那我要设置一个图片上的热点区域，怎么设置锚点？然后即将要跳转的那个图片的锚点又怎么设置呢？
这应该要加上地图索引了吧~~用DreamWeaver可以比较方便的生成的&map&name=&mymap&&&&&&&area&shape=&&&coords=&&&href=&#goto&&&&&&&!--.........--&&/map&&img&........&&usemap=&#mymap&&
采纳率：44%
来自团队：
亲，找一下html的锚点链接就会了
能帮我找下吗？
发个html参考手册给你吧，在链接那里有锚点链接的介绍和举例
&a name=name1 & 指定的跳转目的地&/a&&a href=&#name1&&点这里开始跳转&/a&
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。