![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 92
永远的新手
这个作者很懒,什么都没留下…
展开
-
罗德里格斯旋转公式(Rodrigues‘ rotation formula)推导
本文综合了几个相关的维基百科,加了点自己的理解,从比较基础的向量投影和叉积讲起,推导出罗德里格斯旋转公式。公式比较繁杂,如有错误,欢迎评论区指出。 对于向量的三维旋转问题,给定旋转轴和旋转角度,用罗德里格斯(Rodrigues)旋转公式可以得出旋转后的向量。另外,罗德里格斯旋转公式可以用旋转矩阵表示,即将三维旋转的轴-角(axis-angle)表示转变为旋转矩阵表示。向量投影(Vector projection) 向量a在非零向量b上的向量投影指的是a在平行于向量b的直线上的正交投影。结果是原创 2021-05-19 08:09:43 · 2342 阅读 · 0 评论 -
js图片随鼠标移动,旋转,拉伸
效果如图,图片可以跟随鼠标移动,旋转,拉伸,代码在谷歌浏览器和IE11验证了,其他浏览器没试过本博客源码:https://github.com/shengbid/vue-demo把这个功能放在vue项目里了, 这个项目里会把平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈我主要讲一下实现思路,首先是移动,这个比较简单这里我用的是鼠标事件的pageX,pageY,因为这个获取的是鼠标距文档左上角的坐标,不受滚动条影响画一张图来演示...原创 2020-11-12 13:06:19 · 1717 阅读 · 5 评论 -
2020-08-19
在TypeScript + Vue项目中实现一个酷炫的Canvas运动背景,实现代码如下:<template> <div id="main"> <div id="bg-main"> <canvas id="bg"></canvas> </div> </div></template><script lang="ts">import V...原创 2020-08-19 09:37:47 · 254 阅读 · 0 评论 -
为网页实现mini-map效果
minimap效果的实现在项目中,需要制作出缩略图的效果。效果如下:minimap效果.gif在firefox可以使用 element属性实现该效果。(其它浏览器暂不支持)。这里使用iframe来达到更好的兼容性。效果分析minimap主要是对主体内容进行映射。主体html如下:<body> <div class="content"> <p> 文章内容 </p&..转载 2020-08-19 00:30:19 · 1527 阅读 · 0 评论 -
详细介绍scrollIntoView()方法属性
因为工作中用到了锚点设置,常用的总是出问题,后来扒拉出了这个属性,详细研究了下方便日后使用介绍scrollIntoView()的详细属性简介该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。PS:根据其他元素的布局,元素可能无法完全滚动到顶部或底部。TIPS:页面(容器)可滚动时才有用!语法element.scrollIntoView(); // 等同于element.scrollIntoView(true)element.scrollIntoV原创 2020-08-17 02:47:43 · 129840 阅读 · 5 评论 -
js原生之scrollTop、offsetHeight和offsetTop等属性用法详解
scrollTop、offsetHeight和offsetTop等属性用法详解:标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容性问题,导致掌握起来比较有难度,下面就介绍一下相关属性的用法。先来看一张比较经典的示意图:下面结合各上图介绍一下各个属性的作用:一.offsetTop属性:此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是p原创 2020-08-17 01:40:20 · 644 阅读 · 0 评论 -
vue3.0里的vue.config.js配置信息完整版,vue3.0 build发布,proxy,跨域访问设置等
vue3.0里的vue.config.js配置信息完整版:vue3.0 build发布,proxy,跨域访问设置等如果没有 vue.config.js 那么自己就在根目录建一个vue.config.js文件先让我们来看看精简版const path = require("path");const resolve = function(dir) { return path.join(__dirname, dir);};module.exports = { publicPath: p.原创 2020-08-08 01:38:17 · 4268 阅读 · 0 评论 -
vue3.0 子组件调用父组件、父组件调用子组件
子组件调用父组件父组件<my-childe ref="RefChilde" @update:FatherTalk="FatherTalk"></my-childe>子组件调用setup(props, context) {// .... function fnCallFather () { // 关键 context.emit('update:FatherTalk', pathChildName); }}..原创 2020-08-06 01:22:02 · 6632 阅读 · 2 评论 -
js 判断字符串中是否包含某个字符串
String对象的方法方法一: indexOf() (推荐)var str = "123";console.log(str.indexOf("3") != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现,则该方法返回 -1。方法二: search()var str = "123...原创 2020-03-18 13:25:36 · 1105 阅读 · 0 评论 -
vue 搭建框架到安装插件依赖,Element、axios、qs等
一、使用vue 单页面开发,首先要安装好本地环境步骤如下:1 下载nodejs 安装 (此时npm 和 node环境都已经装好)2 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org3 全局安装npm npm install -g vue-cli4 新建项目 vue init webpack &l...原创 2020-01-30 03:35:08 · 868 阅读 · 0 评论 -
h5手机底部输入框,一直贴底部
已解决,思路是当弹起键盘时候改成相对定位,收起键盘时候恢复绝对定位原创 2020-01-15 03:32:17 · 523 阅读 · 1 评论 -
VUE使用cookie
首先执行 :npm install vue-cookies --save在main.js全局引用import Vue from 'Vue'import VueCookies from 'vue-cookies'Vue.use(VueCookies)ApiSet a cookiethis.$cookies.set(keyName, value[, e...原创 2019-12-29 13:55:00 · 174 阅读 · 0 评论 -
html5 audio音频播放全解析
1.html5 audio的语法以及属性和方法使用语法<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲 您的浏览器不支持html5的audio标签</audio>属性src是歌曲的路径controls播放控制 如果给标签里写了 controls="cont...原创 2019-12-26 19:22:58 · 327 阅读 · 0 评论 -
vue篇之事件总线(EventBus)
许多现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。虽然这样做非常有用,但也涉及到组件之间的数据通讯。在Vue中同样有这样的概念存在。通过前面一段时间的学习,Vue组件数据通讯常常会有父子组件,兄弟组件之间的数据通讯。也就是说在Vue中组件通讯有一定的原则。父子组件通讯原则为了提高组...原创 2019-12-21 14:19:04 · 285 阅读 · 0 评论 -
微信小程序全局音频播放,实现分析
1. 需求分析育儿柚道小程序中有针对育儿教育提供的音频课程,主要包含读书、读文的音频内容。1.1 功能需求课程音频:包含课程音频的地方有三处 课程卡片,包含在 scrollview 中的试听内容; 音乐卡片 课程详情页的课程章节列表; 课程详情页 底部与导航 tab 结合的播放控件 Player bar 音频管理: 1)...原创 2019-11-22 11:11:03 · 2668 阅读 · 1 评论 -
Canvas提升性能十点注意事项
你还在抱怨自己写的canvas demo徘徊在10帧以下吗?你还在烦恼打开自己写的应用就听见CUP风扇转吗?你正在写一个javascript Canvas库吗?那么下面九点就是你必须知道的!一.预渲染错误代码: var canvas = document.getElementById("myCanvas"); var context = this.canvas.g...原创 2019-05-06 16:02:41 · 952 阅读 · 0 评论 -
Canvas、InkCanvas布局
一、Canvas在WPF中子元素的绝对定位的布局控件其子元素使用Width、Height定义元素的宽度和高度 使用Convas.Left(Convas.Right)、Convas.Top(Convas.Bottom)定义与Convas容器的相对位置 如果同时存在Convas.Left和Convas.Right、Convas.Top和Convas.Bottom,则Convas.Lef...原创 2019-05-06 16:08:25 · 855 阅读 · 0 评论 -
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的宽)网页正文全文宽:document.body.scrollWidth网页正文全文高:do...原创 2019-05-15 12:08:56 · 4331 阅读 · 0 评论 -
基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
前言初学vue时曾在网上搜索vue的实战项目源码,无奈大部分都是简单的demo,对于深究vue没有太大的帮助,剩下的一些大部分都是像音乐播放器之类的展示型项目,交互没有预期那么复杂。但我们实际在工作中,经常会遇到有购物车的项目,这类项目因为涉及到money,所以对逻辑严谨度要求高,页面之间交互复杂,又会伴随着登陆、注册、用户信息等等,常常会让我们很头疼。既然还没人用vue写过这样的项目,那不如...转载 2019-05-12 20:35:32 · 434 阅读 · 0 评论 -
求数组中的最大值的六种方法
var arr=[1,231,33,33,9999,9999,9339,1011]; 求数组中的最大值总结总结了6个方法,排序的就选了个冒泡排序为代表 1 Array.prototype.getMax1=function(){ 2 return this.sort(function(a,b){ 3 return a-b 4 })[this.le...原创 2019-06-03 19:14:35 · 38390 阅读 · 0 评论 -
VUE页面实现加载外部HTML方法
前后端分离,后端提供了接口。但有一部分数据,比较产品说明文件,是存在其他的服务器上的。所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件。需要搞点事情以达到想要的效果。本文主要和大家介绍VUE页面中加载外部HTML的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。不同以往的IFRAME标签,那种方式比较Low,另外有...转载 2019-06-04 17:47:24 · 18897 阅读 · 1 评论 -
vue plupload 的使用, 阿里云OSS PHP 安全上传
1. 首选npm安装plupload2. 阿里云OSS PHP 安全上传<template> <div class="imgUpload"> aaa <br> <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5!</div> <...转载 2019-07-29 20:50:21 · 921 阅读 · 0 评论 -
微信公众号通过图片选取接口上传到阿里oss
配置并调用公众号接口权限1、配置权限微信公众号接口,添加如下权限jsApiList: [ 'chooseImage', 'getLocalImgData', ]2、拍照或选取图片,拿到base64位图片地址wx.chooseImage({ count: 1, // 默认9 sizeType: ['o...转载 2019-08-01 19:40:41 · 575 阅读 · 0 评论 -
vue 图片加载完成事件
当页面里有ajax请求数据,然后渲染图片的时候,dom会有展开的一瞬,产品觉得无法接受,so...想到了image的onload事件,当图片加载完成之后再显示页面原生js<img onload="get(this)" src="..." style="display: none"/><script type="text/javascript">functi...原创 2019-08-14 14:38:51 · 5210 阅读 · 0 评论 -
如何实现Canvas图像的拖拽、点击等操作
希望能对Canvas绘制出来的图像进行点击、拖拽等操作,因为Canvas绘制出的图像能很好的美化。好像是想做炉石什么的游戏,我也没玩过。Canvas在我的理解中就好像在一张画布上绘制图像,它只能看到却“摸”不到,那要如何进行操作呢。我不知道网上是怎么做的,这里用自己的想法做了个DEMO分享给大家。思路:虽然Canvas不能拖拽,但div可以拖拽,那怎么把二者结合起来呢。初步想法是将一个...原创 2019-05-06 15:41:08 · 5762 阅读 · 1 评论