Skip to content

AXWV/Cyclic-background_simple

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 

Repository files navigation

以下是项目的功能总结:

别用了用不了

1.背景图片的无限平铺

• 背景图片会无限平铺以适应整个屏幕,确保背景始终填充整个视口,不会出现空白区域。

2.背景图片的动态移动

• 背景图片可以通过以下几种方式动态移动:

• 随机移动:背景图片会随机选择一个方向(水平或垂直)进行移动。

• 用户控制移动:用户可以通过键盘方向键或双击菜单中的方向按钮手动控制背景图片的移动方向。

• 取消移动:用户可以随时取消当前的移动状态,使背景图片停止移动。

3.用户交互

• 双击菜单:用户可以通过双击页面来显示或隐藏一个菜单,菜单中包含以下功能:

• 方向按钮:用户可以通过点击方向按钮(上、下、左、右、左上、右上、左下、右下)来控制背景图片的移动方向。

• 速度调整:用户可以通过滑块或输入框调整背景图片的移动速度,范围为0到30。

• 随机移动按钮:用户可以点击“随机移动”按钮,使背景图片随机选择一个方向移动。

• 取消按钮:用户可以点击“取消”按钮,停止当前的移动状态。

• 自定义图片上传:用户可以通过上传文件来设置自定义背景图片。

• 在线图片选择:用户可以通过点击“在线选择图片”按钮,打开一个嵌入的[Textures.com]()页面,选择图片并将其设置为背景。

4.状态提示

• 状态栏:在屏幕左下角显示当前的移动状态(如“正在移动”、“停”、“上”、“下”、“左”、“右”等)。

• 动态提示(这个用不了):当用户开始移动时,状态栏会显示“正在移动”;当用户停止移动时,状态栏会自动变淡并向左边滑出。

5.自定义背景图片

• 上传图片:用户可以通过上传文件来设置自定义背景图片。

• 在线选择图片:用户可以通过[Textures.com]()选择图片,并将其设置为背景。

• 图片自动适应:自定义图片会自动调整大小以适应屏幕,避免扭曲和伸展。

6.用户体验

• 平滑过渡效果:背景图片的移动具有平滑的过渡效果,使视觉效果更加流畅。

• 响应式设计:页面设计为响应式,确保在不同设备上都能正常显示和操作。

7.技术实现

• HTML:用于构建页面结构。

• CSS:用于样式设计,包括背景图片的平铺、菜单的样式、状态栏的动画等。

• JavaScript:用于实现交互功能,包括背景图片的动态移动、用户控制、状态提示等。

8.调用用户可以通过

<style> } iframe { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; border: none; } </style> 和 <iframe src="http://laxx.tttttttttt.top/project/000001"></iframe>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published