JavaScript マウス応答イベント_JavaScript スキルを学ぶ-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript マウス応答イベント_JavaScript スキルを学ぶ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:23 PM

javascript マウスイベント

この記事では、参考までに簡単なマウスシミュレーションのケースを紹介します。具体的な実装内容は次のとおりです。
キャプチャマウスイベントを実装する方法。マウスがスライドするときに、現在のマウスの座標を取得し、キャプチャディスプレイスメントを透明領域にバインドして、マウススライドモデルをシミュレートされた透明領域に実装します。

レンダリング:

HTML コード:

<!DOCTYPE html>
<html >
 <head>
 <meta charset="UTF-8">
 <title> the mouse </title>
 <link rel="stylesheet" href="css/new.css">
 </head>
 <body>
 <div class="main">
 <div class="content">
 <div class="content-nav-top">
  <span onclick = 'koringz.createclick1(0)'>默认</span>
  <span onclick = 'koringz.createclick1(50)'>圆</span>
 </div>
 <div class="content-nav-left">
  <span onclick = 'koringz.createclick2 (0.25) '>0.25</span>
  <span onclick = 'koringz.createclick2 (0.5) '>0.5</span>
  <span onclick = 'koringz.createclick2 (0.75)'>0.75</span>
  <span onclick = 'koringz.createclick2 (1) '>1</span>
 </div>
 <div class="box">鼠标感应器(the mouse sensor)</div>
 <div class="block">
  <div class='block_case'></div>
 </div>
 </div>
 </div>
 <script type="text/javascript" src="js/demo.min/demo.min.js"></script>
 </body>
</html>

ログイン後にコピー

