添加压缩文件预览
This commit is contained in:
jmal
parent
c1bdc28390
commit
6fd1caa559
@ -107,6 +107,14 @@ export default {
|
||||
params
|
||||
})
|
||||
},
|
||||
// 查找下级目录
|
||||
listfiles: function(params) {
|
||||
return request({
|
||||
url: 'listfiles',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 移动文件/文件夹
|
||||
move: function(params) {
|
||||
return request({
|
||||
@ -180,6 +188,14 @@ export default {
|
||||
params
|
||||
})
|
||||
},
|
||||
// 通过filepath预览文本文件
|
||||
previewTextByPath: function(params) {
|
||||
return request({
|
||||
url: '/preview/path/text',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
// 预览文本文件
|
||||
previewText: function(params) {
|
||||
return request({
|
||||
@ -196,4 +212,12 @@ export default {
|
||||
params
|
||||
})
|
||||
},
|
||||
// 解压文件
|
||||
unzip: function(params) {
|
||||
return request({
|
||||
url: '/unzip',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
},
|
||||
}
|
||||
|
||||
201
src/components/FileTree/index.vue
Normal file
201
src/components/FileTree/index.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tree
|
||||
ref="fileTree"
|
||||
:data="directoryTreeData"
|
||||
:node-key="localFileMode?'path':'id'"
|
||||
:props="directoryTreeProps"
|
||||
:load="localFileMode ? loadOfLocalFileMode : directoryTreeLoadNode"
|
||||
:highlight-current="true"
|
||||
:default-expanded-keys="defaultExpandedKeys"
|
||||
:render-content="renderContent"
|
||||
hight="100"
|
||||
lazy
|
||||
@node-click="treeNodeClick"
|
||||
@node-expand="treeNodeExpand"
|
||||
>
|
||||
</el-tree>
|
||||
<sim-text-preview :file="textPreviewRow" :status.sync="textPreviewVisible" :filepath="filepath"></sim-text-preview>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from '@/api/file-api'
|
||||
import IconFile from "@/components/Icon/IconFile"
|
||||
import SimTextPreview from "@/components/preview/SimTextPreview"
|
||||
import { iconClass,suffix } from '@/utils/file-type'
|
||||
export default {
|
||||
name: "FileTree",
|
||||
components: {IconFile,SimTextPreview},
|
||||
props: {
|
||||
directoryTreeData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
localFileMode: { //本地文件模式, true:通过文件路径加载, false: 通用文件Id加载
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
tempDir: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textPreviewVisible : false,
|
||||
textPreviewRow: {},
|
||||
filepath: undefined,
|
||||
directoryTreeProps: {
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
isLeaf: 'isLeaf'
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 默认展开项
|
||||
defaultExpandedKeys() {
|
||||
if(!this.localFileMode){
|
||||
return ['0']
|
||||
}else{
|
||||
let keys = []
|
||||
this.directoryTreeData.forEach(file => {
|
||||
keys.push(file.path)
|
||||
})
|
||||
return keys
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 加载下一级文件树 localFileMode = true
|
||||
loadOfLocalFileMode(node, resolve) {
|
||||
if (node.level === 0) {
|
||||
let elDialogWrapper = document.querySelector('.compressed-file-dialog')
|
||||
console.log('elDialogWrapper', elDialogWrapper.style.zIndex)
|
||||
elDialogWrapper.style.zIndex += 5
|
||||
return resolve(this.directoryTreeData)
|
||||
}
|
||||
if (node.level > 0){
|
||||
api.listfiles({
|
||||
username: this.$store.state.user.name,
|
||||
path: node.data.path,
|
||||
tempDir: this.tempDir
|
||||
}).then(res => {
|
||||
const nextNodes = res.data
|
||||
return resolve(nextNodes)
|
||||
})
|
||||
}
|
||||
},
|
||||
// 加载下一级文件树 localFileMode = false
|
||||
directoryTreeLoadNode(node, resolve) {
|
||||
let fileId = null
|
||||
if (node.level === 0) {
|
||||
const that = this
|
||||
setTimeout(function () {
|
||||
that.$refs.fileTree.setCurrentKey('0')
|
||||
},0)
|
||||
return resolve([{'id':"0",'name':'全部文件'}])
|
||||
}
|
||||
if (node.level > 1){
|
||||
fileId = node.data.id
|
||||
}
|
||||
api.queryFileTree({
|
||||
userId: this.$store.state.user.userId,
|
||||
username: this.$store.state.user.name,
|
||||
fileId: fileId,
|
||||
}).then(res => {
|
||||
const nextNodes = res.data
|
||||
return resolve(nextNodes)
|
||||
})
|
||||
},
|
||||
// 点击文件树
|
||||
treeNodeClick(row) {
|
||||
if(suffix.simText.includes(row.suffix)){
|
||||
// 文本文件
|
||||
this.textPreviewRow = row
|
||||
this.textPreviewVisible = true
|
||||
this.filepath = row.path
|
||||
}
|
||||
},
|
||||
// 节点被展开时触发
|
||||
treeNodeExpand(row,node,event) {
|
||||
},
|
||||
renderContent(h, { node, data, store }) {
|
||||
if(data.newFolder){
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<span><svg-icon icon-class="folder" /></span>
|
||||
<span>
|
||||
<div class="el-input el-input--mini el-input-tree">
|
||||
<input type="text" autocomplete="on" value="新建文件夹" id="treeInput" class="el-input__inner"></input>
|
||||
</div>
|
||||
<button type="button" on-click={() => {
|
||||
let path = '/'
|
||||
let parentData = node.parent.data
|
||||
if(parentData.path){
|
||||
path = parentData.path + parentData.name + path
|
||||
}
|
||||
api.newFolder({
|
||||
isFolder: true,
|
||||
filename: data.name,
|
||||
currentDirectory: path,
|
||||
username: this.$store.state.user.name,
|
||||
userId: this.$store.state.user.userId
|
||||
}).then((res) => {
|
||||
data.newFolder = false
|
||||
data.id = res.data.id
|
||||
console.log(data)
|
||||
}).catch(() => {
|
||||
window.event.preventDefault()
|
||||
window.event.stopPropagation()
|
||||
})
|
||||
}}
|
||||
class="el-button el-icon-check el-button--mini el-input-tree-button" element-loading-spinner="el-icon-loading" element-loading-background="#f6f7fa88"></button>
|
||||
<button type="button" on-click={() => {
|
||||
this.$refs.fileTree.remove(node)
|
||||
window.event.preventDefault()
|
||||
window.event.stopPropagation()
|
||||
}}
|
||||
class="el-button el-icon-close el-button--mini el-input-tree-button" element-loading-spinner="el-icon-loading" element-loading-background="#f6f7fa88"></button>
|
||||
</span>
|
||||
</span>);
|
||||
}
|
||||
if(node.expanded){
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<svg-icon icon-class="open-folder" />
|
||||
<span style="margin-left: 5px;">{node.label}</span>
|
||||
<span>
|
||||
</span>
|
||||
</span>);
|
||||
}else{
|
||||
let iconClass = this.findIconClass(node.data)
|
||||
return (
|
||||
<span class="custom-tree-node">
|
||||
<svg-icon icon-class={iconClass}/>
|
||||
<span style="margin-left: 5px;">{node.label}</span>
|
||||
<span>
|
||||
</span>
|
||||
</span>);
|
||||
}
|
||||
},
|
||||
findIconClass(file){
|
||||
if(file.isFolder){
|
||||
return 'folder'
|
||||
}
|
||||
let suffix = file.suffix;
|
||||
if(!suffix && file.name){
|
||||
suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
|
||||
}
|
||||
if(iconClass.has(suffix)){
|
||||
return iconClass.get(suffix)
|
||||
}
|
||||
return 'file'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -102,6 +102,37 @@
|
||||
</ul>
|
||||
</e-vue-contextmenu>
|
||||
|
||||
<el-dialog
|
||||
class="open-file-dialog"
|
||||
title="提示"
|
||||
top="35vh"
|
||||
:visible.sync="openCompressionVisible">
|
||||
<svg-icon icon-class="open-folder"></svg-icon> <span class="dialog-msg">查看压缩文件</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="small" >解压到...</el-button>
|
||||
<el-button size="small" @click="unzip(openingFile,openingFile.id,false)">解压到当前目录</el-button>
|
||||
<el-button size="small" type="primary" @click=compressionFilePreview(openingFile)>预览</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
class="open-file-dialog"
|
||||
title="提示"
|
||||
top="35vh"
|
||||
:visible.sync="notPreviewDialogVisible">
|
||||
<svg-icon icon-class="warring"></svg-icon> <span class="dialog-msg">此文件不支持预览, 是否下载该文件?</span>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button size="small" @click="forciblyOpen(openingFile)">强行使用文本编辑器打开</el-button>
|
||||
<el-button size="small" @click="notPreviewDialogVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click=determineDownload(openingFile)>确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<!--展示压缩文件-->
|
||||
<el-dialog class="compressed-file-dialog" :title="'预览:'+compressedFileName" :visible.sync="compressedFileVisible">
|
||||
<file-tree :directoryTreeData="compressedFileData" :tempDir="compressedFileTempDir"></file-tree>
|
||||
</el-dialog>
|
||||
|
||||
<!--移动或复制弹出框-->
|
||||
<el-dialog
|
||||
:title="'移动或复制到'+selectTreeNode.showName"
|
||||
@ -404,6 +435,9 @@
|
||||
import VideoPreview from "@/components/preview/VideoPreview";
|
||||
import AudioPreview from "@/components/preview/AudioPreview";
|
||||
import ButtonUpload from "@/components/button/ButtonUpload";
|
||||
|
||||
import FileTree from"@/components/FileTree"
|
||||
|
||||
import '@/utils/directives.js'
|
||||
|
||||
import 'pl-table/themes/index.css';
|
||||
@ -415,7 +449,8 @@
|
||||
components: {AudioPreview, VideoPreview, ImageViewer, SimTextPreview, IconFile, BreadcrumbFilePath, EmptyFile,
|
||||
PlTable,
|
||||
PlTableColumn,
|
||||
ButtonUpload
|
||||
ButtonUpload,
|
||||
FileTree
|
||||
},
|
||||
props: {
|
||||
isCollectView: {
|
||||
@ -579,7 +614,10 @@
|
||||
cellMouseIndex: -1,
|
||||
editingIndex: -1,
|
||||
dialogMoveOrCopyVisible: false,
|
||||
compressedFileVisible: false,
|
||||
directoryTreeData: [],
|
||||
compressedFileData: [],
|
||||
compressedFileName: '',
|
||||
selectTreeNode: {},
|
||||
directoryTreeProps: {
|
||||
label: 'name',
|
||||
@ -618,6 +656,10 @@
|
||||
dragElementList: [],
|
||||
drawFlag: false,
|
||||
fileListScrollTop: 0,
|
||||
notPreviewDialogVisible: false,
|
||||
openingFile: '',
|
||||
openCompressionVisible: false,
|
||||
compressedFileTempDir: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -2356,8 +2398,43 @@
|
||||
}
|
||||
},300)
|
||||
},
|
||||
// 预览压缩文件
|
||||
compressionFilePreview(file){
|
||||
this.unzip(file,undefined,true)
|
||||
},
|
||||
// 解压文件
|
||||
unzip(file, destFileId, tempDir) {
|
||||
let status = '解压'
|
||||
let decompressing = this.$message({
|
||||
iconClass: 'el-icon-loading',
|
||||
type: 'info',
|
||||
duration: 0,
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: '<span> 正在'+status+'</span>'
|
||||
});
|
||||
api.unzip({
|
||||
fileId: file.id,
|
||||
destFileId: destFileId
|
||||
}).then((res) => {
|
||||
decompressing.iconClass = null
|
||||
decompressing.type = 'success'
|
||||
decompressing.message = status+'成功'
|
||||
|
||||
this.compressedFileData = res.data
|
||||
this.compressedFileVisible = true
|
||||
this.compressedFileName = file.name
|
||||
this.compressedFileTempDir = tempDir
|
||||
|
||||
setTimeout(function () {
|
||||
decompressing.close()
|
||||
},1000)
|
||||
}).catch(() => {
|
||||
decompressing.close()
|
||||
})
|
||||
},
|
||||
// 点击文件或文件夹
|
||||
fileClick(row) {
|
||||
this.openingFile = row
|
||||
if (row.isFolder) {
|
||||
this.editingIndex = -1
|
||||
// 打开文件夹
|
||||
@ -2415,19 +2492,46 @@
|
||||
this.$router.push(`/public/articles/article?mark=${row.id}`)
|
||||
return
|
||||
}
|
||||
if(suffix.compressedFile.includes(row.suffix)){
|
||||
// this.unzip(row)
|
||||
this.openCompressionVisible = true
|
||||
return
|
||||
}
|
||||
// 打开文件
|
||||
let fileIds = [row.id]
|
||||
|
||||
this.$confirm('此文件不支持预览, 是否下载该文件?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
|
||||
window.open(url, '_self')
|
||||
})
|
||||
this.notPreviewDialogVisible = true
|
||||
|
||||
// this.$confirm('此文件不支持预览, 是否下载该文件?', '提示', {
|
||||
// confirmButtonText: '确定',
|
||||
// cancelButtonText: '强行使用文本编辑器打开',
|
||||
// type: 'warning',
|
||||
// distinguishCancelAndClose: true
|
||||
// }).then(() => {
|
||||
// let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + row.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + fileIds
|
||||
// window.open(url, '_self')
|
||||
// }).catch(() => {
|
||||
// this.textPreviewRow = row
|
||||
// this.textPreviewVisible = true
|
||||
// })
|
||||
}
|
||||
}
|
||||
},
|
||||
// 强行使用文本编辑器打开
|
||||
forciblyOpen(file) {
|
||||
this.textPreviewRow = file
|
||||
this.textPreviewVisible = true
|
||||
const that = this
|
||||
setTimeout(function () {
|
||||
that.notPreviewDialogVisible = false
|
||||
},100)
|
||||
},
|
||||
determineDownload(file) {
|
||||
this.downLaod(file)
|
||||
this.notPreviewDialogVisible = false
|
||||
},
|
||||
downLaod(file){
|
||||
window.open(`${process.env.VUE_APP_BASE_FILE_API}preview/${file.name}?jmal-token=${this.$store.state.user.token}&fileIds=${file.id}`, '_self')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -2518,5 +2622,16 @@
|
||||
/deep/.el-input-tree-button {
|
||||
margin-left: 5px!important;
|
||||
}
|
||||
/deep/.open-file-dialog {
|
||||
.el-dialog {
|
||||
width: 400px;
|
||||
}
|
||||
.svg-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
.dialog-msg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -66,6 +66,10 @@
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
filepath: {
|
||||
type: String,
|
||||
default: undefined
|
||||
},
|
||||
status: {
|
||||
type: Boolean,
|
||||
default: function () {
|
||||
@ -160,15 +164,20 @@
|
||||
if(this.shareId){
|
||||
request = 'sharePreviewText'
|
||||
}
|
||||
if(this.filepath){
|
||||
request = 'previewTextByPath'
|
||||
this.options.readOnly = true
|
||||
}
|
||||
api[request]({
|
||||
shareId: this.shareId,
|
||||
fileId: file.id,
|
||||
id: file.id,
|
||||
path: this.filepath,
|
||||
username: this.$store.state.user.name
|
||||
}).then((res)=>{
|
||||
this.loading.close()
|
||||
this.textPreviewVisible = true
|
||||
this.content = res.data.contentText
|
||||
this.loading.close()
|
||||
this.textPreviewVisible = true
|
||||
this.content = res.data.contentText
|
||||
}).catch(() => {
|
||||
this.loading.close()
|
||||
})
|
||||
@ -256,7 +265,7 @@
|
||||
this.setTheme()
|
||||
},
|
||||
setTheme(){
|
||||
let header = document.querySelector('.simtext-dialog .el-dialog__header')
|
||||
let header = document.querySelector('.simtext-dialog .el-dialog .el-dialog__header')
|
||||
if(this.lightTheme){
|
||||
header.style.background = '#FFF'
|
||||
header.style.color = '#181818'
|
||||
@ -290,7 +299,6 @@
|
||||
<style lang="scss" scoped>
|
||||
@import "src/styles/markdown";
|
||||
|
||||
|
||||
/deep/.el-dialog {
|
||||
/*width: 1035px;*/
|
||||
margin: 0 !important;
|
||||
|
||||
1
src/icons/svg/warring.svg
Normal file
1
src/icons/svg/warring.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg t="1590740552858" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1150" width="128" height="128"><path d="M512 1024.056889a512.568889 512.568889 0 0 1-512-512 512.625778 512.625778 0 0 1 512-512 512.568889 512.568889 0 0 1 512 512 512.512 512.512 0 0 1-512 512z m0-284.444445a56.888889 56.888889 0 0 0-55.978667 46.762667A57.856 57.856 0 0 0 455.111111 796.444444a56.888889 56.888889 0 0 0 56.888889 56.888889 56.888889 56.888889 0 0 0 55.921778-46.762666 55.296 55.296 0 0 0 0.967111-10.069334 56.888889 56.888889 0 0 0-56.888889-56.888889z m0-560.64a52.679111 52.679111 0 0 0-47.843556 40.675556 42.496 42.496 0 0 0-0.796444 8.021333v357.262223a51.996444 51.996444 0 0 0 48.64 48.753777 53.020444 53.020444 0 0 0 48.753778-40.675555V227.612444a51.996444 51.996444 0 0 0-48.64-48.696888z" fill="#FFC320" p-id="1151"></path></svg>
|
||||
|
After Width: | Height: | Size: 880 B |
@ -6,7 +6,10 @@ export const suffix = {
|
||||
'xml','xsl','iml','m','bas','prg','cmd',
|
||||
'sass','sas','php','lst','key','pem','log',
|
||||
'cmake','db','gradle','bat'
|
||||
]
|
||||
],
|
||||
compressedFile: [
|
||||
'zip'
|
||||
],
|
||||
}
|
||||
|
||||
monaco.languages.getLanguages().forEach(language => {
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-1" type="success">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,7 +0,0 @@
|
||||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-2" type="success">
|
||||
<router-view />
|
||||
</el-alert>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,5 +0,0 @@
|
||||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-2-1" type="warning" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,5 +0,0 @@
|
||||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-2-2" type="warning" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,5 +0,0 @@
|
||||
<template functional>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 1-3" type="success" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div style="padding:30px;">
|
||||
<el-alert :closable="false" title="menu 2" />
|
||||
</div>
|
||||
</template>
|
||||
@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<div v-html="htms"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
converter.setOption('tables', true); // 将表格显示出来
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
htms: ""
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.setMakedown()
|
||||
},
|
||||
methods: {
|
||||
setMakedown() {
|
||||
this.htms = converter.makeHtml('# 这是一个标题')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,184 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<style>
|
||||
.process-area {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
background: #eee;
|
||||
margin: auto;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
transition: .5s;
|
||||
}
|
||||
.process-anime {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 4px solid #fff;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background: linear-gradient(45deg,#fde47c,#fdeca6);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.process-anime .cube-a {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
background: rgba(53,53,53,.3);
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 50px;
|
||||
animation: fx-rotate 15s infinite linear;
|
||||
transform-origin: 50% 50%;
|
||||
transition: .5s;
|
||||
}
|
||||
.process-anime .cube-b {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
background: #fff;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 50px;
|
||||
animation: fx-rotate 10s infinite reverse linear;
|
||||
transform-origin: 50% 50%;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
/**成功**/
|
||||
.process-anime .done {
|
||||
position: absolute;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%) scale(2.25);
|
||||
}
|
||||
.process-anime .done .checkmark {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
stroke-width: 2;
|
||||
stroke: #fff;
|
||||
stroke-miterlimit: 10;
|
||||
box-shadow: inset 0 0 0 #fdda65;
|
||||
animation: fill-data-v-93100324 .4s ease-in-out .4s forwards,scale-data-v-93100324 .3s ease-in-out .9s both;
|
||||
}
|
||||
.process-anime .done .checkmark__check {
|
||||
transform: translate(2px,2px);
|
||||
transform-origin: 50% 50%;
|
||||
stroke-dasharray: 48;
|
||||
stroke-dashoffset: 48;
|
||||
animation: stroke-data-v-93100324 .3s cubic-bezier(.65,0,.45,1) .8s forwards;
|
||||
}
|
||||
|
||||
|
||||
*{
|
||||
margin:0;
|
||||
}
|
||||
.box{
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
margin: 130px auto;
|
||||
background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(255,234,149,0.96) 68%);
|
||||
border-radius: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.box:before{
|
||||
content: '';
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,0.96) 68%);
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
}
|
||||
/*.box:after{*/
|
||||
/*content: '';*/
|
||||
/*width: 160px;*/
|
||||
/*height: 160px;*/
|
||||
/*background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,234,149,1) 50%);*/
|
||||
/*border-radius: 100%;*/
|
||||
/*position: absolute;*/
|
||||
/*left: 20px;*/
|
||||
/*top: 20px;*/
|
||||
/*}*/
|
||||
.wave{
|
||||
margin-top: 0px;
|
||||
width: 100%;
|
||||
height: 210px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
}
|
||||
.parallax>use {
|
||||
animation: wave-move 5s linear infinite;
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
.parallax>use:nth-child(1) {
|
||||
animation-delay: -.5s;
|
||||
}
|
||||
.parallax>use:nth-child(2) {
|
||||
animation-delay: -.9s;
|
||||
}
|
||||
.parallax>use:nth-child(3) {
|
||||
animation-delay: -1.5s;
|
||||
}
|
||||
@keyframes wave-move {
|
||||
0% {
|
||||
transform: translate(90px,0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-85px,0);
|
||||
}
|
||||
}
|
||||
@keyframes fx-rotate {
|
||||
0% {
|
||||
transform: translate(-50%) rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%,2px) rotate(365deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="process-area">
|
||||
<div class="process-anime">
|
||||
<div class="cube-a" style="top: -60%;"></div>
|
||||
<div class="cube-b" style="top: -60%;"></div><!----></div>
|
||||
|
||||
<div data-v-93100324="" class="done">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">
|
||||
<path d="M14.1 27.2l7.1 7.2 16.7-16.8" class="checkmark__check" style="fill: transparent;"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box">
|
||||
<svg class="wave" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 200 210">
|
||||
<defs>
|
||||
<path id="wave-shape" stroke="rgba(255,255,255,.8)" stroke-width=".5" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 58-18 88-18 58 18 88 18 v185h-528z"></path>
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use xlink:href="#wave-shape" x="50" y="0" fill="url(#linear)"></use>
|
||||
<use xlink:href="#wave-shape" x="50" y="3" fill="url(#linear)"></use>
|
||||
<use xlink:href="#wave-shape" x="50" y="6" fill="url(#linear)"></use>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(90)">
|
||||
<stop offset="10%" stop-color="#FDD936" stop-opacity="0.4" />
|
||||
<stop offset="80%" stop-color="#E6911B" stop-opacity="0.8" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#aaa {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
transition: all 2s;
|
||||
-moz-transition: all 2s; /* Firefox 4 */
|
||||
-webkit-transition: all 2s; /* Safari and Chrome */
|
||||
-o-transition: all 2s; /* Opera */
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function big() {
|
||||
document.getElementById("aaa").style.width = "300px";
|
||||
document.getElementById("aaa").style.height = "300px";
|
||||
}
|
||||
function small() {
|
||||
document.getElementById("aaa").style.width = "100px";
|
||||
document.getElementById("aaa").style.height = "100px";
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="big()">Big</button>
|
||||
<button onclick="small()">Small</button>
|
||||
<div id="aaa"></div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,206 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>js仿360桌面悬浮球拖拽到边缘自动贴边特效</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#drag-ball {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #ddd;
|
||||
position: fixed;
|
||||
cursor: move;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #66cc66;
|
||||
border-radius: 50%;
|
||||
background: url('test.jpeg') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="drag-ball"></div>
|
||||
|
||||
<script>
|
||||
|
||||
// 自动吸附距离
|
||||
var marginOffset = 50;
|
||||
|
||||
var ball = document.querySelector('#drag-ball');
|
||||
var ballWidth = ball.offsetWidth;
|
||||
var ballHeight = ball.offsetHeight;
|
||||
var cuntWidth = 0;
|
||||
var cuntHeight = 0;
|
||||
// ball.style.left = parseInt(Math.random() * (document.body.offsetWidth - ballWidth)) + 'px';
|
||||
// ball.style.top = parseInt(Math.random() * (document.body.offsetHeight - ballHeight)) + 'px';
|
||||
|
||||
function move(obj, w, h) {
|
||||
if (obj.direction === 'left') {
|
||||
obj.style.left = 0 - w + 'px';
|
||||
} else if (obj.direction === 'right') {
|
||||
obj.style.left = document.body.offsetWidth - ballWidth + w + 'px';
|
||||
}
|
||||
if (obj.direction === 'top') {
|
||||
obj.style.top = 0 - h + 'px';
|
||||
} else if (obj.direction === 'bottom') {
|
||||
obj.style.top = document.body.offsetHeight - ballHeight + h + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function rate(obj, a) {
|
||||
obj.style.transform = ' rotate(' + a + ')'
|
||||
}
|
||||
|
||||
function action(obj) {
|
||||
|
||||
var dir = obj.direction;
|
||||
|
||||
switch (dir) {
|
||||
case 'left':
|
||||
rate(obj, '90deg');
|
||||
break;
|
||||
case 'right':
|
||||
rate(obj, '-90deg');
|
||||
break;
|
||||
case 'top':
|
||||
rate(obj, '-180deg');
|
||||
break;
|
||||
default:
|
||||
rate(obj, '-0');
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function ballMove(ballDynamicLeft,ballDynamicTop) {
|
||||
cuntWidth = 0;
|
||||
cuntHeight = 0;
|
||||
ball.direction = '';
|
||||
ball.style.transition = '';
|
||||
ball.style.left = ballDynamicLeft + 'px';
|
||||
ball.style.top = ballDynamicTop + 'px';
|
||||
if (ballDynamicLeft < marginOffset) {
|
||||
ball.direction = 'left';
|
||||
if (ballDynamicLeft < 1) {
|
||||
move(ball, 0, 0);
|
||||
}
|
||||
}
|
||||
if (ballDynamicTop < marginOffset) {
|
||||
ball.direction = 'top';
|
||||
if (ballDynamicTop < 1) {
|
||||
move(ball, 0, 0);
|
||||
}
|
||||
}
|
||||
if (ballDynamicLeft > document.body.offsetWidth - ballWidth - marginOffset) {
|
||||
ball.direction = 'right';
|
||||
if (ballDynamicLeft > document.body.offsetWidth - ballWidth - 1) {
|
||||
move(ball, 0, 0);
|
||||
}
|
||||
}
|
||||
if (ballDynamicTop > document.body.offsetHeight - ballHeight - marginOffset) {
|
||||
ball.direction = 'bottom';
|
||||
if (ballDynamicTop > document.body.offsetHeight - ballHeight - 1) {
|
||||
move(ball, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***
|
||||
* 移动端
|
||||
*/
|
||||
ball.addEventListener('touchstart', function (e) {
|
||||
var ballLeft = e.touches[0].clientX - ball.offsetLeft;
|
||||
var ballTop = e.touches[0].clientY - ball.offsetTop;
|
||||
move(this, 0, 0);
|
||||
rate(this, 0)
|
||||
document.addEventListener('touchmove', function (e) {
|
||||
var ballDynamicLeft = e.touches[0].clientX - ballLeft
|
||||
var ballDynamicTop = e.touches[0].clientY - ballTop
|
||||
ballMove(ballDynamicLeft,ballDynamicTop)
|
||||
})
|
||||
})
|
||||
|
||||
ball.addEventListener('touchend', function () {
|
||||
this.style.transition = '.5s';
|
||||
move(this, ballWidth / 2, ballHeight / 2);
|
||||
action(this);
|
||||
})
|
||||
|
||||
/***
|
||||
* pc端
|
||||
*/
|
||||
ball.onmousedown = function (e) {
|
||||
var ballLeft = e.clientX - ball.offsetLeft;
|
||||
var ballTop = e.clientY - ball.offsetTop;
|
||||
document.onmousemove = function (e) {
|
||||
cuntWidth = 0;
|
||||
cuntHeight = 0;
|
||||
var ballDynamicLeft = e.clientX - ballLeft
|
||||
var ballDynamicTop = e.clientY - ballTop
|
||||
ballMove(ballDynamicLeft,ballDynamicTop)
|
||||
}
|
||||
}
|
||||
|
||||
ball.onmouseover = function () {
|
||||
move(this, 0, 0);
|
||||
rate(this, 0)
|
||||
}
|
||||
|
||||
ball.onmouseout = function () {
|
||||
move(this, ballWidth / 2, ballHeight / 2);
|
||||
action(this);
|
||||
}
|
||||
|
||||
ball.onmouseup = function () {
|
||||
document.onmousemove = null;
|
||||
this.style.transition = '.5s';
|
||||
move(this, ballWidth / 2, ballHeight / 2);
|
||||
action(this);
|
||||
}
|
||||
|
||||
window.onresize = function () {
|
||||
var bodyH = document.body.offsetHeight;
|
||||
var ballTop = ball.offsetTop;
|
||||
var bodyW = document.body.offsetWidth;
|
||||
var ballLeft = ball.offsetLeft;
|
||||
|
||||
if (ballTop + ballHeight > bodyH) {
|
||||
ball.style.top = bodyH - ballHeight + 'px';
|
||||
cuntHeight++;
|
||||
}
|
||||
if (bodyH > ballTop && cuntHeight > 0) {
|
||||
ball.style.top = bodyH - ballHeight + 'px';
|
||||
}
|
||||
if (ballLeft + ballWidth > bodyW) {
|
||||
ball.style.left = bodyW - ballWidth + 'px';
|
||||
cuntWidth++;
|
||||
}
|
||||
if (bodyW > ballLeft && cuntWidth > 0) {
|
||||
ball.style.left = bodyW - ballWidth + 'px';
|
||||
}
|
||||
move(ball, ballWidth / 2, ballHeight / 2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 MiB |
@ -1,29 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<title>Example of DataTransfer.setDragImage()</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style>
|
||||
div {
|
||||
margin: 0em;
|
||||
padding: 2em;
|
||||
}
|
||||
#source {
|
||||
color: blue;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#target {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
</script>
|
||||
<body>
|
||||
<img src="../../assets/img/moveFile.png">
|
||||
<h1>Example of <code>DataTransfer.setDragImage()</code></h1>
|
||||
<div>
|
||||
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
|
||||
Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
|
||||
</div>
|
||||
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,281 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>悬浮小球不旋转</title>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*#drag-ball {*/
|
||||
/*width: 100px;*/
|
||||
/*height: 100px;*/
|
||||
/*position: fixed;*/
|
||||
/*cursor: pointer;*/
|
||||
/*box-sizing: border-box;*/
|
||||
/*border-radius: 50%;*/
|
||||
/*background-size: 100% 100%;*/
|
||||
/*overflow: hidden;*/
|
||||
/*}*/
|
||||
|
||||
.process-area {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
cursor: pointer;
|
||||
background: #eee;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
background-size: 100% 100%;
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
transition: .5s;
|
||||
}
|
||||
.process-anime {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border: 4px solid #fff;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
background: linear-gradient(45deg,#fde47c,#fdeca6);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.process-anime .cube-a {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
background: rgba(53,53,53,.3);
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 50px;
|
||||
animation: fx-rotate 15s infinite linear;
|
||||
transform-origin: 50% 50%;
|
||||
transition: .5s;
|
||||
}
|
||||
.process-anime .cube-b {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
background: #fff;
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 50px;
|
||||
animation: fx-rotate 10s infinite reverse linear;
|
||||
transform-origin: 50% 50%;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
@keyframes fx-rotate {
|
||||
0% {
|
||||
transform: translate(-50%) rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%,2px) rotate(365deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--<div id="drag-ball"></div>-->
|
||||
|
||||
<div class="process-area" id="drag-ball">
|
||||
<div class="process-anime">
|
||||
<div class="cube-a" style="top: -70%;"></div>
|
||||
<div class="cube-b" style="top: -70%;"></div><!----></div>
|
||||
|
||||
<!--<div data-v-93100324="" class="done">-->
|
||||
<!--<svg xmlns="http://www.w3.org/2000/svg" class="done-icon checkmark">-->
|
||||
<!--<path d="M14.1 27.2l7.1 7.2 16.7-16.8" class="checkmark__check" style="fill: transparent;"></path>-->
|
||||
<!--</svg>-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// 自动吸附距离
|
||||
var marginOffset = 100;
|
||||
|
||||
var ball = document.querySelector('#drag-ball');
|
||||
var ballWidth = ball.offsetWidth;
|
||||
var ballHeight = ball.offsetHeight;
|
||||
var cuntWidth = 0;
|
||||
var cuntHeight = 0;
|
||||
// ball.style.left = parseInt(Math.random() * (document.body.offsetWidth - ballWidth)) + 'px';
|
||||
// ball.style.top = parseInt(Math.random() * (document.body.offsetHeight - ballHeight)) + 'px';
|
||||
|
||||
function move(obj, w, h) {
|
||||
if (obj.direction === 'left') {
|
||||
obj.style.left = 0 - w + 'px';
|
||||
} else if (obj.direction === 'right') {
|
||||
obj.style.left = document.body.offsetWidth - ballWidth + w + 'px';
|
||||
}
|
||||
if (obj.direction === 'top') {
|
||||
obj.style.top = 0 - h + 'px';
|
||||
} else if (obj.direction === 'bottom') {
|
||||
obj.style.top = document.body.offsetHeight - ballHeight + h + 'px';
|
||||
}
|
||||
}
|
||||
|
||||
function rate(obj, a) {
|
||||
obj.style.transform = ' rotate(' + a + ')'
|
||||
}
|
||||
|
||||
function action(obj) {
|
||||
|
||||
var dir = obj.direction;
|
||||
|
||||
switch (dir) {
|
||||
case 'left':
|
||||
rate(obj, '90deg');
|
||||
break;
|
||||
case 'right':
|
||||
rate(obj, '-90deg');
|
||||
break;
|
||||
case 'top':
|
||||
rate(obj, '-180deg');
|
||||
break;
|
||||
default:
|
||||
rate(obj, '-0');
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function ballMove(ballDynamicLeft,ballDynamicTop) {
|
||||
cuntWidth = 0;
|
||||
cuntHeight = 0;
|
||||
ball.direction = '';
|
||||
ball.style.transition = '';
|
||||
ball.style.left = ballDynamicLeft + 'px';
|
||||
ball.style.top = ballDynamicTop + 'px';
|
||||
if (ballDynamicLeft < marginOffset) {
|
||||
ball.direction = 'left';
|
||||
if (ballDynamicLeft < 1) {
|
||||
move(ball, 0, 0);
|
||||
}
|
||||
}
|
||||
if (ballDynamicTop < marginOffset) {
|
||||
ball.direction = 'top';
|
||||
if (ballDynamicTop < 1) {
|
||||
move(ball, 0, 0);
|
||||
}
|
||||
}
|
||||
if (ballDynamicLeft > document.body.offsetWidth - ballWidth - marginOffset) {
|
||||
ball.direction = 'right';
|
||||
if (ballDynamicLeft > document.body.offsetWidth - ballWidth - 1) {
|
||||
move(ball, 0, 0);
|
||||
}
|
||||
}
|
||||
if (ballDynamicTop > document.body.offsetHeight - ballHeight - marginOffset) {
|
||||
ball.direction = 'bottom';
|
||||
if (ballDynamicTop > document.body.offsetHeight - ballHeight - 1) {
|
||||
move(ball, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/***
|
||||
* 移动端
|
||||
*/
|
||||
ball.addEventListener('touchstart', function (e) {
|
||||
var ballLeft = e.touches[0].clientX - ball.offsetLeft;
|
||||
var ballTop = e.touches[0].clientY - ball.offsetTop;
|
||||
move(this, 0, 0);
|
||||
rate(this, 0)
|
||||
document.addEventListener('touchmove', function (e) {
|
||||
var ballDynamicLeft = e.touches[0].clientX - ballLeft
|
||||
var ballDynamicTop = e.touches[0].clientY - ballTop
|
||||
ballMove(ballDynamicLeft,ballDynamicTop)
|
||||
})
|
||||
})
|
||||
|
||||
ball.addEventListener('touchend', function () {
|
||||
this.style.transition = '.5s';
|
||||
move(this, ballWidth / 2, ballHeight / 2);
|
||||
action(this);
|
||||
})
|
||||
|
||||
|
||||
/***
|
||||
* pc端
|
||||
*/
|
||||
ball.onmousedown = function (e) {
|
||||
console.log('onmousedown')
|
||||
var ballLeft = e.clientX - ball.offsetLeft;
|
||||
var ballTop = e.clientY - ball.offsetTop;
|
||||
document.onmousemove = function (e) {
|
||||
console.log('onmousemove')
|
||||
cuntWidth = 0;
|
||||
cuntHeight = 0;
|
||||
var ballDynamicLeft = e.clientX - ballLeft
|
||||
var ballDynamicTop = e.clientY - ballTop
|
||||
ballMove(ballDynamicLeft,ballDynamicTop)
|
||||
}
|
||||
}
|
||||
|
||||
ball.onclick = function() {
|
||||
console.log('click')
|
||||
}
|
||||
|
||||
ball.onmouseover = function () {
|
||||
console.log('onmouseover')
|
||||
move(this, 0, 0);
|
||||
rate(this, 0)
|
||||
}
|
||||
|
||||
ball.onmouseout = function () {
|
||||
console.log('onmouseout')
|
||||
move(this, ballWidth / 2, ballHeight / 2);
|
||||
// action(this);
|
||||
}
|
||||
|
||||
ball.onmouseup = function () {
|
||||
console.log('onmouseup')
|
||||
document.onmousemove = null;
|
||||
this.style.transition = '.5s';
|
||||
move(this, ballWidth / 2, ballHeight / 2);
|
||||
// action(this);
|
||||
}
|
||||
|
||||
window.onresize = function () {
|
||||
var bodyH = document.body.offsetHeight;
|
||||
var ballTop = ball.offsetTop;
|
||||
var bodyW = document.body.offsetWidth;
|
||||
var ballLeft = ball.offsetLeft;
|
||||
|
||||
if (ballTop + ballHeight > bodyH) {
|
||||
ball.style.top = bodyH - ballHeight + 'px';
|
||||
cuntHeight++;
|
||||
}
|
||||
if (bodyH > ballTop && cuntHeight > 0) {
|
||||
ball.style.top = bodyH - ballHeight + 'px';
|
||||
}
|
||||
if (ballLeft + ballWidth > bodyW) {
|
||||
ball.style.left = bodyW - ballWidth + 'px';
|
||||
cuntWidth++;
|
||||
}
|
||||
if (bodyW > ballLeft && cuntWidth > 0) {
|
||||
ball.style.left = bodyW - ballWidth + 'px';
|
||||
}
|
||||
move(ball, ballWidth / 2, ballHeight / 2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,53 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang=en>
|
||||
<title>Example of DataTransfer.setDragImage()</title>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<style>
|
||||
div {
|
||||
margin: 0em;
|
||||
padding: 2em;
|
||||
}
|
||||
#source {
|
||||
color: blue;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#target {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function dragstart_handler(ev) {
|
||||
console.log("dragStart");
|
||||
// 设置拖动的格式和数据。使用事件目标的id作为数据
|
||||
// ev.dataTransfer.setData("text/plain", ev.target.id);
|
||||
// 创建一个图像并且使用它作为拖动图像
|
||||
// 请注意： 改变 "example.gif" 为一个已经存在的图片
|
||||
// 或者，一个还没有创建出来的图片，那么浏览器将会使用默认的拖动图片
|
||||
// 译者注：默认的拖动图片与拖动对象没有联系。一般是一个小型文件图标
|
||||
let img = new Image();
|
||||
img.src = 'https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png';
|
||||
ev.dataTransfer.setDragImage(img, 10, 10);
|
||||
}
|
||||
|
||||
function dragover_handler(ev) {
|
||||
console.log("dragOver");
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
function drop_handler(ev) {
|
||||
console.log("Drop");
|
||||
ev.preventDefault();
|
||||
// 获取拖放目标的id数据
|
||||
let data = ev.dataTransfer.getData("text");
|
||||
ev.target.appendChild(document.getElementById(data));
|
||||
}
|
||||
</script>
|
||||
<body>
|
||||
<h1>Example of <code>DataTransfer.setDragImage()</code></h1>
|
||||
<div>
|
||||
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
|
||||
Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
|
||||
</div>
|
||||
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,76 +0,0 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
|
||||
<head>
|
||||
<title>鼠标拖动画矩形</title>
|
||||
<meta http-equiv="content-type" content="text/htmlcharset=utf-8">
|
||||
<style type="text/css">
|
||||
/*body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0padding:0}*/
|
||||
/*html{color:#000overflow-y:scolloverflow:-moz-scrollbars-vertical}*/
|
||||
/*.draw-rectangle{position:absolute border:1px dashed #2898ff width:0px height:0pxleft:0px top:0px overflow:hidden}*/
|
||||
/*.retc{position:absolute border:1px solid #CCCCCC overflow:hidden background:#EFEFEF}*/
|
||||
</style>
|
||||
</head>
|
||||
<body style="text-align:center;">
|
||||
<div id="ddd" style="margin:0 auto;margin-top:100px;text-align: center;width: 500px;height: 5000px; border:1px solid #000000;"></div>
|
||||
</body>
|
||||
<script language = "javascript">
|
||||
|
||||
let $$ = function(id){
|
||||
return document.getElementById(id)
|
||||
}
|
||||
let draw = $$('ddd')
|
||||
let wId = "rectangle1"
|
||||
let startX = 0, startY = 0
|
||||
let flag = false
|
||||
let retcLeft = 0, retcTop = 0, retcHeight = 0, retcWidth = 0
|
||||
draw.onmousedown = function(e){
|
||||
|
||||
flag = true
|
||||
let evt = window.event || e
|
||||
console.log('evt',evt)
|
||||
let scrollTop = draw.scrollTop || draw.scrollTop
|
||||
let scrollLeft = draw.scrollLeft || draw.scrollLeft
|
||||
startX = evt.clientX + scrollLeft
|
||||
startY = evt.clientY + scrollTop
|
||||
let div = document.createElement("div")
|
||||
div.id = wId
|
||||
div.className = "draw-rectangle"
|
||||
div.style.left = evt.x + "px"
|
||||
div.style.top = evt.y + "px"
|
||||
div.style.position = 'absolute'
|
||||
div.style.border = '1px dashed #2898ff'
|
||||
div.style.width = '0px'
|
||||
div.style.height = '0px'
|
||||
div.style.left = '0px'
|
||||
div.style.top = '0px'
|
||||
div.style.overflow = 'hidden'
|
||||
draw.appendChild(div)
|
||||
|
||||
document.onmousemove = function(e){
|
||||
if(flag){
|
||||
let evt = window.event || e
|
||||
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
|
||||
let scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft
|
||||
retcLeft = (startX - evt.clientX - scrollLeft > 0 ? evt.clientX + scrollLeft : startX)
|
||||
retcTop = (startY - evt.clientY - scrollTop > 0 ? evt.clientY + scrollTop : startY)
|
||||
retcHeight = Math.abs(startY - evt.clientY - scrollTop)
|
||||
retcWidth = Math.abs(startX - evt.clientX - scrollLeft)
|
||||
$$(wId).style.left = retcLeft + 'px'
|
||||
$$(wId).style.top = retcTop + 'px'
|
||||
$$(wId).style.width = retcWidth + 'px'
|
||||
$$(wId).style.height = retcHeight + 'px'
|
||||
$$(wId).style.backgroundColor = '#f2f5fa55'
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
document.onmouseup = function(){
|
||||
flag = false
|
||||
if($$(wId)){
|
||||
console.log('left',retcLeft, 'top',retcTop, 'width',retcWidth, 'hieght',retcHeight)
|
||||
// draw.removeChild($$(wId))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />
|
||||
|
||||
<el-tree
|
||||
ref="tree2"
|
||||
:data="data2"
|
||||
:props="defaultProps"
|
||||
:filter-node-method="filterNode"
|
||||
class="filter-tree"
|
||||
default-expand-all
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
filterText: '',
|
||||
data2: [{
|
||||
id: 1,
|
||||
label: 'Level one 1',
|
||||
children: [{
|
||||
id: 4,
|
||||
label: 'Level two 1-1',
|
||||
children: [{
|
||||
id: 9,
|
||||
label: 'Level three 1-1-1'
|
||||
}, {
|
||||
id: 10,
|
||||
label: 'Level three 1-1-2'
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: 2,
|
||||
label: 'Level one 2',
|
||||
children: [{
|
||||
id: 5,
|
||||
label: 'Level two 2-1'
|
||||
}, {
|
||||
id: 6,
|
||||
label: 'Level two 2-2'
|
||||
}]
|
||||
}, {
|
||||
id: 3,
|
||||
label: 'Level one 3',
|
||||
children: [{
|
||||
id: 7,
|
||||
label: 'Level two 3-1'
|
||||
}, {
|
||||
id: 8,
|
||||
label: 'Level two 3-2'
|
||||
}]
|
||||
}],
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'label'
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree2.filter(val)
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
return data.label.indexOf(value) !== -1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<!-- 背景图高斯模糊效果 -->
|
||||
<div class="bgFilter">
|
||||
<div class="box">
|
||||
<img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582723247&t=3060bfc4978e78d3accef89c1eb7dc8e" alt="img" class="bg">
|
||||
<div class="content">
|
||||
<!-- <img src="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582723247&t=3060bfc4978e78d3accef89c1eb7dc8e" alt="img"> -->
|
||||
<div class="text">我是文字我是文字我是文字</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "bgFilter"
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bgFilter {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
.box {
|
||||
width: 700px;
|
||||
height: 500px;
|
||||
position: relative;
|
||||
// 我是模糊的背景
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
-webkit-filter: blur(8px);
|
||||
-moz-filter: blur(8px);
|
||||
-o-filter: blur(8px);
|
||||
-ms-filter: blur(8px);
|
||||
filter: blur(8px);
|
||||
}
|
||||
// 我是图片和上面的文字
|
||||
.content {
|
||||
.text {
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
box-sizing: border-box;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
text-align: right;
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 5%;
|
||||
transform: translate(0, -50%);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user