怎么能在页面上实现一个圆形可点击区域?

发布时间:2022-05-17 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了怎么能在页面上实现一个圆形可点击区域?脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
1. map+area

DW软件实现方法 视频:

2. border-radius(H5)

  1. @H_512_12@<style>

  2. .circle{

  3. /*设置*/

  4. width:100px;

  5. height:100px;

  6. border-radius: 50%;

  7. cursor: pointer;

  8. /*文字设置*/

  9. posITion: absolute;

  10. left:50px;

  11. top:50px;

  12. line-height: 100px;

  13. text-align: center;

  14. color: white;

  15. background-color:dimgray;

  16. }

  17. </style>

3. 纯js实现

求点在不在圆上的简单算法、获取鼠标坐标等等
两点之间的距离计算公式

|AB|=Math.abs(Math.sqrt(Math.pow(X2-X1),2)+Math.pow(Y2-Y1,2)))

假设圆心为(100,100),径为50,在圆内点击弹出相应的信息,在圆外显示不在圆内的信息

    1. document.onclick=function(e){

    2. VAR r=50;//圆的半径

    3. var x1=100,y1=100,x2= e.clientX;y2= e.clientY;

    4. //计算鼠标点的位置与圆心的距离

    5. var len=Math.abs(Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)));

    6. if(len<=50){

    7. console.LOG("内")

    8. }else{

    9. console.log("外")

    10. }

    11. }

以上就是怎么能在页面上实现一个圆形可点击区域?的详细内容,更多请关注脚本宝典其它相关文章

脚本宝典总结

以上是脚本宝典为你收集整理的怎么能在页面上实现一个圆形可点击区域?全部内容,希望文章能够帮你解决怎么能在页面上实现一个圆形可点击区域?所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。