¿Cómo logra js el efecto scratch? ¿Cómo logra js el efecto scratch?

Esto requiere usar la nueva etiqueta H5: canvas para dibujar gráficos y js para lograr el efecto de lotería. Los pasos de implementación son los siguientes: Varnum = 6; //Número de premios var canvas = document.getelementbyid(canvas)

Btn = document. getelementbyid (BTN if(!canvas.getContext){

Alerta (¡Lo siento! El navegador no lo admite); return; }//Obtener la variable de contexto de dibujo CTX = canvas. Getcontext(2d is< /p >

(varI = 1; I //Iniciar un nuevo camino

CTX . comenzar camino(); //Moverse al centro del círculo y luego rotar alrededor del centro ctx.translate (150, 150); //Defina una nueva subruta CTX a partir de (0,

0) coordenadas MoveTo (0, 0); //Para rotar en radianes, es necesario convertir el ángulo. en radianes y el grado es *Math.PI/180.

Fórmula de cálculo ctx.rotate(360/num*i*Math .PI/180); 0, 0, 150, 0, 2

*Math.PI/num, false); if (I % 2 = = 0) { CTX . estilo de relleno = # FFB 820 } else {

Ctx.fillStyle=}// Rellenar sector CTX . Fill(); //Dibujar el borde ctx.lineWidth=0.5

CTX . Restaurar el estado anterior de CTX.restore(); }

¿Qué complementos hay en la página de inicio?

Categoría de herramientas

Biblioteca de herramientas para operar objetos. , matrices, etc.

Underline.js<. /p>

La API de Lo-dash es básicamente la misma que la de Underline. En comparación con Underline, tiene la ventaja de una alta eficiencia; estructura personalizable

Sugar agrega algunas herramientas y métodos a objetos nativos

Functional.js ha reunido suficiente soporte de la biblioteca

Watch.js observa objetos o propiedades. para cambios

Bacon.js funcional. Programación, genial

Streamjs realiza una serie de operaciones sobre matrices y objetos a través de flujos

Control de procesos asincrónicos

Eventproxy producido por Pu Ling >

Detalles de Arbiter.js

Publicar-Suscribir

Prometido

Asynchronous.js

Simulado

Mock.js genera datos aleatorios y solicitudes simuladas de Ajax

Solicitudes Jquery-mockjaxmockajax

Base de tiempo

Instantánea

Fecha<. /p>

Detección de navegador

Buser detecta navegadores y versiones específicas.

Ua-parser-js detecta navegadores y versiones específicas, sistemas operativos, tipos de dispositivos, etc.

Prueba/depuración de ejecución de prueba

Console-polyfill permite el uso seguro de métodos de consola como console.log().

El registro estiliza el registro de salida de la consola.

js genera detalles de información de registro en un elemento de la página.

Operaciones de Uri.jsuri

Biblioteca de herramientas de cookies para agregar, eliminar y cambiar cookies

Detalles de la biblioteca de enrutamiento del front-end del controlador

Número operaciones de BigDecimal.js para mejorar la precisión

JSDoc genera detalles de documentación API basados ​​en la información anotada en el archivo javascript.

Encapsulación de eventos de teclado de teclas de acceso rápido

MD5 cifra la biblioteca de archivos a través de MD5.

Clases de mejora del navegador

Biblioteca que mejora algunos navegadores antiguos

Selectivizr convierte a IE6-8 en algunos selectores CSS3.

IeBetter ofrece funciones avanzadas de navegador ie6-8.

ExplorerCanvas permite que el navegador IE8 admita lienzo.

CSS3Pie permite que IE6-9 admita bordes-rayos, sombras de cuadros y gradientes lineales. puedes usarlo. archivo htc (nota Minetype) o. archivo js. Cuando se usa Pie.js, cuando el elemento box-radious tiene un color de fondo, el color de fondo no se muestra. . .

FormFive permite que los navegadores más antiguos admitan algunas funciones de los formularios HTML5, como marcadores de posición y enfoque automático.

/anselmh/object-fit permite que el navegador admita reglas CSS de adaptación de objetos.

HTML5CrossBrowserPolyfills un montón de Polyfills.

