Red de conocimiento de recetas - Industria de la restauración - Buscando un código javascript simple. Gracias, función del menú del sitio web.

Buscando un código javascript simple. Gracias, función del menú del sitio web.

No hace falta decir que no soy un vegetal y que tener este espíritu de aprendizaje merece estímulo.

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 gt

ltdiv 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! !