- 博客(69)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 移动端h5留资页判断（自用）
前提这里就是简单的姓名电话地址和一个需要勾选的同意项tipShow是我自己写的调用一个提示弹窗的函数，可以换成自己的//电话号限制11位数$('.inputPhone').on('input change', function () { let phoneContent = $('.inputPhone').val(), phoneLength = phoneContent.length; if(phoneLength > 11) { phoneContent = phoneC
2021-02-22 11:40:37
712
转载 仿直播点赞效果
效果代码在html里，加一个div，这个div的位置就是飘出来的小元素开始显示的位置<div class="demo"></div>点击的时候，往class为demo的div里填入img标签，图片路径最后的名字是随机的（提前有几张图片，名字后面以数字排序），且让这些图片进行动画$(".Plive_like").click(function() { let x = 30,//飘出来元素的x范围 y = 900,//飘出来元素的y范围 num = Math
2021-02-22 11:25:20
205
转载 JavaScript 时间戳
目录1、JavaScript 的时间对象转换为时间戳1.1、时间对象转时间戳的 5 种写法1.2、获得当前时间的时间戳1.3、获得 10 位数的时间戳2、JavaScript 的时间戳转换为时间对象1、JavaScript 的时间对象转换为时间戳1.1、时间对象转时间戳的 5 种写法在 JavaScript 中，将时间对象转换为时间戳的方法有 5 种，示例如下：// 定义一个时间对象 dt，然后依次演示各种将 dt 转换为时间戳的写法var dt = new Date("2019-07-04 23
2021-02-22 10:35:02
322
原创 移动端仿直播间弹幕
效果代码<div class="Plive_comments"> <ul> <li>祝大家新年快乐吖！</li> <li>实鼠不易，牛年大吉！</li> <li>新的一年，新的开始，祝大家阖家欢乐，平平安安!</li> <li>跨过除夕，迈入新年!</li> <li>老铁666!</li> <li>牛气冲天！</li
2021-02-18 13:08:07
295
原创 h5列表上拉加载（内有监控滚动距离代码）
后台返回内容，以分页的方式。传值：分页页数page， 一页数量lengthgetRank(1, 4, 2) ; function getRank(page, length, node) { $.ajax({ type: "POST", url: "{$Think.config.WEB_URL}{$Think.config.SATYINFO_AJAX_URL}/getRank", data: {
2021-02-18 11:32:17
168
原创 自定义顺序/九宫格抽奖
效果代码抽奖逻辑是之前网上找的，有一些更改，时间有点久，忘了在哪找到的了<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover
2021-01-05 09:49:47
339
原创 swiper滑动时每页都有动画
效果原理给每一页带动画的元素一个通用的class属性，用来显示隐藏，比如第一页的就都是animated-1，第二页的都是animated-2在swiper初始化的时候调用添加动画的函数代码（demo）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>swiper翻页时页面上有动画</title> <link rel="styleshee
2021-01-04 13:57:55
2179
原创 css数字/文字滚动效果
效果：原理利用伪类，开始的时候给本来的内容盖住，然后执行动画。设置宽高，宽就是单个内容（比如数字中的一位数）的宽，让内容一行一个的排成列。动画就是让这些内容一个个的往上升，造成一种滚动效果最后露出原来的内容（原来的内容和伪类里的内容是同样的样式）代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数字滚动</title> <style
2020-12-31 14:39:01
2560
原创 移动端滚动条穿透(失去焦点)解决---用touch事件写滑动
做了个小demo，看看到底是因为什么造成不好使的第一个原因是meta标签至少需要有width=device-width和initial-scale=1的，比如：<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"/>或<meta name="viewport" content="width=device-width,initial-scale=1,mi
2020-12-07 15:54:08
384
原创 swiper滑动切换变换样式，实时显示当前索引
需求参加活动送的车模型有一个展示页，展示页需要可以滑动查看，并且查看的那个车在最中心且背景颜色、车的大小、文字颜色发生改变。下面的例子是做完后又在swiper官网的案例中改的，我一般都不会直接用给公司做的项目，另外写一个可以实现功能的小demo作为总结。一个是不会产生什么纠纷，另一个就是单拿出来后加深了印象，下次再用也方便效果...
2020-12-07 10:49:21
2050
原创 CSS动画隐藏后二次播放不好使
Q：如果绑定动画的元素跟着页面的显示隐藏进行显示隐藏，那么该元素将在每次页面显示时都会执行动画。如果该元素自己还有一个显示隐藏，有的时候隐藏后再显示就不会播放动画。A1：在隐藏的时候removeClass移除掉动画绑定，显示后再addClass加上如果A1不好使，就使用A2的办法吧↓A2：不单独隐藏该元素，直接加一个属性transform: scale(0);让放大倍数为0，造成隐藏的效果，然后执行完动画时为了防止元素变成css里设置的样式，再加一个animation-fill-mode: f
2020-12-01 17:34:53
560
原创 预加载（异步加载）图片 new Image
html里的img写法src空着，然后给img标签添加一个data-src的属性，在加载的时候再给src赋值例：<img src="" alt="" data-src="1.jpg">加载的jslet arr = []; // 放置图片路径的数组let len = 0; // 图片路径的数组的数量let count = 0; // 加载图片let $progress = $('.percent'); // loading页面进度百分比显示数字的标签// 给src赋值，改变a
2020-11-23 10:26:02
1090
原创 移动端浏览器AR扫描识别指定图片
官网：https://www.easyar.cn/本次学习的是在移动端浏览器识别指定图片目录第一步：下载文件第二步：找到要用的文件第三步：获取webAR Token第四步：修改代码1、修改token2、修改摄像头3、修改视频路径/识别成功后显示其他写在最后（注意）第一步：下载文件下载文件地址：https://github.com/gentwolf-shen/EasyAR-WebAR-Demo如果地址改变请根据以下路径寻找下载文件路径：easyAR官网–【文档】–【EasyAR WebAR】–
2020-11-16 15:05:35
2560
5
转载 移动端查看控制台
1.在node环境的项目中我们使用install下载npm install vconsole下载完成后，在项目中引用代码import vConsole from 'vconsole'然后项目中就会显示：2.在页面中直接使用<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script><script> // 初始化 var vConsole =
2020-11-16 09:29:24
284
转载 移动端判断手机横竖屏
CSS判断横屏还是竖屏1.写在同一个css文件中@media screen and (orientation: portrait) {/*竖屏 css*/}@media screen and (orientation: landscape) {/*横屏 css*/}注意：@media screen不能打印，@media print是只能打印，@media就都可以2.分开写在2个CSS中竖屏：<link rel="stylesheet" media="all and (orien
2020-11-10 11:45:04
303
原创 js列表拖拽更换顺序（有序号可删除）
插件官网：http://www.sortablejs.com/index.html思路：1、有一个函数用来往列表里填东西2、function showSelected() { console.log( hasSelected ); let html = ''; hasSelected.forEach((selected, index) => { html += `<li&g
2020-11-05 17:01:09
1378
原创 微信视频小窗口播放（阻止默认全屏）
属性介绍：controls 显示视频控件playsinline 取消全屏（小窗口播放）x-webkit-airplay 支持ios的AirPlay功能x5-video-player-type 安卓上的同层播放x5-video-orientation 播放器支持的方向，landscape 横屏, portraint竖屏（默认），需要x5-video-player-type开启H5模式x5-video-player-fullscreen 全屏设置style里面的object-fit:fill;
2020-11-05 14:17:16
891
原创 swiper的使用+指定跳转
下载首先官网链接：https://www.swiper.com.cn/在官网点击【获取swiper】–【下载swiper】–选择相应的文档进行下载使用将下载的swiper解压缩，然后会发现有很多文件在官网点击【在线演示】–【swiper基础演示】，选择自己想实现的效果，比如：选择了基础滑动(010)，则去解压缩的swiper文件夹里，找到demos文件夹，其中的010开头的html文件,就是这个效果，找到对应的css和js（一般在dist文件夹里），引入到自己的代码中，将010里面的
2020-11-03 16:32:04
2692
原创 h5滑动页面，定位的元素跟着窜
固定一下：html { overflow-x: none; overflow-y: hidden;}:root { overflow-y: hidden; overflow-x: hidden;}:root body { position: absolute; height: 100%;}body { width: 100vw; overflow: hidden;}
2020-11-03 15:48:18
357
原创 个人常用的css动画总结（持续更新）
目录定义动画中心360°旋转闪烁（透明度）快速闪烁“无”过渡呼吸灯（放大缩小）弧线出现页面上移100%上下反复移动定义动画中心.anim_center { transform-origin: 50% 50%;/*定义动画的旋转中心点*/ -ms-transform-origin: 50% 50%;/* IE 9 */ -webkit-transform-origin: 50% 50%;/* Safari 和 Chrome */ -moz-transform-origin: 50% 50%;/*
2020-11-03 15:04:27
1399
原创 hammer.js移动端拖拽缩放旋转元素
第一步下载hammer.js并引入下载地址可以是：http://hammerjs.github.io/第二步复制下面这些代码，放在你的js里面function drag(drag){ var reqAnimationFrame = (function () { return window[Hammer.prefixed(window, 'requestAnimationFrame')] || function (callback) { window.setTim
2020-11-03 14:09:08
1462
9
原创 js定时换图片（图片路径可变）
背景要做一个书翻开的效果，书是可以反复点击查看的一开始做的动图，但是动图反复显示隐藏并不会按照我想的那样，所以只能切图后用js换图片了前8张封面是不一样的，9–13张都是一样的，所以根据点击的是哪个按钮来决定显示那一套图片需要的标签点击出现书的按钮，这里只是演示作用所以写一个就行，是class为book_back_point_words的div需要更换图片路径的标签，开始隐藏，点击按钮后显示，是class为book_flipchart的imgjs代码var flipchart_arr=n
2020-10-23 16:17:48
475
原创 h5二维码长按不可识别
为了让用户不能获取我们的图片，好多地方都会用background然后就会发现二维码识别不了了，解决办法就是：二维码的标签要用img而不是div加background如果是因为图片太长识别不了二维码，就把二维码放大点...
2020-10-23 15:47:14
1254
原创 书翻页turn.js踩的坑
用的例子在这里：https://www.jq22.com/jquery-info2534如果英文好的也可以直接去官网看文档最简单的使用方法就是直接替换里面的图片，然后分享一下遇到的坑：会有底部导航栏翻页时会改变地址栏，唤出微信自带的跳转页面出现的底部白色导航栏与jq的一些动画 ：animate() 方法 冲突由翻书唤起的底部导航栏出现后，animate方法会与正常的有偏差，解决办法就是写css动画，然后用js增删class名单双页turn函数里面有一个display，s
2020-10-23 15:42:26
1972
1
原创 h5移动端点击翻牌
效果原理一个大小的两个面，在同一位置上正面的Y轴旋转为0度背面的Y轴旋转180度隐藏被旋转的 div 元素的背面（backface-visibility）点击的时候同时改变正面和背面的旋转角度，给一个动画的时间（transition）代码记得换图片路径哦~<!doctype html><html> <head> <meta charset="utf-8"> <title>css3 翻牌</title>
2020-10-23 14:44:45
506
原创 h5手指滑动划线touch事件
目录准备连线说明HTMLCSSJS首先我们来看下效果：准备我的这个连线是在750*1206的垂直居中的盒子里面写的连线说明①clientY的值 = top_1206+心外框的top:462+各个点的top ~ top_1206+心外框的top:462+各个点的top+各个点的高20 ,时是连线②clientX的值 = 心外框的left:110+各个点的left ~ 心外框的left:110+各个点的left+各个点的宽20 ,时是连线③每连上一条线，heart_line的数值就会
2020-10-23 11:38:43
1006
原创 h5的click不灵敏
页面上有touch事件的，再写click事件就会不灵敏，甚至需要点击第二下才会反应过来，建议就都写touch事件就好了其他情况导致click不灵敏的也可以写成touch事件试一下，还挺好用
2020-09-25 13:11:24
495
原创 touch事件完成h5拖拽元素到指定范围
效果在h5里，我们要拖拽一个元素（粉色块），使其中心点在指定范围（绿色块）内时返回√，如果没到指定范围就松手了，则位置返回到（0,0）层级关系(html)为了更好地去监测及获取数据，我们需要一个带定位的大盒子把他们包起来，一个停留的范围和一个带有中心点的拖拽元素<!-- 一个带有定位的大盒子，为了确定位置 --><div id="biggest_box"> <!-- 中心点停留的范围盒子 --> <div id="stay1"></d
2020-09-24 17:36:39
1225
1
原创 cocos creator学习（十）cocos自带扩展插件-压缩
目录前言找到并下载插件资源压缩构建后自动压缩PNG资源结论前言我们会使用自动图集、构建完再压缩图片替换等方法来减少项目的大小，那么针对这一点，cocos也有自带的插件来解决找到并下载插件插件是在cocos界面左上角导航栏的扩展里面，点击扩展–扩展商店就能看到扩展商店的界面，我们需要的是压缩的功能，所以搜索压缩，这里的资源压缩和构建后自动压缩PNG资源就是我们需要的，如图：点击他俩后面的免费按钮，把他们下载下来，再点击扩展就会看到下拉框多了【资源压缩】和【构建后自动压缩PNG资源】两个选项
2020-09-24 13:10:40
1028
原创 cocos creator学习（九）构建后更改图片和层级设置
目录前言更改图片更改位置前言上一节写的是构建发布，那么构建完还是需要更改一些小点，但是像我做的一些项目，构建完还需要和h5页面套在一起，一旦重新构建，后台也需要重新改路径之类的，就很麻烦，所以能改构建完的文件，就最好不重新构建更改图片如果说我们想找图片back，那么在cocos里发现图片back是层级back的背景图片，如图：接下来在构建后的文件里，找到res–import–里面的json文件，编辑器打开，ctrl+F搜索back，这个json文件里没有就换一个。搜到后如果是HbuilderX
2020-09-24 11:44:22
2121
原创 cocos creator学习（八）自动图集+构建发布h5
目录自动图集创建配置构建发布构建发布完的文件结构自动图集有时候做cocos，小碎图太多，如果挨个导出来就很占位置，请求数太多加载速度也会变慢，这时我们就可以用自动图集创建只需要在图片的文件夹里面新建一个自动图集就可以了，如图：配置自动图集可以自定义宽高，点击新建的自动图集，看属性检查器，改成你想要的数值后点击右上角的绿色应用按钮等构建发布后，自动图集就会把它同级和下级们可以放在一张指定大小图上的小图片合成一张张图，比如这个例子就把每张单独动作的小人变成一张图两个人：但也要注意，不是
2020-09-22 17:45:07
2049
原创 cocos creator学习（七）音乐
其他几篇：cocos creator学习（一）页面+动画cocos creator学习（二）js绑定动画cocos creator学习（三）预制节点cocos creator学习（四）全局变量+类之间的函数调用cocos creator学习（五）定时器cocos creator学习（六）组件Mask（超出部分隐藏）...
2020-09-22 13:37:09
1546
1
原创 cocos creator学习（六）组件Mask（超出部分隐藏）
目录组件使用组件分类RECT矩形ELLIPSE圆形/多边形IMAGE_STENCIL自定义（图片模板）js里改变mask大小组件使用mask的地方只需要两个组件：自带的Node和渲染组件里的Mask使用组件首先要有一个使用mask组件的图层，设置好宽高。他下面有张图片。层级结构如图：mask_exam的暂定为宽高都是300（没有宽高看不到效果），然后我们给他加一个mask组件（在渲染组件里，点击添加组件按钮就能找到了），mask_exam组件详情如图：这样我们就会发现500x300的图片，3
2020-09-21 16:50:54
3958
原创 海报长图二维码识别不到问题
之前写的h5截长图(html2canvas保存图片).的链接在这项目虽然上线，还没开始推然后发现一个问题，选中所有选项后图片太长，二维码相对来说太小，无论是扫一扫还是长按识别都识别不出来（有的图可以，有的图不行，同一套代码）。解决办法也简单粗暴，就是把二维码尺寸加大一般来说，长按识别需要的二维码大小比扫一扫需要的大，这个项目是750x2896的长图，二维码大小为88x88即可识别...
2020-09-11 10:35:19
3149
原创 前端规范-CSS
目录一、CSS代码规范1、编码规范2、代码风格①代码格式化②代码大小写③选择器的使用④代码缩进⑤分号⑥代码易读性⑦属性值引号⑧属性值书写顺序⑨CSS3浏览器私有前缀写法二、CSS注释规范1、单行注释2、模块注释3、文件信息注释（作者时间等）三、CSS SASS规范四、CSS重置样式1、移动端2、PC端五、CSS 媒体查询1、常用查询语句①横竖屏②宽高③像素比2、常用设备设置六、CSS 移动端常用私有属性（带前缀的）看W3Cschool中腾讯alloyteam团队前端代码规范的笔记一、CSS代码规范假
2020-09-10 17:55:33
203
原创 前端规范-HTML
目录一、HTML代码规范1、DOCTYPE 声明2、页面语言3、CHARSET4、标签闭合5、书写风格①HTML代码大小写②类型属性③元素属性④特殊字符⑤代码缩进⑥纯数字输入框⑦代码嵌套二、HTML 注释规范1、单行注释2、模块注释3、嵌套模块注释三、 HTML 文件模版（！直接拿过来用的）1、移动端2、PC端四、HTML WebApp Meta（移动端几个meta标签）1、通用设置2、apple-mobile-web-app-capable①看W3Cschool中腾讯alloyteam团队前端代码规范的
2020-09-10 11:37:43
148
原创 移动端音乐loop循环属性不好使
如果循环属性不好使，就在js里面让他结束时重新播放var music = xxx;//根据自己的情况设置music.onended = function() { music.load(); music.play();}
2020-09-10 10:42:34
183
获取焦点input旋转+金额正则.zip
2020-06-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人