La flexibilidad permite que el antiguo IE sea compatible con Flexbox.

Mejora del selector

Lining.js permite a los navegadores lograr efectos similares a ::n-line(), ::n-last-line().

No confidencial

Prefixfree lo usa, por lo que al escribir CSS, no es necesario agregar un prefijo del navegador.

Nivel de forma

jquery-file-Subir detalles del componente del archivo

Control de vista de árbol de archivos ZTree

Editor de árbol. La pantalla se parece mucho a un mapa mental.

FileAPI maneja algunos archivos en el cuadro de selección de archivos

Validación de formulario

. Detalles de validación

jQuery-Validation-Engine

Embellecimiento de elementos de formulario

Proporciona soporte uniforme para elementos de formulario como cuadros desplegables, menús, casillas de verificación, botones, etc. embellecer.

Cuadro desplegable de selección múltiple Select2

La selectividad y la incertidumbre son similares.

Cuadro desplegable DropKick, selección única, selección múltiple. Se ve mejor que el componente de cambio uniforme

Switcheryios7

Nouislider usa barras de desplazamiento para configurar/controlar (volumen, etc.).

css embellece la apariencia de la entrada elementos.

Clase de imagen

Holderjs genera imágenes de marcador de posición.

Carga diferida

La carga de imágenes realiza la recuperación después de cargar todas las imágenes seleccionadas.

CSSgram utiliza filtros CSS3 para implementar la biblioteca de filtros de Instagram.

Clase de iconos

Resumen de fuentes de iconos

Iconos creados por SVG

svgicons

Icono

HYBICON para efectos interactivos. Por ejemplo, pasar el cursor y hacer clic en

icono de entidad de carácter HTML

/

hacer clic en el icono de transformación tendrá algunos efectos de transformación. Por ejemplo, el signo más se convierte en una cruz.

Textura enlosable producida por css3patternscss3. La compatibilidad del navegador no es buena.

Buscar imágenes

Fancybox aparece para ver imágenes, vídeos y otras demostraciones.

Yoxview aparece para ver imágenes y el tamaño de la imagen cambia de forma natural.

Picture Wall

Wukemark

UI Framework

WeUI está diseñado por el equipo de diseño oficial de WeChat para el desarrollo de WeChat Web.

Framework 7

Clase de componente UI

Arrastrar

Dragula admite arrastrar, soltar y ordenar. Se siente más liviano y fácil de usar que jqueryUI.

Versión angular oficial dragular angular-dragular

Visualización de datos (gráfico)

Echarts producidos por Baidu.

Highcharts es muy potente. Hay una tarifa.

Dibujable. Una biblioteca de gráficos basada en D3.

El documento de Flot no es poderoso

La demostración del documento chino de chartJs es hermosa y clara. Relativamente ligero.

ichartJs Lo hizo un chico de China, se siente bien.

Componente de selección de tiempo

Básico: selector de fecha

Detalles simples del calendario

Fullcalendar admite la publicación para cambiar el tiempo de las tareas pendientes.

SimpleEventsCalendar tiene un aspecto similar. Cuesta $5

JQueryuidatepicker es clásico, no muy agradable.

Pickadate es liviano, compatible con dispositivos móviles y hermoso. Pero parece que solo se puede mostrar en la capa emergente, no en la pantalla desplegable.

Zebra-datepicker es muy configurable. Pero parece que sólo puede aparecer en la esquina superior derecha. . .

Estilo Bootstrap-datepickerbootstrap

DateRangePicker selecciona un período de tiempo. Estilo Bootstrap Este componente se basa en TwitterBootstrap, Moment.js y jQuery.

Barra de desplazamiento personalizada

Barra de desplazamiento ligera. Parece la barra de desplazamiento de Chrome en Mac.

Iscroll funciona bien en dispositivos móviles.

Efecto de carga

CSSSpinnersCSS lo hace

Loaders.cssCSS lo hace.

Componente de tabla

jsGridDataGrid. Detallado

Cuadrícula de datos Backgrid basada en Backgrid

Excellentexport genera el contenido de la tabla en Excel. Compatible con Firefox, Chrome e IE6+

