Ejemplo de efecto de cambio de piel simple de página web implementado con jQuery

Este ejemplo muestra cómo jQuery puede lograr un efecto de cambio de piel simple en una página web. Comparto con todos para referencia, como se muestra a continuación:

Aquí hay4los siguientes archivos: skin.html、blue.css、green.html、red.html, todos deben estar en el mismo directorio.

1、skin.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<head>
  <title>Cambiar de piel de demo</title>
  <!--Referencia a jquery del CDN de Baidu-->
  <script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  <link href="blue.css" id="skincss" rel="stylesheet" type="text/css"/>
  <script type="text/javascript">
    $('document').ready(function(){
      //Cambiar de piel
      $('#skin_list').change(function(){
        skin_name = $(this).val()
        skin_ skin_name + ".css"
        $("#skincss").attr("href", skin_href)
      });
    });
  </script>
</head>
</head>
<body>
  <!--Lista de skins-->
  <div>
    Lista de skins:
    <select id="skin_list">
      <option value ="blue">Azul</option>
      <option value ="green">Verde</option>
      <option value ="red">Rojo</option>
    </select>
  </div>
  <div>
    <ul>
      <li>Today</li>
      <li>State of mind</li>
      <li>Mejor</li>
    </ul>
  </div>
</body>
</html>

El punto principal es solo esos pocos códigos de JavaScript. Para que todos puedan ver la imagen completa, he pegado todo el código html.

2、blue.css

li {color:blue;}

3、green.css

li {color:green;}

4、red.css

li {color:red;}

Puede que algunos usuarios piensen que una frase es suficiente para modificar el archivo css, pero aquí se trata de ver el panorama general, disculpen la torpeza. ^_^

5、imagen de captura siguiente:

Los lectores interesados en más contenido sobre jQuery pueden consultar las secciones especiales de este sitio: 'Resumen de técnicas de extensión de jQuery', 'Resumen de plugins y usos comunes de jQuery', 'Resumen de efectos de arrastrar y soltar de jQuery', 'Resumen de técnicas de manipulación de tablas (table) de jQuery', 'Resumen de usos de Ajax en jQuery', 'Resumen de efectos clásicos comunes de jQuery', 'Resumen de técnicas de animación y efectos de jQuery' y 'Resumen de técnicas de selectores de jQuery'.

Espero que lo descrito en este artículo pueda ayudar a todos en el diseño de programas jQuery.

Declaración: El contenido de este artículo se ha obtenido de la red, y los derechos de autor pertenecen al propietario original. El contenido ha sido contribuido y subido por usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará