Rumah > hujung hadapan web > html tutorial > 总结锚点在html和js中的用法

总结锚点在html和js中的用法

巴扎黑
Lepaskan: 2017-06-01 16:22:48
asal
2051 orang telah melayarinya

在HTML中锚点的用法:

1.详解html锚点是什么 

学习网页知识入门的肯定是HTML,其中html的锚点 到底是干吗的?

通俗简单地说,比如一篇很长的文章,你想按分段精确来看,那就可以用到锚点了。

bca0a344c23f2b6362e63bc558fc5675.png

2.html锚点使用示例

了解到锚点是什么之后,我们来了解下锚点的用法。

8268e24b1fd73fd9c0e4c9a0027fbb19.png

js中锚点的使用实例:

1.js 定位到某个锚点的方法

html页面内可以设置锚点,锚点定义

3096ea6106812dd307f5111e4b63cf82.jpg

2.js实现做通讯录的索引滑动显示效果和滑动显示锚点效果

第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上。

思路:监听touchmove事件,获取clientX和clientY,传入到elementFromPoint,然后获取到元素以后执行click()即可。

3a5dbe114bde102f14da61fbe474b19d.jpg

3.Javascript实现导航锚点滚动效果实例

常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。

fcf7d395febf9941a2fbe2e933692764.jpg

锚点相关问答:

1.javascript - angular锚点问题

2.angular.js - AngularJs通过定义锚点链接控制页面输出

3.html5 - HTML中a标签的锚点问题

Atas ialah kandungan terperinci 总结锚点在html和js中的用法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan