前端
前端
若水上善666
这个作者很懒,什么都没留下…
展开
-
CSS毛玻璃模糊效果
效果大家可以看看上面顶部一条白色的横杠,背景图片是明显虚化的,还有就是在评论区的下方背景也是被明显虚化的,首先说明一点我一开始本想着怎么让评论区下方的虚化效果和背景图片完美衔接,就是那种评论区和背景是一副完整的图片,但是我发现有点困难呀,没有头绪哈哈。...原创 2020-06-18 17:10:36 · 898 阅读 · 0 评论 -
body元素比canvas高4px问题
问题描述<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="...原创 2020-02-21 14:27:00 · 274 阅读 · 0 评论 -
javascript中canvas画爱心
1.效果如下2.HTML,CSS代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> ...原创 2020-02-20 14:31:17 · 4860 阅读 · 0 评论 -
javascript中~~运算符的作用
~~运算符的作用和Math.floor()的作用一样,对于正数相当于向下取整,但是效率比Math.floor()高,对于负数则是向上取整。举例:console.log(5.66)console.log(~5.66)console.log(~~5.66)运行结果:5.66 -6 5console.log(-5.66)console.log(~-5.66)console.log...原创 2020-02-19 21:25:43 · 694 阅读 · 0 评论 -
canvas动画实现瀑布
1.效果如下开始的时候:一段时间之后:2.HTML,CSS代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>&...原创 2020-02-19 21:58:05 · 748 阅读 · 0 评论 -
javascript中一些常用的操作
javascript基本数据类型1.js常用的基本数据类型包括undefined、null、number、boolean、string2.js的引用数据类型也就是对象类型Object,比如:Object、array等1.Number的常用操作Number.isNaN()确定传递的值是否是 NaN。Number.isFinite()方法用来检测传入的参数是否是一个有穷数。Numbe...原创 2020-02-10 13:28:47 · 182 阅读 · 0 评论 -
Vue中引入外部的js文件
问题描述在使用threejs的时候,我需要用到一个transformSVGPath()函数,这个函数是别人写好了的。function transformSVGPath(){// 函数内容}我想用import的方法在Vue组件中使用这个函数。解决方法1.引入一个函数function transformSVGPath(){// 函数内容}export{ transformSV...原创 2020-02-29 20:45:37 · 381 阅读 · 0 评论 -
vue中引入全局变量
1.main.js中代码这里以引入three.js为例。import * as THREE from 'three'Vue.prototype.THREE = THREE利用Vue.prototype来注册全局变量2.引用 this.scene = new this.THREE.Scene()在组件中直接使用this.THREE来调用...原创 2020-02-25 16:57:09 · 714 阅读 · 0 评论 -
javascript中遇到this指针问题的说明
问题描述在Vue框架中写了一个global.vue用来存放Vue文件中的全局变量,或者是一种代替Vue本身store的方法,在global.vue中一开始写了一个函数如下: function panAndZoom (point) { let that = this this.map.panTo(point) setTimeout(function () { ...原创 2019-11-08 17:36:00 · 179 阅读 · 0 评论 -
百度地图中点击实现标注放大
效果如下js函数实现的整体思路是当鼠标点击按钮的时候,首先执行的是去除地图上所有的标注,并且将页面上所有标注的active设置为false(标注的active为true则表示为该标注以放大形式显示),然后将点击按钮所对应的坐标中active设置为true,最后绘制所有点的坐标let siteList = { 'trip': { 'positions': [ {// ...原创 2019-10-12 16:39:29 · 3084 阅读 · 0 评论 -
百度地图自定义标注样式
实现效果图标注样式的自定义// 百度地图marker样式let icon1 = new BMap.Icon(require('../src/assets/nationMap/marker1.png'), new BMap.Size(20, 60), { anchor: new BMap.Size(10, 36), // 设置图片偏移,类似于剪切图片的功能 imageOffset...原创 2019-10-11 17:50:50 · 3350 阅读 · 0 评论 -
javascript实现鼠标移动两个小人的动画效果
动画效果实现HTML中的代码<div class="background" @mousemove="movezzhhMove($event)" @mouseup="movezzhhUp($event)"> </div> <div class="zz-img" @mousedown="movezzhhDown($event)" @mousemov...原创 2019-09-27 15:00:19 · 1204 阅读 · 0 评论 -
百度地图入门
vue-baidu-map的使用方式main.js中添加的代码引入百度Mapimport BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ ak: '写入申请的密钥' })vue-baidu-map的...原创 2019-09-11 21:51:10 · 423 阅读 · 0 评论 -
在Vuej和query中函数节流和去抖
函数去抖函数去抖的意思是说当调用该函数n毫秒后,才会执行该函数,若在这n毫秒内又调用此函数则将重新计算执行时间。function debounce(method,delay,arguments){//method为需要执行的函数,delay是延时时间(毫秒),arguments是method函数需要传递的参数 var timer=null; return fun...原创 2019-04-07 12:24:45 · 349 阅读 · 0 评论 -
Vue中传递event
Vue中传递event在html中的代码如下<li class="circle" listId="0" @click="listChoose($event)"></li>在javascript中的代码如下listChoose: function (event) { this.photoPosition = $(event.target).at...原创 2019-04-02 22:18:06 · 3763 阅读 · 0 评论 -
Vue3中引入jquery
vue3中引入jquery由于我用vue创建项目之后并没有出现build文件夹,应该是vue3之后简化了,看了网上的一些教程都是要修改build文件下面的webpack文件,但是我没有找到就想到一个方法,个人拙见,在main.js的文件中插入import $ from 'jquery'Vue.prototype.JQ = $然后在需要用到的地方使用this.JQ来调用mo...原创 2019-03-22 11:18:30 · 4675 阅读 · 0 评论 -
Vue+router+Vuex+axios入门
Vue安装npm install -g @vue/cliVue创建项目过程1.通过命令行vue create my-project2.还有一种方式就是通过vue ui来打开可视化的页面安装,这里记录下我用vue ui来创建项目vue ui存在一个问题,就是有电脑上面会报错,如下:pc@pc-PC MINGW64 /e/vue/test$ vue u...原创 2019-02-08 16:28:42 · 549 阅读 · 0 评论 -
threejs中一些问题汇总
1.图像去锯齿原创 2020-03-04 21:15:06 · 2121 阅读 · 0 评论 -
threejs加载三维字体
效果原创 2020-03-03 20:35:17 · 2013 阅读 · 2 评论 -
threejs中的阴影
1.效果2.实现要求渲染器开启阴影渲染this.renderer.shadowMap.enabled = true;灯光需要开启“引起阴影”dirLight.castShadow = true物体需要开启“引起阴影”svg.castShadow = true平面开启“接受阴影”plane.receiveShadow = true...原创 2020-03-02 17:14:47 · 1065 阅读 · 0 评论 -
threejs利用svg拉伸形成立体图
1.svg图片转化成threejs对象这里我们用到了别人写好的函数transformSVGPathExposed(),这个函数传入的变量是svg图片的路径字符串,输出的是threejs中shape对象。https://johnson2heng.github.io/three.js-demo/lib/js/libs/d3-threeD.js我们在vue中引入上述js文件需要做一点小小修改。原...原创 2020-03-02 11:48:38 · 2488 阅读 · 1 评论 -
threejs实现天空盒
1.天空盒概述以及效果类似这种全景图片,我们将图片切成六个小图片,分别将六个小图片贴在一个正方体的里面,这样当我们置身于这个正方体里面的时候,就像在看全景图一样。效果如下:2.threejs代码 var path = '/sky/' var format = '.jpg' var urls = [ path + 'px' + format, p...原创 2020-02-26 16:54:55 · 5114 阅读 · 1 评论 -
three.js加载obj模型和材质
1.Vue中安装three.js和加载用的包安装three.js使用npm install three --save安装加载obj和mtl文件的包npm install three-obj-mtl-loader2.Vue中引用three.js和加载用的包这里threejs我是作为全局变量引入的main.js的代码如下:import * as THREE from 'three'Vue...原创 2020-02-25 17:45:24 · 5659 阅读 · 3 评论