JS+HTML實現(xiàn)的圓形可點擊區(qū)域示例【3種方法】
更新時間：2018年08月01日 09:43:54 作者：筱葭
這篇文章主要介紹了JS+HTML實現(xiàn)的圓形可點擊區(qū)域,結(jié)合實例形式分析了javascript結(jié)合HTML元素屬性實現(xiàn)一個圓形的可點擊區(qū)域相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了JS+HTML實現(xiàn)的圓形可點擊區(qū)域。分享給大家供大家參考，具體如下：
方法一：
<img>通過usemap映射到<map>的circle形<area>。
<img src="images/lanlvseImg.png" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circle" coords="100,100,50" 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實現(xiàn)，獲取鼠標點擊位置坐標，判斷其到圓點的距離是否不大于圓的半徑，來判斷點擊位置是否在圓內(nèi)。
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前端代碼調(diào)試運行工具：http://tools.jb51.net/code/WebCodeRun測試一下運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
您可能感興趣的文章:
- JS使用遮罩實現(xiàn)點擊某區(qū)域以外時彈窗的彈出與關(guān)閉功能示例
- js點擊任意區(qū)域彈出層消失實現(xiàn)代碼
- JavaScript實現(xiàn)點擊按鈕復制指定區(qū)域文本(推薦)
- JS實現(xiàn)點擊顏色塊切換指定區(qū)域背景顏色的方法
- js實現(xiàn)的點擊div區(qū)域外隱藏div區(qū)域
- js中點擊空白區(qū)域時文本框與隱藏層的顯示與影藏問題
- js+html5實現(xiàn)canvas繪制橢圓形圖案的方法
- js+html5實現(xiàn)canvas繪制圓形圖案的方法
- JavaScript Canvas繪制圓形時鐘效果
- js Canvas實現(xiàn)圓形時鐘教程
- JavaScript實現(xiàn)的圓形浮動標簽云效果實例
相關(guān)文章
這篇文章主要為大家總結(jié)了Bootstrap table簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了JS利用cookie記憶當前位置的防刷新導航效果,涉及JavaScript操作cookie及導航樣式布局的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了javascript計算漸變顏色的實例的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
JavaScript截取字符串的Slice、Substring、Substr函數(shù)詳解和比較
這篇文章主要介紹了JavaScript截取字符串的Slice、Substring、Substr函數(shù)詳解和比較,需要的朋友可以參考下2014-03-03
我就是想怎么獲取 每個層 相對于父級層 是第幾個，需要的朋友可以參考下。2011-01-01
這篇文章主要給大家介紹了關(guān)于js中對象與對象創(chuàng)建方法的各種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-02-02
本篇文章主要介紹了JS中傳遞參數(shù)的幾種不同方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要和大家介紹一下JavaScript中的變量,作用域和垃圾回收的定義與使用，文中的示例代碼講解詳細，對我們學習JavaScript有一定的幫助，需要的可以參考一下2022-11-11
本文主要介紹了Ajax驗證用戶名或昵稱是否已被注冊的實例方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04
移動端開發(fā)時,H5長頁面在iOS系統(tǒng)中滑動時,當頁面滑動到頂部或底部時,頁面還能夠上滑或下滑,手指離開屏幕后回彈,這就時橡皮筋效果,這篇文章主要給大家介紹了關(guān)于iOS微信H5頁面橡皮回彈效果的相關(guān)資料,需要的朋友可以參考下2021-07-07