摘要: 成品效果: 用到的技术:vue2、three.js、gsap.js template <template> <div id="box" class="container"></div> </template> script import * as THREE from "three"; import 阅读全文
posted @ 2024-07-25 17:43 懒懒de尐彪 阅读(64) 评论(0) 推荐(0) 编辑
摘要: 先看效果 需求: 一个【 4 * ?】的网格布局,奇数行 布局 从左往右,偶数行 布局 从右往左。 思路1: js将数组按4个每份进行分割,将偶数份进行反向,然后再将分割后的数据,重新组装。( 太麻烦,劝退。) 思路2: flex布局,然后用order属性来更改排列顺序。 补充: order 属性 阅读全文
posted @ 2024-07-23 12:13 懒懒de尐彪 阅读(5) 评论(0) 推荐(0) 编辑
摘要: 效果预览 功能简介 基于Vue.js(2.0)版本开发的,通过拖拽可视化的操作,生成H5的页面,类似易企秀的工具,前端展示页面运用了之前发布的 vue-animate-fullpage 插件进行动画渲染。 (vue-animate-fullpage 插件 请移步 文章:https://www.cnb 阅读全文
posted @ 2021-04-01 10:37 懒懒de尐彪 阅读(3516) 评论(0) 推荐(0) 编辑
摘要: 功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端、pc)项目。 安装 npm install vue-animate-fullpage --save 使用 main.js 在main.js需要引入该插件的css和js文件 import 'vue-animate-ful 阅读全文
posted @ 2020-07-13 11:12 懒懒de尐彪 阅读(2391) 评论(0) 推荐(0) 编辑
摘要: 以前公司其他几个前端做全景都是用软件生成,由于本人比较懒,不想去折腾那个软件,于是乎就有了下面的事...... 这个是基于three.js的全景插件 photo-sphere-viewer.js ———————————————————————————————————————— 1、能添加热点; 2、 阅读全文
posted @ 2017-11-06 14:57 懒懒de尐彪 阅读(5461) 评论(0) 推荐(0) 编辑
摘要: 相信很多人都遇到过 Retina屏的1px边框 的问题. 很多人都用 :before,:after 伪类 eg: .div:after { position: absolute; top: 0; left: 0; width: 200%; height: 200%; content: ''; bor 阅读全文
posted @ 2017-01-10 15:29 懒懒de尐彪 阅读(260) 评论(0) 推荐(0) 编辑
摘要: 直接上代码var APPCommon = { downAppURl : "http://**/",//下载APP地址 downWeixin: "http://**",//微信下载APP地址 iphoneSchema: 'openApp.jdMobile://',//IOS打开APP 跳转地址(这个跳 阅读全文
posted @ 2016-12-30 17:52 懒懒de尐彪 阅读(4893) 评论(0) 推荐(0) 编辑
摘要: 火车车次 /^[GCDZTSPKXLY1-9]\d{1,4}$/ 手机机身码(IMEI) /^\d{15,17}$/ 必须带端口号的网址(或ip) /^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/ 网址(支持端口和"?+参数"和"#+参数) /^( 阅读全文
posted @ 2020-03-18 15:30 懒懒de尐彪 阅读(562) 评论(0) 推荐(0) 编辑
摘要: 图一为拖拽前效果,图二为拖拽后效果 一、新建文件JcRange.vue,代码如下: 1、模板代码: 1 <template> 2 <div class="jc-component__range"> 3 <div class="jc-range" :class="rangeStatus?'succes 阅读全文
posted @ 2020-03-13 12:02 懒懒de尐彪 阅读(12510) 评论(0) 推荐(0) 编辑
摘要: 先来个最终效果 代码: template代码: <template> <div class="main"> <div class="title">评论</div> <div class="comment-form"> <div class="avatar-box"><el-avatar class= 阅读全文
posted @ 2020-03-04 11:57 懒懒de尐彪 阅读(1070) 评论(0) 推荐(0) 编辑
摘要: 当我们执行一个promise操作时,往往伴随的是要做各种状态的修改(如请求开始时显示loading,结束时隐藏 loading), 这个状态修改,如果没有finally函数,我们需要在then和catch中都写入这段代码,但是有了finally函数,我们只需要把这段代码写入函数中即可,因为final 阅读全文
posted @ 2019-08-13 10:47 懒懒de尐彪 阅读(6244) 评论(0) 推荐(0) 编辑
摘要: 现在我们来讲讲做自适应16:9的矩形要怎么做 新办法 使用 css属性( aspect-ratio ) 语法 element { aspect-ratio: auto; /* 默认值,不设置比例 */ aspect-ratio: 1/1; /* 正方形 */ aspect-ratio: 16/9; 阅读全文
posted @ 2019-04-28 18:21 懒懒de尐彪 阅读(3466) 评论(0) 推荐(0) 编辑
摘要: 依赖的第三方的插件 shake.js github地址: https://github.com/alexgibson/shake.js 提供一个摇一摇音效下载地址:http://aspx.sc.chinaz.com/query.aspx?keyword=%E6%91%87%E4%B8%80%E6%9 阅读全文
posted @ 2019-03-18 14:59 懒懒de尐彪 阅读(1764) 评论(0) 推荐(0) 编辑