JS+HTML实现的圆形可点击区域示例【3种方法】
作者：筱葭 发布时间：2024-04-10 10:42:30
标签：JS,HTML,圆形
本文实例讲述了JS+HTML实现的圆形可点击区域。分享给大家供大家参考，具体如下：
方法一：
<img>通过usemap映射到<map>的circle形<area>。
<img src="images/lanlvseImg.png" usemap="#Map" />
<map name="Map" id="Map">
<area shape="circle" coords="100,100,50" href="http://www.baidu.com" rel="external nofollow" target="_blank"/>
</map>
方法二：
设置div的border-radius:50％。
<div id="circle"></div>
#circle{
background:red;
width:100px;
height:100px;
border-radius:50％;
}
方法三：
JS实现，获取鼠标点击位置坐标，判断其到圆点的距离是否不大于圆的半径，来判断点击位置是否在圆内。
document.onclick = function(e) {
var r = 50;
var x1 = 100;
var y1 = 100;
var x2= e.clientX;
var y2= e.clientY;
var distance = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
if (distance <= 50)
alert("Yes!");
}
感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具：http://tools.jb51.net/code/WebCodeRun测试一下运行效果。
希望本文所述对大家JavaScript程序设计有所帮助。
来源：https://blog.csdn.net/zhouziyu2011/article/details/58601789
0
投稿猜你喜欢
1. 为什么要有转义？ASCII 表中一共有 128 个字符。这里面有我们非常熟悉的字母、数字、标点符号，这些都可以从我们的键盘中输出。除此- Exec sp_droplinkedsrvlogin ZYB,Null --删除映射（录与链接服务器上远程登录之间的映射） Exec sp_
- 注释：在大多数的情况下，修改MySQL是需要有mysql里的root权限的，所以一般用户无法更改密码，除非请求管理员。方法1使用phpmya
- 前言：数据的排序是比较常用的操作，DataFrame 的排序分为两种，一种是对索引进行排序，另一种是对值进行排序，接下来就分别介绍一下。1.
- 导语昨晚玩起了小时候玩的游戏“吃豆豆”，但是我发现，一局游戏三条命，我根本不能吃完所有的豆豆，总是被
- 项目结构：运行效果：=========================================================代码部
- 一、概念介绍本质上，webpack 是一个现代JavaScript 应用程序的静态模块打包器(module bundler)。当 webpa
- 前言：为了帮助广大考生和家长了解高考历年的录取情况，很多网站都汇总了各省市的录取控制分数线，为广大考生填报志愿提供参考。因受多种因素影响，每
- 1、psutil是一个跨平台库（https://github.com/giampaolo/psutil）能够实现获取系统运行的进程和系统利用
- logging库提供了两个可以用于日志滚动的class（可以参考https://docs.python.org/2/library/logg
- PyCharm是一种Python IDE，带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具，比如调试、语法高亮、Proje
- 一、把MySql.Data.dll放到BIN目录下。 二、这是aspx.cs的全部源码，修改参数直接运行即可！ &nbs
- 引言随着圣诞的到来，大家纷纷@官方微信给自己的头像加上一顶圣诞帽。当然这种事情用很多P图软件都可以做到。但是作为一个学习图像处理的技术人，还
- 本文实例讲述了python多重继承用法，分享给大家供大家参考。具体实现方法如下：1.mro.py文件如下：#!/usr/bin/python
- 例子：#!/bin/perlprint "Please input an string and a number by order
- 我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间.然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用I
- doctest库就是一个测试用的标准库，从意义上我们可以看出是关于测试有关系的，基本上就是测试是否和自己想要的结果是否一致，经常能在编写文档
- 前言本文给大家详细介绍了解决php-fpm.service not found问题的相关内容，文中介绍的非常详细，下面来一起看看详细的介绍：
- 技巧之一：提高使用Request集合的效率 访问一个ASP集合来提取一个值是费时的、占用计算资源的过程。因为这个操作包含了一系列对相关集合的
- 在开始本文之前，首先要保证你的mysql的密码是对的不然就要想起他的办法了。下面话不多说了，下面来一起看看吧。一、首先进入cmd 切入MyS
