用vue做的跟随鼠标移动的div

2020-03-19 19:50:31

1、最近接到一个任务,就是在既存用electron-vue开发的桌面端程序上追加随鼠标移动的动画效果,之前一直使用angular和react,没怎么接触过vue,先做一个vue的简单例子,然后再整合。

2、程序比较简单,直接上代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Vue学习</title>
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
		
		<style type="text/css"> 
			.drag{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 0;
				left: 0;
				background-color: red;
				background: url(at-all.png);
				background-size: cover;
			}
			.drag:hover{
				width: 100px;
				height: 100px;
				position: absolute;
				top: 0;
				left: 0;
				cursor:pointer;
				background-color: red;
				background: url(at-all.png);
				background-size: cover;
			}
		</style>
		
    </head>
	
	<div id="app1" v-drag class="drag"></div>
	
	<script>
		// 拖动div元素
		let vm1 = new Vue({
			el:'#app1',
			// 自定义指令
			directives:{
				drag(el, bindings){
					el.onmousedown = function(e){
						var disx = e.pageX - el.offsetLeft;
						var disy = e.pageY - el.offsetTop;
						document.onmousemove = function (e){
							el.style.left = e.pageX - disx + 'px';
							el.style.top = e.pageY - disy + 'px';
						}
						document.onmouseup = function(){
							document.onmousemove = document.onmouseup = null;
						}
					}
				}
			}
		})
    </script>
	</body>

</html>


  • 2019-06-13 11:31:32

    Android Studio接入ARouter以及简单使用

    你可能会说如果我的A module依赖了 B module,那么只要在B里面配置是不是就可以了?绝对不行!无论module之间关系如何,必须要同样配置!包括主项目和library项目!

  • 2019-06-13 11:34:24

    Android组件化方案

    1为什么要项目组件化 2如何组件化 3组件化实施流程

  • 2019-06-23 09:22:33

    Android 拍摄(横\竖屏)视频的懒人之路

    一般用在多媒体录制上面,当然如果你只是简单的想录制音频,用它最合适不过,不过如果你想更多样化的录制这里推荐《Android MP3录制,波形显示,音频权限兼容与播放》。今天的主题是录制视频,用的还是老式通用的Camera,不是新的camera2(这就尴尬了.....((/- -)/),反正个人秉承能用是王道的做法(懒)。之前也尝试过FFMPEG的录制合成音频,大小和效果也不错,只是有时候的兼容性确实有些问题,最主要还是资料不多,不好改啊 ̄へ ̄(懒)。

  • 2019-06-23 09:24:59

    仿抖音系列

    最近公司在做个短视频的项目,其中借鉴了很多抖音的设计,其中就有抖音的上下滑切换视频。