README

Example Guide

贡献指南

▼ 项目列表

▼ Intermediate-Level Ideas

Book Finder App

To-Do 应用

命令行计算器

Markdown预览器

Emoji翻译器应用

Password Generator

Name Generator

Meme生成器应用

FlashCards应用

Charity Finder App

Podcast目录应用

Game Suggestion App

Simple Online Store

Flip Art App

HighStriker游戏

Sports Bracket Generator

时区提醒机器人

二维码徽章应用

卡片记忆游戏

Bit Masks App

Chrome主题扩展

Currency Converter

Drawing App

GitHub个人资料

Image Scanner

Markdown表格生成器

RegExp助手应用

Sales数据库应用程序

String Art

This or That Game

Typing Practice App

Voting App

Math Editor

▼ 初学者项目合集

Bin2Dec应用

Border Radius Previewer

CSV转JSON应用

Calculator App

Calendar App

因果应用

Christmas Lights App

Color Cycle App

倒计时器应用

Dollars To Cents App

Dynamic CSS Variables App

First Database App

Flip Image App

GitHub状态应用

Hello App

IOT邮箱应用

JSON转CSV应用

Javascript正则表达式验证

Key-Value 应用

Lorem Ipsum 生成器

Notes应用

Pearson回归应用

Pomodoro时钟

产品登陆页

Quiz应用程序

随机餐点生成器

随机数生成器

Recipe App

Roman to Decimal Converter

滑块设计

Stopwatch App

True or False App

Vigenere 密码

Weather App

Windchill App

Word Frequency App

▼ Advanced Ideas

Battleship Bot

Battleship游戏引擎

Boole Bot 游戏

Bug Race Game

Calorie Counter App

Chat应用

Contribution Tracker App

Elevator App

FastFood应用

GitHub时间线应用

GitTweet应用

Instagram克隆应用

Kudos Slackbot

Movie App

MyPodcast Library App

NASA系外行星查询

Shell Game

Shuffle-Deck-App

Slack 归档器

SpellIt-App

Survey App

FlipImage

等级: 初级

对于网页开发者来说,了解操纵图像的基本知识是很重要的,因为丰富的网页应用程序依赖于图像为用户界面和用户体验(UI/UX)增添价值。

FlipImage 探索了图像操纵的一个方面 - 图像旋转。该应用展示了一个包含单个图像的方形窗格,以 2x2 矩阵形式呈现。使用位于每个图像旁边的上、下、左、右箭头,用户可以垂直或水平翻转它们。

您只能使用原生 HTML、CSS 和 Javascript 来实现这个应用。不允许使用图像包和库。

用户故事

  • [ ] 用户可以看到一个以 2x2 矩阵重复显示单个图像的窗格
  • [ ] 用户可以使用位于图像旁边的上、下、左、右箭头垂直或水平翻转其中的任何一个图像

额外功能

  • [ ] 用户可以通过在输入字段中输入不同图像的 URL 来更改默认图像
  • [ ] 用户可以通过点击输入字段旁边的 '显示' 按钮来显示新图像
  • [ ] 如果新图像的 URL 未找到,用户会看到错误消息

有用的链接和资源

示例项目

由 @bennettfeely 创作的图像效果