El uso de CSS + JS alcanzar un ratón movido fuera de la puerta giratoria efecto

1. CSS conocimiento lineal de fondo: gradiente lineal repitiendo lineal gradiente para crear una "imagen" duplicado

la sintaxis CSS

fondo : repetir - lineal - gradiente ( ángulo | a lado - o - esquina , de color - PARAR1 , de color - Stop2 , ...); 

Valor	descripción
ángulo	Se define como un ángulo de la dirección del gradiente. A partir de 0 grados a 360deg, el valor predeterminado es 180 grados.
de lado o esquina	gradiente lineal especifica la posición de inicio. Dos palabras clave: una primera posición horizontal especificada (izquierda o derecha), la segunda especifica la posición vertical (arriba o abajo). El orden es aleatorio, cada palabra clave es opcional.
PARAR1 color, color Stop2, ...	Especifica el color inicial y final de la gradación, los valores de color, la posición de parada (Alternativamente, usando el porcentaje especificado) composición.

 

El principio div padre e hijo

Menor que la anchura de la div padre div sub, la linterna estilo sub-div se muestra por el gradiente lineal, el efecto de funcionamiento de una puerta giratoria, el desplazamiento se consigue mediante el control de la div sub-js.

 

código

1  <! DOCTYPE html > 
2  < html > 
3      < cabeza > 
4          < meta charset = "UTF-8" > 
5          < título > </ título > 
6          < estilo > 
7              * { 
8                  margen : 0 ; 
9                  relleno : 0 ; 
10              } 
11              cuerpo { 
12                  altura : 100%; 
13                  anchura : 100% ; 
14                  altura : 100% ; 
15              } 
16              .Wrap { 
17                  
18                  anchura : 400 píxeles ; 
19                  altura : 40px ; 
20                  margen : 0 auto ; 
21                  margin-top : 40px ; 
22                  frontera : negro sólido 1px ; 
23 de                  desbordamiento: Oculto ; 
24              } 
25              .Wrap> .inner { 
26                  fondo : repetir-lineal-gradiente (60deg, 0px blanco, 10px blanco, 10px negro, 20 píxeles negro) ; 
27                  altura : 40px ; 
28                  ancho : 600px ; 
29              } 
30              
31          </ estilo > 
32      </ cabeza > 
33      < cuerpo > 
34          < div clase = "wrap" > 
35              <div clase = "interior" > </ div > 
36          </ div > 
37      </ cuerpo > 
38      < secuencia de comandos de tipo = "text / javascript" > 
39          var interior = document.querySelector ( " .Wrap> .inner " );
40          var bandera = 0 ;
41          // 鼠标移入
42          var temporizador;
43          inner.onmouseover = función () {
 44              temporizador =la window.setInterval ( función () {
 45              En Flag - ;
 46 es              SI (En la bandera == - 200 es ) {
 47                  En la bandera = 0 ;
 48              }
 49              inner.style.marginLeft = En Flag + " PX " ;
 50              }, . 5 )
 51 es          }
 52          // ratón fuera clearInterval de control setInterval 
53 es          inner.onmouseout = función () {
 54 es              clearInterval (temporizador);
55          }
 56          
57      </ escritura > 
58  </ html >