Javascript toggle & CSS 範例1

觸發JS 常用的方式有

onClick

onfocus

				
					  <div class="trig" onMouseover="toggle();">onMouseover</div>
 <div class="trig"  onMouseout="toggle();">onMouseout</div>
 <div class="trig"  onClick="toggle();">onClick</div>
 <INPUT class="trig" VALUE="onfocus"  onfocus="toggle();"></INPUT>
 <div tabindex="0" class="trig" VALUE="onfocus"  onfocus="toggle();"></div>

				
					<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
  
  <style type="text/css">
    .all{
      background-color: #eee;
    }
    
    
    #p1{
      width: 100px;
      height: 200px;
      background-color: #fc0;
      display: inline-block;
      background-image: URL('https://daco.cloudaccess.host/wp-content/uploads/2021/10/timo-wielink-4Zk45jNyQS4-unsplash.jpg');
  background-repeat: no-repeat;
  background-size: cover;
    }
    

    
        #p2{
      width: 100px;
      height: 200px;
      background-color: #c90;
      display: inline-block;
      transform: translateX(10px) rotateZ(15deg);
      transition: 0.5s;
    }
    
        #p2.active{
      transform: translateX(-50px) rotateZ(0deg);
      transition: 0.5s;
    }
    
    
        #p3{
      width: 100px;
      height: 200px;
      background-color: #cc9;
      display: inline-block;
      transform: translateX(10px) rotateZ(25deg);
      transition: 0.5s;
    }
    
     #p3.active{
      transform: translateX(-100px) rotateZ(0deg);
      transition: 0.5s;
    }
    
        #p4{
      width: 100px;
      height: 200px;
      background-color: #c99;
      display: inline-block;
      transform: translateX(10px) rotateZ(35deg);
      transition: 0.5s;
    }
    
     #p4.active{
      transform: translateX(-150px) rotateZ(0deg);
      transition: 0.5s;
    }
    
    
    
    
  </style>
  
  
</head>
<body data-rsssl=1>

 
  <div class="all" onMouseover="toggle();" onMouseout="toggle();">

    <div id="p1"></div><div id="p2"></div><div id="p3"></div><div id="p4"></div>
    
  </div>
  
  
  <script>
    function toggle(){
    document.getElementById("p2").classList.toggle("active");
      document.getElementById("p3").classList.toggle("active");
      document.getElementById("p4").classList.toggle("active");
    }
  </script>  
  
  
</body>
</html>

Daco Note

Javascript toggle & CSS 範例1