ホームページ >ウェブフロントエンド >H5 チュートリアル >ページ上に円形のクリック可能領域を実装するにはどうすればよいですか?

ページ上に円形のクリック可能領域を実装するにはどうすればよいですか?

PHP中文网
PHP中文网オリジナル
2017-06-21 14:33:572434ブラウズ

1. マップ+エリア

DWソフトウェア実装方法ビデオ:

2. 境界半径(H5)

  1. <スタイル> .circle{

  2. カーソル: ポインタ;

  3. / *テキスト設定*/

  4. 左:50px;

  5. 行の高さ: 100px;

  6. テキストの整列:

  7. 背景色: dimgray; lt;/

    スタイル

    >
  8. 3. 点が円上にあるかどうかを調べたり、マウス座標を取得したりするための単純なアルゴリズムを実装します。 2 点
  9. |AB|=Math.abs(Math.sqrt (Math.pow (X2 - 円の内側にない情報は円の外側に表示されます

  10. document.onclick=
  11. function( e){
  12. var r=50;

    //円の半径
  13. var x1 =100,y1=100,x2= e.clientX;y2= e.clientY;

  14. //マウスポイントの位置と円の中心の間の距離を計算します

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

if(len

console.log(

"inside")
}
else{

console.log(

"外側")

      }
    1. }

以上がページ上に円形のクリック可能領域を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。