La tabla de datos es interactiva (clasificación, eliminación, etc.). )

Handsontable genera datos con apariencia de Excel.

Biblioteca de componentes para datos de tablas JSpreadsheets

Obtener color

Rango

Compartir en redes sociales

Esto Generar código compartido.

Editar

El editor de código Ace, se puede utilizar para demostración.

Edición

Ueditor está realizado por Baidu.

Tinymce edita contenidos html en tiempo real.

Summernote funciona bien en dispositivos móviles.

Componente de notificación

notie.js

Reproductor HTML5

Jwplayer es utilizado por una gran cantidad de sitios web.

html 5 media es un h5player simple y liviano.

Jplayer es potente y se le puede modificar.

Mostrar

Impress.js tiene varias rotaciones y experiencias extrañas.

Visualización en pantalla completa. Utilice la rueda de desplazamiento para pasar las páginas en detalle.

Zepto.fullpage se centra en fullPage.js en el lado móvil y se basa en Zepto.

PagePiling es similar a fullPage.

Turn.js crea un libro con un hermoso efecto de paso de página.

Mostrar diapositivas

Slidesjs es bastante fácil de usar, pero debes escribir tu propio CSS para la navegación de diapositivas. Detalles jaja.

Detalles del componente deslizante javascript ISlider de la plataforma móvil sin dependencias de complementos.

La presentación de diapositivas en pantalla completa de Bgstretcher cambiará a medida que cambie el tamaño de la página.

Swiper es un sitio web chino Swiper con complemento deslizante táctil móvil, potente, gratuito y de código abierto.

El control deslizante de monedas es compatible con IE6. Muy bien ~. Sin embargo, el cambio de modos se realiza bloque por bloque. No se puede configurar el modo de conmutación. . .

Wowslider proporciona varios efectos interesantes al cambiar de presentación de diapositivas. Cargar.

Las diapositivas normales de Cycle2 no admiten el desplazamiento vertical. . .

La presentación de diapositivas ordinaria de Jcarousel no es compatible con IE6.

Mostrar desplazamiento 3D. Es bueno hacer ppt.

Nodeppt está hecho por chinos y el ppt es bastante bueno. Es mejor que revelar en algunos aspectos. Pero existen algunos problemas al generar html exportado.

Interruptor Roundabout3d, mira el borde de la imagen detrás.

Cuadro emergente

Magnifico-Popup es compatible con PC y dispositivos móviles. No está mal, más de 5k estrellas.

Una capa desarrollada por chinos, compatible con ie6+. No me gusta como se llama.

Efectos de animación

Mixitup utiliza hermosos efectos de animación para completar la clasificación y el filtrado.

Efecto marquesina

Efecto de giro rápido de tarjeta

Efecto de giro de tarjeta 2 es compatible. El método de escritura es relativamente simple: 1, solo admite voltear en la dirección X 2, el nombre de la clase se especifica como 3 y solo se puede llamar una vez. Es necesario reescribirlo y mi versión mejorada está aquí.

TheaterJS simula dos personas hablando en la pantalla.

El color del texto de medianoche.js cambia con el fondo mientras _ explota.

El complemento de animación de degradado de color de Color-animationjquery La animación de jquery no admite cambios en los valores de color. La biblioteca de cambios proporciona este soporte.

Transit convierte elementos en CSS.

Explicación detallada del efecto de nube de etiquetas Tagcanvas3D.

Animación de cambio de imagen de icono

La apariencia de la navegación izquierda/derecha de Snap.js

Animación de vibración CSS

Después de hacer clic en ClickSpark.js Algunos efectos interesantes

Complemento de diferencia visual

Scrollorama es relativamente simple.

Superscrollorama puede hacer más, pero usar una biblioteca Tween de terceros es más complicado.

Swivel Deck

Flash

Swfobj puede detectar automáticamente la compatibilidad con complementos Flash en varios de los principales navegadores de PC y Mac.

Hace que la inserción de recursos multimedia Flash sea lo más fácil y segura posible. Y es muy coherente con los principios de optimización de motores de búsqueda. Además, puede evitar incrustar etiquetas no estándar como object e incrustar en su HTML y XHTML para cumplir con más estándares. Lotería detallada