CSS コード:

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 position: absolute;
 text-align: center;
 height: 100%;
 width: 100%;
}
.main{
 position: relative;
 margin: 0 auto;
 height: 100%;
 background-color: rgb(48, 70, 82)
}
.main .content{
 position:absolute;
 display: inline-block;
 top:50%;
 left:50%;
 margin-left: -300px;
 margin-top: -150px;
 width: 600px;
 height: 300px;
 line-height: 300px;
 /*overflow: hidden;*/
 background: radial-gradient(ellipse farthest-corner, rgb(115, 176, 198) 0%, #888 100%);
 background: -webkit-radial-gradient(ellipse farthest-corner, rgb(115, 176, 198) 0%, #888 100%);
 box-shadow: 2px 3px 8px rgba(67, 50, 124 ,.6),0px 0px 8px rgba(67, 50, 124 ,.6);
}
.main .content .content-nav-top{
 display: none;
 position: absolute;
 margin-top: -50px;
 height: 50px;
 width: 300px; 
}
.main .content .content-nav-top >span{
 display: block;
 float: left;
 font-size: 16px;
 font-weight: normal;
 margin-right:1px;
 width: 50px;
 height: 50px; 
 line-height: 50px; 
 background-color: rgba(251, 214, 146,.3); 
 box-shadow: 0px 4px 13px rgb(222,222,222,1);
 cursor: pointer;
}
.main .content .content-nav-top >span:nth-child(1){
 border-radius:0 ; 
}
.main .content .content-nav-top >span:nth-child(2){
 border-radius:50% ; 
}
.main .content .content-nav-top >span:nth-child(3){
 border-radius:0; 
}
.main .content .content-nav-top >span:nth-child(4){
 border-radius: 50% ; 
}
.main .content .content-nav-left{
 display: none;
 position: absolute;
 margin-left: -50px;
 width: 50px;
 height: 300px; 
}
.main .content .content-nav-left >span{
 display: block;
 font-size: 16px;
 font-weight: normal;
 margin-bottom:1px;
 width: 50px;
 height: 50px; 
 line-height: 50px; 
 background-color: rgb(85, 145, 140); 
 box-shadow: 0px 4px 13px rgb(222,222,222,1);
 border-radius:50% 0 0 50% ; 
 cursor: pointer;
}
.box{
 position: relative;
 float: left;
 width: 49.9%;
 height: 100%;
 border-right-style: solid;
 border-right-width: 1px;
 border-right-color: rgba(211,211,211,.5);
 color:rgb(99, 84, 168);
 text-shadow: 0px 1px 0px #888,1px 0px 0px #888,0px 0px 1px #888;
 }
.block{
 float: right;
 width: 50%;
 height: 100%;
}

ログイン後にコピー

JSコード:

var koringz = (function(){ 
 var x,
 y,
 getmain,
 getcontent,
 getbox,
 getblock,
 getblock_case,
 getnav_top,
 block_case_margin_top,
 block_case_margin_left,
 block_casetostring1,
 block_casetostring2,
 block_casesubstring1,
 block_casesubstring2,
 istouch;
 getmain = document.querySelector('.main');
 getcontent = getmain.querySelector('.content');
 getbox = getcontent.querySelector('.box');
 getblock = getcontent.querySelector('.block');
 getblock_case = getblock.querySelector('.block_case');
 getnav_top = getcontent.querySelector('.content-nav-top');
 getnav_left = getcontent.querySelector('.content-nav-left');
 function get_box() {
 w_getbox_distance = getbox.offsetWidth;
 h_getbox_distance = getbox.offsetHeight;
 istouch = 'ontouchstart' in window;
 getbox.addEventListener(istouch&#63;'touchmove':'mousemove',mouseevent,false);
 getbox.addEventListener(istouch&#63;'touchmove':'mousemove',nav,false)
 }
 function nav () {
 return new_nav();
 }
 var new_nav = function () {
 getnav_top.style.display = 'block';
 getnav_left.style.display = 'block';
 }
 function move_box() {
 getblock_case.style.width = '0px';
 getblock_case.style.height = '0px';
 block_case_margin_left = getblock_case.style.marginLeft = getblock.offsetWidth/2 + 'px';//子节点
 block_case_margin_top = getblock_case.style.marginTop = getblock.offsetHeight/2 + 'px';
 block_casetostring1 = block_case_margin_left.toString();//值转化为字符串
 block_casetostring2 = block_case_margin_top.toString();
 block_casesubstring1 = block_casetostring1.substring(0,3);
 block_casesubstring2 = block_casetostring2.substring(0,3); 
 }
 var mouseevent = function () {
 mouseEvent(event);
 }
 function mouseEvent(e){
 var zore = 0,
  val = 1;
 if(istouch){
  x = e.touches[zore].pageX;
  y = e.touches[zore].pageY;
  e.preventDefault();
 }
 else if(!istouch){
  x = w_getbox_distance/2 != undefined &#63; e.offsetX:e.layerX;
  y = h_getbox_distance/2 != undefined &#63; e.offsetY:e.layerY;
 } 
 if(val = true){
  getblock_case.style.width = x + 'px';//获得了mouse划过的位置
  getblock_case.style.height = y + 'px';
  getblock_case.style.marginLeft = (block_casesubstring1-x/2) +'px';
  getblock_case.style.marginTop = (block_casesubstring2-y/2) +'px';
  getblock_case.style.backgroundColor = "rgba(147, 106, 77,1)";
 }
 }
 (function (){
  window.onload = function(){
  move_box();
  get_box()
  }
 })()
 var click =function () {
 this.borderradius = function(num) {
  if(typeof num == 'number'){
  if(num == 0){
   getblock_case.style.borderRadius = num;
  }
  else if(num > 0){
   getblock_case.style.borderRadius = num +'%';
  }
  else{
   return false;
  }
  }
 }
 this.opacitas = function (num) {
  if(typeof num == 'number'){
  getblock_case.style.opacity = num;
  }
  else{
  return false;
  }
 }
 }
 var Click = new click();
 return {
 createclick1 :Click.borderradius,
 createclick2 :Click.opacitas
 }
})()

ログイン後にコピー

ここでのマウスの矢印は、お好みのアイコンに置き換えることもできます。また、シミュレートされたマウス領域の色も自由に変更できます。また、シミュレートされた領域のエフェクトは、点線、線形、アニメーションなどにすることもできます。。
上記は JavaScript のマウス応答イベントの詳細な紹介であり、皆さんの学習に役立つことを願っています。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7403

Java チュートリアル

1630

CakePHP チュートリアル

1358

Laravel チュートリアル

1268

PHP チュートリアル

1218

Related knowledge

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築 Dec 17, 2023 pm 05:13 PM

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築はじめに: 今日、天気予報の精度は日常生活と意思決定にとって非常に重要です。テクノロジーの発展に伴い、リアルタイムで気象データを取得することで、より正確で信頼性の高い天気予報を提供できるようになりました。この記事では、JavaScript と WebSocket テクノロジを使用して効率的なリアルタイム天気予報システムを構築する方法を学びます。この記事では、具体的なコード例を通じて実装プロセスを説明します。私たちは

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScriptでinsertBeforeを使用する方法 Nov 24, 2023 am 11:56 AM

使用法: JavaScript では、insertBefore() メソッドを使用して、DOM ツリーに新しいノードを挿入します。このメソッドには、挿入される新しいノードと参照ノード (つまり、新しいノードが挿入されるノード) の 2 つのパラメータが必要です。

JavaScript で HTTP ステータスコードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータスコードを取得する方法の紹介: フロントエンド開発では、バックエンドインターフェイスとの対話を処理する必要があることが多く、HTTP ステータスコードはその非常に重要な部分です。 HTTP ステータスコードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータスコードとは何ですか? HTTP ステータスコードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

See all articles

JavaScript マウス応答イベント_JavaScript スキルを学ぶ

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック