vue实现添加购物车光标效果

效果如下：

代码如下：

直接复制即可

<template><div class="body"><div class="box"><button v-for="(item, index) in 3" :key="index" ref="add">+</button></div><div class="btom" ref="mapper">{{ number }}</div></div>
</template><script>
export default {data() {return {number: 0,};},methods: {// 获取当前位置 用来生成小球addCar(event) {this.number++;// 每次点击的时候 获取到当前生成小球的位置let x = event.pageX - event.target.offsetWidth / 2;let y = event.pageY - event.target.offsetWidth / 2;// 然后调用创建小球的函数this.createEm(x, y);},// 生成小球createEm(x, y) {// 创建一个div元素let bar = document.createElement("div");// 然后把创建出来的小球定位到当前点击的位置bar.style.position = "absolute";bar.style.left = x + "px";bar.style.top = y + "px";// 然后给小球设置宽高bar.style.width = "20px";bar.style.height = "20px";// 这个属性是圆角边框bar.style.borderRadius = "50%";bar.style.boxShadow = "0 0 10px 10px #fff";// 小球的背景颜色bar.style.backgroundColor = "#eee";// 小球的动画样式 (触发后)bar.style.transition ="left 1s linear , top .8s cubic-bezier(.59,.2,0,1.18)";// 创建好小球后 插入到页面中document.body.appendChild(bar);// 当这个位置发生变化时 触发动画setTimeout(() => {// 获取小球最终要到达地方的节点let target = this.$refs.mapper;// 这个时候在让小球获取到实例对象的位置 就是相当于从自身到目标的位置 形成了动画bar.style.left = target.offsetLeft + target.offsetWidth / 2 + "px";bar.style.top = target.offsetTop + "px";}, 0);// // 动画结束后 ，删除掉小球bar.ontransitionend = function () {this.remove();};},},mounted() {// 获取到当前的实例对象var buttons = this.$refs.add;console.log(buttons);// 给每个实例对象都循环添加一个点击事件  然后绑定对应的监听事件for (let i = 0; i < buttons.length; i++) {buttons[i].addEventListener("click", this.addCar);}},
};
</script><style lang="scss" scoped>
.box {width: 50px;height: 50px;position: absolute;top: 30px;right: 30px;display: flex;flex-direction: column;justify-content: space-between;button {height: 20px;background: #fff;margin-top: 5px;border-color: aqua pink purple orange;}
}
.btom {width: 50px;height: 50px;border: 2px solid;border-color: aqua pink purple orange;position: absolute;bottom: 20px;left: 10px;text-align: center;line-height: 50px;
}
.body {width: 100vw;height: 100vh;background: #ccc;
}
</style>

vue实现添加购物车光标效果相关推荐

jQuery.fly插件实现添加购物车抛物线效果
样例使用电商 APP 购买商品时,很多都有上图的红色小球抛物线效果,下面通过 jQuery.fly 插件来实现一个简单 Demo. 实现简单思路: 确定抛物线的起始和终止位置: 通过 js 在起始 ...
Vue商品添加到购物车
用Vue实现把商品添加到购物车然后计算购物车里商品总金额. 功能分析: 1.商品添加到购物车 2.购物车显示商品的名称数量价格 3.计算购物车商品的总金额 4.删除购物车商品效果演示原始样式添加 ...
Android之实现京东底部添加到购物车的效果
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/50992567 本文出自:[顾林海的博客] ##前言美好的双休日快要结 ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
vue openlayer 添加风场效果
vue openlayer 添加风场效果一个简单的小demo,就是在一个openlayers地图上面添加风场效果. 话不多说,直接进入正题. 首先我们需要安装一个插件. 插件地址:https://w ...
Camtasia添加光标效果教程
Camtasia是一款集屏幕录制与视频剪辑于一身的软件,相较其他软件,它的功能更齐全,操作也更简单,所以深受自媒体工作者的喜爱. Camtasia免费下载地址: https://souurl.cn/n ...
通过Camtasia来添加各种各样的光标效果
在十几二十年前的时候,我们想要学习新的知识需要到学校和培训班才行,但是现在只要有一台电脑.一部手机或者平板,我们在家里也能找到我们喜欢的课程来学习了,微课也因此而生. 同样的,有了想要学习知识的学生, ...
电商--添加宝贝入购物车动画效果制作
[声明]本内容不知道是在哪里下载的demo代码,找不到原作者了,如有发现请联系我,加上作者或者删除该内容! 大佬的思路如下: 1.首先设置生成加入购物车效果代码,文章最后面代码NXHooldeView ...
黑马瑞吉外卖之购物车功能开发（添加购物车和购物车数据展示）
黑马瑞吉外卖之购物车功能前端界面分析后台购物车功能逻辑实现前端界面分析当我们点击选择规格的时候,数据参数item会传入按钮绑定的方法中我们点击到这个按钮的时候,那么就会绑定到这个方法.这个方 ...
用Vue来实现购物车功能（二）
这个小demo具有添加商品进购物车 .增加购物车内商品的数量.减少购物车内商品的数量.计算一类商品的总价.以及计算所有商品的总价首先看目录结构因为我们的Tab.vue Car.vue 以及Car ...

vue实现添加购物车光标效果

vue实现添加购物车光标效果相关推荐

最新文章

热门文章