wEfecto de raspado de tarjeta rasca y gana de ScratchPad

El complemento de rotación Jqueryrotate se puede utilizar para el efecto de lotería del tocadiscos.

Curso de mejora de la experiencia del usuario

Intro.js tiene una muy buena función de introducción al sitio web. También puede ser una guía para principiantes.

Componente de soporte BlockUIL.

Información rápida y sencilla. Hecho con css. Compatibilidad IE9+.

Desbordamiento de texto puntopuntopunto, añadiendo puntos suspensivos al final del texto.

La velocidad de cambio del menú secundario de jQuery-menu-aim es tan rápida como la página de inicio de Amazon.

Cualquier función de lupa con zoom

Embellecer/resaltar código de sintaxis

Embellecimiento de código de Google

DlHighlight solo admite cuatro tipos de resaltado de sintaxis: JavaScript, CSS, XML y HTML.

Seleccione aleatoriamente un color cómodo a pedido.

Ingresa indicaciones inteligentes y completa automáticamente.

Consejos profesionales. Se siente mejor que las indicaciones de Bootstrap.

Biblioteca de gestos Hammerjs. Encapsule gestos como deslizar, tocar, apretar y desplazarse.

Animación

Velocity mejora el rendimiento de las animaciones Jquery. y nuevas funciones como la animación en color.

Guardar (abreviatura de guardar)

Snap.svg es una biblioteca JS que opera svg. JQuery, es decir, SVG. Demostración

Walkway dibuja gradualmente una ruta SVG a través de la animación.

Pruebe

Mocha

Chai

Debería

equipo Snown

jsmock.

Otras categorías

ZeroClipboard copia contenido en el portapapeles compatible con los principales navegadores. Detalles de la solución

Convierte Html2canvashtml en lienzo, que se puede usar para tomar capturas de pantalla. Detallado

Marco de correo electrónico HTML de respuesta Ink

Prueba de funciones

Capture y analice contenido Rss (no puede cruzar dominios, por lo que el fondo debe ser un proxy. llamado parsing RSS (de hecho, es parsing xml)

jFeed

jRss versión simple de JFeed

Scriptcam interactúa con la cámara

Marco de robot Cylon.js, compatible con 35 plataformas.

Mampostería, un marco de flujo en cascada

Apariencia de borde para dispositivos móviles. Funciona muy bien al crear prototipos.

Clases relacionadas con el arranque

Bootbox.js encapsula algunos cuadros emergentes de arranque

Aspecto gratuito

Administración

Repositorio de JSPlugins

Sitio web del complemento jQuery de alta calidad JQueryCards

jster

Módulo de nodo

npmranksortnpmpackagesbypage ranking

YOUMIGHTNOTNEEDJQUERYPLUGINS Complemento js que no depende de jQuery.

Awesome-nodejs

Bibliotecas Library.io en varios idiomas.

Adónde ir con OniUI. com creó un marco basado en Avalon.

Marco común de terminal móvil

zepto.js

La sintaxis es similar a jquery, jquery básicamente puede entender zepto~

El último La versión se ha actualizado a 1.16.

iscroll.js

Resuelva el problema de que la página no admite desplazamiento elástico y fijación ~

Logre actualización desplegable, pantalla deslizante, zoom y otros funciones~

La última versión se ha actualizado a 5.0.

Underscore.js

Nunca lo he usado, pero escuché que es muy útil y lo recomiendo a todos ~

Esta biblioteca proporciona un conjunto de herramientas prácticas. funcionalidad de programación funcional, pero no amplía ningún objeto integrado de JavaScript.

La última versión ha sido actualizada a 1.8.2.

Marco de pantalla deslizante

Es adecuado para el efecto de deslizar la pantalla hacia arriba y hacia abajo, hacia la izquierda y hacia la derecha, etc. para cambiar de página.

slip.js

iSlider.js

Página completa.js

swiper.js

Diseño flexible.

El diseño flexible se puede utilizar actualmente en dispositivos móviles. No todas las sintaxis son totalmente compatibles, pero el efecto es bueno~