Partager des exemples sur JS contrôlant la souris pour refuser de cliquer sur un certain bouton-js tutoriel-php.cn

Partager des exemples sur JS contrôlant la souris pour refuser de cliquer sur un certain bouton

小云云

Libérer： 2017-12-29 14:04:25

original

1409 Les gens l'ont consulté

Cet article partage principalement un exemple de JS contrôlant la souris pour refuser de cliquer sur un certain bouton. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un coup d'œil. J'espère que cela pourra aider tout le monde à maîtriser la technologie JS contrôlant la souris pour refuser de cliquer sur un certain bouton.

Il est interdit de sélectionner le bouton de contrôle JS

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
 window.onload=function(){
 
  document.getElementById("s").onmouseover=function(evet){
   
   var _x=this.offsetLeft;
   var _y=this.offsetTop;
   var x=Math.random()*180+Math.random()*50;
   var y=Math.random()*120+Math.random()*50;
   this.style.position="absolute";
   this.style.top=y+'px';
   this.style.left=x+'px';
   return false;

  }
  document.getElementById("s").onclick=function(){
  alert("就知道你心里想的和表面做的是相反的！");
  document.getElementById("main").style.display="none";
  document.getElementById("img").style.display="block";
  }
  document.getElementById("w").onclick=function(){
  alert("宝贝：谢谢你的爱!我爱你╮(╯▽╰)╭");
  document.getElementById("main").style.display="none";
  document.getElementById("img").style.display="block";
  }
}

 </script>
 <style>
 *{
 margin:0;
 padding:0;
 }
 html{
 height: 100%;
 background:url(http://img17.3lian.com/d/file/201702/13/9524e4e08e99e0423f9e9f299e314c72.gif) no-repeat; 
 background-size: cover;
 }
 span{
 width: 100%;
 height: 100px;
 display: block;
 text-align: center;
 line-height: 100px;
 color: #fff;
 }
 section{
 }
 section button:nth-child(1){
 position: absolute;
 background: #DE7C2C;
 left: 100px;
 border: 0;
 z-index: 1;
 }
 section button:nth-child(2){
 position: absolute;
 z-index: 0;
 border: 0;
 background: #DE7C2C;
 left: 150px;
 }
 p{
  width:300px; 
  height:200px; 
  background:rgba(34,93,146,.7); 

  border:1px solid #eee; 
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
 }
 </style>
</head>
<body>
 <p id="main">
 <span>亲爱的我爱你，你爱我吗？</span>
 <section>
 <button id="s" style="padding:1px 10px;">不</button>
  <button id="w" style="padding:1px 10px;">爱</button>
 </section>
  
</p>
<p id="img" style=" display:none; width:100%; height:100%; background:url(http://upfile.asqql.com/2009pasdfasdfic2009s305985-ts/2017-8/20178172014060928.gif) no-repeat; background-size:cover;"></p>
</body>
</html>

Copier après la connexion

Recommandations associées :

js contrôle le mouvement et l'effet de suppression des événements de la souris, compétences display_javascript

Implémentation de l'événement de clic de souris JS

exemple jsp js de masquage lorsque la souris se déplace vers la zone spécifiée et affiche l'onglet en la quittant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!