Front end function examples

Animation

CSS 动画 - 左右移动,360°旋转

Assets

资源目录

auto-open-window

自动打开窗口

choose-video

视频选择

css-filter-gray

CSS 实现灰度滤镜

div-flex

div 水平两边对齐

div-text

div 文字显示1行，超出部分使用省略号； div 文字显示2行，超出部分使用省略号

img

图片点击放大

IP

获取用户地区

LivePrism

Web 代码编辑器

Prism

代码高亮编辑器

replaceChild

用指定节点替换当前节点

resize-video-canvas

视频，画布跟随窗口自动缩放

Sass

Sass 实例

scrollIntoView

scrollIntoView() 示例

svg

svg 示例

table

固定表头，固定列

ToDoList

vega

1. vega 示例
2. vega-lite 示例

video-to-canvas

video-thumbnail

根据视频内容创建缩略图

vue-form-json-schema

vue-i18n

vuetify-grid

vuetify.js grid 布局

vuetify-layout

vuetify.js 卡片布局

WebAudioRecorder

页面录音示例

WebRTC-Server

WebRTC js客户端，python 服务器代码示例

Vant2

• Vant2, Vue2, Vue.Draggable/2.20.0 拖拽
• Vue2 动态绑定图片
• 禁止图片，文字选中
• 禁止右键菜单
• 禁止浏览器长按

moxueyuan

油猴脚本，魔学院自动播放视频，静音，自动点击确认弹框等

脚本集

• jianshu: 下载简书个人账号的下所有文章

element

index.html，index2.html

Element scrollbar 使用

index3.html

前端竞态

merge-cell-table.html，merge-cell-table2.html

动态合并表格行，列

upload-excel

上传excel文件，解析excel文件数据，并进行数据非空验证

Web-Camera

WebRTC 相机在线拍照

Echarts

这个是关于 Echarts 图表相关的代码示例

3d

关于3d效果的一些示例

bar1, bar2

3d柱状图

Vu3

基于Vue3框架的一些实现示例

001/my-project-vue3/src/views/Map

基于高德地图API的一些示例

• MapStreet: 实现了北京市朝阳区街道的3D效果
• heatmap1:
• heatmap2: 3D热力—青岛交通拥堵指数

001/my-project-vue3/src/views/Map/3d

基于echarts-gl 实现的一些3d地图效果

• zhejiang: 浙江省的3D地图效果
• chaoyang*: 北京市朝阳区街道的3D地图效果