Buscando un código javascript simple. Gracias, función del menú del sitio web.
Jaja, a continuación, les presentaré algunos menús de uso común en los sitios web.
El primero: imitar el menú de navegación de puerta corredera de NetEase.
lthtml xmlns = " "/ gt;
ltMeta ) - el efecto de rotar aleatoriamente las imágenes de los productos de la página de inicio de paipai.com
body {font-size: 12px }
img {border: 0px}
# venta { derecha: 206 px; arriba: 0; ancho: 260px fondo: #fff}
# venta título { text-align: right; padding: 5px padding-right: 5px ancho: 255px alto: 20px fondo: URL ("imágenes/título de venta. gif")no-repeat }
# LISTA DE VENTA { margin-top: 5px}
#Lista de ventas.
venta dos { altura: 108 px; fondo: url("images/salelineH.gif ") repetición inferior -x;
# lista de venta a { pantalla: bloque; Alineación de texto: centro; flotante: izquierda; desbordamiento: oculto}
# saleList a . saleitem { background: URL(" images/salelinev . gif ")repetición derecha }
#saleList a img{margin: 5px 0}
# lista de venta a: hover { background-color: # ebff C5 }
lt/style gt;
ltscript type = " texto/JavaScript " gt;
rnd .hoy = nueva fecha();
rnd . >
Función rnd(){
rnd . semilla =(rnd . semilla * 9301 49297) 233280
Devuelve rnd .
}
Función rand(número){
devuelve matemática ceil(rnd()* número)-1;
}
Función nextSale(order){
if(order == " up ")saleNum-;
else salenum;
if(saleNum gt; 2) saleNum=0
else if(saleNum lt; 0)saleNum = 2;
//alert(saleNum);
for(I = 0 ;ilt3;i )
document .getelementbyid(" lista de venta " I ). display = " none "; mostrar = " ";
}
lt/script gt;
lt/head gt
ltbody gt
ltdiv id = " venta " class = " desbordamiento absoluto " >>p>
ltdiv id = " título de venta " class = " absoluto " >>p>
lta href = " JavaScript: siguiente sale(' up ')" title = "Haga clic en la pantalla anterior" >>p>
ltimg src = "images/sale gif " hspace = " 4 " onmouseover = " this . adelante arriba . gif ' " " onmouseout = " th
is . src = 'images/sale gif ' "/ gt; lt/a gt; lta href = " JavaScript: next sale(' down ')" title = "Haga clic para pasar a la siguiente pantalla" > ltimg src = "images/ venta siguiente .gif "onmouseover = " this .src = 'imágenes/venta siguiente .gif ' " " onmouseout = " this .src = 'imágenes/venta siguiente .gif ' "/ gt; gt;
ltdiv class = " overflow " style = " altura: 330 px " id = " lista de ventas " >.
ltscript type = " text/JavaScript " gt; var salen um = rand(3); lt/script gt;
ltdiv id = " lista de ventas 0 " style = " display : none " gt;
ltdiv class="saleTwo "
lta class = " artículo en oferta " href = " " target = " _ en blanco "
ltdiv gt
ltImg alt= "Súper Promoción Adornos Navideños Románticos" src = "/js imágenes/cargar archivos _ 3321/200804/20080423085515804 . jpg " ancho = " 65 " alto = " 65 "/> lt;/div gt;
ltdiv gt
Adornos románticos navideños
Empuje súper grande
lt/a gt;
lta class = " artículo en oferta " href = " " target = " _ en blanco "
ltdiv gt
ltImg alt= "El número de ensamblaje de la cámara te da una nueva sensación " src = "/js imágenes/cargar archivos _ 3321/20080423085516472 jpg " ancho = " 65 " alto = " 65 "/> lt;/div gt;
ltdiv gt
Número de componente de la cámara
Te da una nueva sensación
lt/a gt
ltdiv gtltdiv gt
p>
ltImg alt= "Mejorar la preferencia de las muñecas coreanas" src = "/js imágenes/cargar archivos _ 3321/2008042308551665438 . jpg " ancho = " 65 " alto = " 65 "/ gt /div gt ;
ltdiv gt
Mejora de la buena voluntad
Babydoll coreano
lt/a gt/div gt;
> p>
ltdiv class="saleTwo " >>p>
lta class = " artículo en oferta " href = " " target = " _ en blanco " >>p>
ltdiv gt
ltImg alt= "Chaquetas de mezclilla retro a la venta desde 119 yuanes" src = "/js imágenes/cargar archivos _ 3321/20080423085516293 . jpg " ancho = " 65 " alto = ".
lt/div gt;
ltdiv gt
Chaqueta vaquera retro
Oferta especial a partir de RMB 119
lt/a gt <; /p>
lta class = " artículo en oferta " href = " " target = " _ white " />
ltdiv gt
ltImg alt= "Ropa deportiva especial de Navidad 30 % de descuento descuento" src = "/js imágenes/cargar archivos _ 3321/20080423085516802 jpg " ancho = " 65 " alto = " 65 "/> lt；/div gt;
ltdiv gt
Oferta especial de Navidad
30% de descuento en ropa deportiva
lt/a gt
" target="_blank "ltdiv gt
p>ltImg alt= "El número de ensamblaje de la cámara le brinda una nueva sensación" src = "/js imágenes/cargar archivos _ 3321/20080423085516472 . jpg " ancho = " 65 " alto = " 65 "/> lt;/div gt;
ltdiv gt
Número de componente de la cámara
Te da una nueva sensación
lt/a gt lt/div gt;
ltdiv gt
lta class = " artículo en oferta " href = " " target = " _ en blanco "
ltdiv gt
ltImg alt= "Periféricos de computadora navideños con 40 % de descuento" src = "/js imágenes/cargar archivos _ 3321/20080423085516530 . jpg " ancho = " 65 " alto = " 65 "/> lt;/div gt;
ltdiv gt
Oferta especial de Navidad
40% de descuento en computadoras
lt/a gt;
lta class = " artículo en oferta " href = " " target = " _ white " >>p>
ltdiv gt
ltImg alt = "Dulce rubor para la fiesta" src = "/js imágenes/cargar archivos _ 3321/20080423085516658 jpg " ancho = " 65 " ancho = " 65 " alto = " 65 "/ lt;/div gt;
ltdiv gt
Traje de fiesta
Rubor dulce
lt/a gt; lta href="" target="_blank "
ltdiv gt
ltImg alt= "Mejora el preferencia de las muñecas coreanas" src = "/js imágenes/cargar archivos _ 3321/2008042308551665438 jpg " ancho = " 65 " hei.
ght = " 65 "/ gt;/div gt;
ltdiv gt
Mejora de la buena voluntad
Babydoll coreano
lt /a gt; lt/div gt;
lt/div gt;
ltdiv id = " lista de ventas 1 " estilo = " display: none " gt; ltdiv class="saleTwo " >>p>
lta class = " artículo en oferta " href = " " target = " _ en blanco " >>p>
ltdiv gt
ltImg alt = "Novedad, diversión y barato están todos en el canal de juegos en línea" src = "/js imágenes/cargar archivos _ 3321/2008042308551612 . jpg " ancho = " 65 " alto = " 65 "/ lt /div gt; p>
ltdiv gt
Novedad, diversión y barato
Todo en canales de juegos online
lt/a gt;
lta class = " artículo en oferta " href = " " target = " _ white " >>p>
ltdiv gt
ltImg alt= "Muestra el temperamento noble de las botas de montar de caballero" src = " /js imágenes/cargar archivos _ 3321/200804/20080423085516202 jpg " ancho = " 65 " alto = " 65 "/> lt；/div gt;
ltdiv gt
Mostrar temperamento noble
Los caballeros usan botas de montar
lt/a gt; p> ltImg alt="El número de ensamblaje de la cámara le brinda una nueva sensación" src = "/js imágenes/cargar archivos _ 3321/20080423085516472 . jpg " ancho = " 65 " alto = " 65 "/> lt；/div gt;
ltdiv gt
Número de componente de la cámara
Te da una nueva sensación
lt/a gt lt/div gt
p>
ltdiv class =" saleTwo " >>p>
lta class = " artículo en oferta " href = " " target = " _ en blanco " >>p>
ltdiv gt
ltImg alt= " Suéter a rayas atemporal" src = "/js imágenes/cargar archivos _ 3321/200804/20080423085516984 . jpg " ancho = " 65 " alto = " 65 "/> lt；/div gt; >
ltdiv gt
Timeless
Suéter de rayas
lt/a gt;
lta class = " s
ale item " href = " " target = " _ white " >>p>
ltdiv gt
ltImg alt= "20% de descuento en zapatillas especiales de Navidad" src = "/js imágenes/ subir archivos _ 3321/20080423085516651 . jpg " ancho = " 65 " alto = " 65 "/ lt；/div gt;
ltdiv gt
Oferta especial de Navidad
20% de descuento en zapatillas
lt/a gt; lta href="" target="_blank "
ltdiv gt
ltImg alt= "Mejorar la preferencia de muñecas coreanas" src="/js imágenes/subir archivos _ 3321/2008042308551665438 jpg " ancho = " 65 " alto = " 65 "/ gt; /div gt;
ltdiv gt
Mejora de la buena voluntad
Babydoll coreano
lt/a gt; lt/div gt
ltdiv gt
clase lta; = " artículo en oferta " href = " " target = " _ en blanco " >>p>
ltdiv gt
ltImg alt= "Sony Ericsson K630 hermoso y simplificado" src = "/js images/ subir archivos _ 3321/20080423085516302 jpg " ancho = " 65 " alto = " 65 "/> lt;/div gt;
ltdiv gt
Ism simplificado y hermoso
Sony Ericsson K630
lt/a gt;
lta class = " artículo en oferta " href = " " target = " _ en blanco " >> p>
ltdiv gt
ltImg alt= "Selección original de navaja suiza" src = "/js imágenes/cargar archivos _ 3321/20080423085516549 . jpg " ancho = " 65 " ancho = " 65 " alto = " 65 "/ lt;/div gt;
ltdiv gt
Navaja suiza original
Seleccione
lt/a gt ; lta href ="" target="_blank " >>p>
ltdiv gt
ltImg alt="Cuerpo ultrafino Sony Ericsson W880 " src = "/imágenes js/carga de archivos _ 3321/20080423085516711 jpg " ancho = " 65 " alto = ". lt/div gt;
ltdiv gt
Cuerpo ultrafino.
Sony Ericsson w880
lt/a gt; lt/div gt;
lt/div gt
ltdiv id = " lista de ventas 2 " style = " display：none " gt；
ltdiv class="saleTwo "
lta class = " artículo en oferta " href = " " target = " _ en blanco " >
ltdiv gt
ltImg alt= "Plan de dieta de otoño e invierno con diferentes gustos" src = "/js imágenes/cargar archivos _ 3321/200804/20080423085516704 tipo jpg ; =3 " width="65" height="65" /> lt/div gt;
ltdiv gt
Ten tu propio gusto
Otoño e invierno plan de dieta
p>lt/a gt; lta href="" target="_blank "
ltdiv gt
ltImg alt= "Mejorar la preferencia de muñecas coreanas" src="/js imágenes/subir archivos _ 3321/2008042308551665438 jpg " ancho = " 65 " alto = " 65 "/ gt;/div gt;
ltdiv gt
Mejora la buena voluntad
Babydoll coreano
lt/a gt; lt/div gt;
ltdiv class="saleTwo "
lta class = " artículo en oferta " href = " " target = " _ en blanco "
ltdiv gt
ltImg alt= "50% de descuento en visualización de películas portátil para Navidad" src = "/ js imágenes/cargar archivos _ 3321/20080423085516375 . jpg " ancho = " 65 " alto = " 65 "/> lt;/div gt
ltdiv gt
Oferta especial de Navidad
50 % de descuento en audio y vídeo portátiles
lt/a gt; lta href="" target="_blank "
ltdiv gt;
ltImg alt= "Cuerpo ultradelgado Sony Ericsson W880 " src = "/js imágenes/cargar archivos _ 3321/20080423085516711 . jpg " ancho = " 65 " alto = ". lt/div gt;
ltdiv gt
Cuerpo ultrafino.
Sony Ericsson w880
lt/a gt; lt/div gt;
ltdiv gt
lta class = "artículo en oferta" href = " " target = " _ white " >>p>
ltdiv gt
ltImg alt= "Me encanta comprar desde casa" src = "/js imágenes/cargar archivos _ 3321/20080423085516954 jpg " ancho = " 65 " alto = " 65 "/> lt;/div gt;
ltdiv gt
Amo a mi familia
familia Comprar.
lt/a gt; lta href="" target="_blank "
ltdiv gt
ltImg alt= "Juego de maquillaje de gran valor Transformation Party Queen " src = "/js imágenes/cargar archivos _ 3321/20080423085516919 jpg " ancho = " 65 " ancho = " 65 " alto = ". p>Juego de maquillaje de gran valor
Conviértete en la reina de la fiesta
lt/a gt;
lt/div gt;
lt/div gt;
ltscript type = " texto/JavaScript " gt; documento getelementbyid(" saleList " saleNum). = " "; lt/script gt;
ltp gt lt/p gt;
ltp gtSe pueden encontrar más códigos de efectos especiales de la página web en
lt / body gt;
lt/html gt;
Esta imitación básicamente coloca las imágenes en el segundo piso, pero el efecto sigue siendo bueno. Si no te agrado, igual. Lo siguiente. Aprenda lentamente y eventualmente lo entenderá (Css es el más importante).
Esto es principalmente para ocultar capas.
En general, creo que debe mirar. ¡En las interacciones entre las distintas capas del código!
Lo anterior es el menú de cuotas que presenté. Aunque su función no es muy potente, es muy útil y se utiliza en J2EE.
¡El menú es básicamente una ilusión, hecha usando efectos especiales entre capas y CSS!
Después de aprender la aplicación específica de las capas, creo que también puedes tener tu propio menú.
¡Entonces te deseo mucha suerte! ! ¡vamos! !