h5
judy_1118
这个作者很懒,什么都没留下…
展开
-
移动端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 · 747 阅读 · 0 评论 -
仿直播点赞效果
效果代码在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 · 215 阅读 · 0 评论 -
移动端仿直播间弹幕
效果代码<div class="Plive_comments"> <ul> <li>祝大家新年快乐吖!</li> <li>实鼠不易,牛年大吉!</li> <li>新的一年,新的开始,祝大家阖家欢乐,平平安安!</li> <li>跨过除夕,迈入新年!</li> <li>老铁666!</li> <li>牛气冲天!</li原创 2021-02-18 13:08:07 · 303 阅读 · 0 评论 -
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 · 176 阅读 · 0 评论 -
自定义顺序/九宫格抽奖
效果代码抽奖逻辑是之前网上找的,有一些更改,时间有点久,忘了在哪找到的了<!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 · 348 阅读 · 0 评论 -
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 · 2274 阅读 · 0 评论 -
css设置body高100%在企业微信上下边有留白
只需要把100%改成100vh就好了原创 2021-01-04 09:39:43 · 466 阅读 · 3 评论 -
css数字/文字滚动效果
效果:原理利用伪类,开始的时候给本来的内容盖住,然后执行动画。设置宽高,宽就是单个内容(比如数字中的一位数)的宽,让内容一行一个的排成列。动画就是让这些内容一个个的往上升,造成一种滚动效果最后露出原来的内容(原来的内容和伪类里的内容是同样的样式)代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>数字滚动</title> <style原创 2020-12-31 14:39:01 · 2598 阅读 · 0 评论 -
移动端滚动条穿透(失去焦点)解决---用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 · 400 阅读 · 0 评论 -
CSS动画隐藏后二次播放不好使
Q:如果绑定动画的元素跟着页面的显示隐藏进行显示隐藏,那么该元素将在每次页面显示时都会执行动画。如果该元素自己还有一个显示隐藏,有的时候隐藏后再显示就不会播放动画。A1:在隐藏的时候removeClass移除掉动画绑定,显示后再addClass加上如果A1不好使,就使用A2的办法吧↓A2:不单独隐藏该元素,直接加一个属性transform: scale(0);让放大倍数为0,造成隐藏的效果,然后执行完动画时为了防止元素变成css里设置的样式,再加一个animation-fill-mode: f原创 2020-12-01 17:34:53 · 580 阅读 · 0 评论 -
预加载(异步加载)图片 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 · 1117 阅读 · 0 评论 -
移动端浏览器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 · 2682 阅读 · 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 · 296 阅读 · 0 评论 -
微信视频小窗口播放(阻止默认全屏)
属性介绍: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 · 945 阅读 · 0 评论 -
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 · 2800 阅读 · 0 评论 -
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 · 375 阅读 · 0 评论 -
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 · 1532 阅读 · 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 · 485 阅读 · 0 评论 -
h5二维码长按不可识别
为了让用户不能获取我们的图片,好多地方都会用background然后就会发现二维码识别不了了,解决办法就是:二维码的标签要用img而不是div加background如果是因为图片太长识别不了二维码,就把二维码放大点...原创 2020-10-23 15:47:14 · 1305 阅读 · 0 评论 -
书翻页turn.js踩的坑
用的例子在这里:https://www.jq22.com/jquery-info2534如果英文好的也可以直接去官网看文档最简单的使用方法就是直接替换里面的图片,然后分享一下遇到的坑:会有底部导航栏翻页时会改变地址栏,唤出微信自带的跳转页面出现的底部白色导航栏与jq的一些动画 :animate() 方法 冲突由翻书唤起的底部导航栏出现后,animate方法会与正常的有偏差,解决办法就是写css动画,然后用js增删class名单双页turn函数里面有一个display,s原创 2020-10-23 15:42:26 · 2127 阅读 · 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 · 522 阅读 · 0 评论 -
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 · 1040 阅读 · 0 评论 -
h5的click不灵敏
页面上有touch事件的,再写click事件就会不灵敏,甚至需要点击第二下才会反应过来,建议就都写touch事件就好了其他情况导致click不灵敏的也可以写成touch事件试一下,还挺好用原创 2020-09-25 13:11:24 · 518 阅读 · 0 评论 -
touch事件完成h5拖拽元素到指定范围
效果在h5里,我们要拖拽一个元素(粉色块),使其中心点在指定范围(绿色块)内时返回√,如果没到指定范围就松手了,则位置返回到(0,0)层级关系(html)为了更好地去监测及获取数据,我们需要一个带定位的大盒子把他们包起来,一个停留的范围和一个带有中心点的拖拽元素<!-- 一个带有定位的大盒子,为了确定位置 --><div id="biggest_box"> <!-- 中心点停留的范围盒子 --> <div id="stay1"></d原创 2020-09-24 17:36:39 · 1245 阅读 · 1 评论 -
海报长图二维码识别不到问题
之前写的h5截长图(html2canvas保存图片).的链接在这项目虽然上线,还没开始推然后发现一个问题,选中所有选项后图片太长,二维码相对来说太小,无论是扫一扫还是长按识别都识别不出来(有的图可以,有的图不行,同一套代码)。解决办法也简单粗暴,就是把二维码尺寸加大一般来说,长按识别需要的二维码大小比扫一扫需要的大,这个项目是750x2896的长图,二维码大小为88x88即可识别...原创 2020-09-11 10:35:19 · 3230 阅读 · 0 评论 -
移动端音乐loop循环属性不好使
如果循环属性不好使,就在js里面让他结束时重新播放var music = xxx;//根据自己的情况设置music.onended = function() { music.load(); music.play();}原创 2020-09-10 10:42:34 · 195 阅读 · 0 评论 -
移动端微信自动播放音乐(含css动画暂停开始)
目录前言CSS旋转动画自动播放微信里加载就自动播放预加载后自动播放点击播放暂停加上或移除类css动画暂停开始前言做的H5大多需要音乐,其中音乐的样式都差不多,所以总结一份音乐大多都有三点:旋转动画、自动播放、点击暂停开始CSS旋转动画我们要有一个基本的HTML代码以及对应的样式,例:<div class="audio_icon audio_animation" data-mp3="0" style="z-index: 9;"> <audio id="main_audio" s原创 2020-09-10 10:10:27 · 690 阅读 · 0 评论 -
input、textarea输入框限制字数+显示字数
就是总会需要有限制字数的时候,那么除了使用maxlength属性外,还可以怎么做呢html<div class="textarea_box"> <!-- <textarea name="send_info" cols="10" rows="4" placeholder="输入想要对她说的话......" class="peoplesendcontent"></textarea> --> <input name="send_info" placeh原创 2020-09-03 09:55:30 · 1732 阅读 · 0 评论 -
js移动端视频全屏适配无黑边
1、Html<div style="display: none;" class="page page_video" view-mode="v" view-rotation="auto" view-scale="noborder" view-width="750" view-height="1344" view-align="" view-scale="exactfit"> <div style="position: absolute;"> <video id="vi原创 2020-09-02 17:46:38 · 1236 阅读 · 0 评论 -
用img把图片放在页面上,图片之间出现空隙/白边问题
如标题,直接用img在页面上放图片,在已经写了*{ margin:0; padding:0;}之后还会发现两张图片之间有缝隙(白边),如下图:这种情况只需要给那个img设一个img{ display:block;}就可以解决,效果如下图:可以看到白边已经没有了...原创 2020-07-29 11:53:00 · 1906 阅读 · 0 评论 -
定时器越走越快问题
之前做的项目是扔垃圾,扔进去后如果分类错误,出现弹窗,计时器暂停。弹窗点击消失后计时器继续。然后就出现了计时器越走越快的问题解决办法也简单,就是在每一次继续定时器之前,都写一遍清除定时器(设置的是set啥就clear啥)clearInterval(xxx);...原创 2020-07-29 09:44:27 · 1433 阅读 · 0 评论 -
js自动滚动+滑动+点击功能
写在前面的唠叨:最近遇到一个需求是进来要自动滚动,滚动的同时可以上下滑动,还可以点击里面的元素,要求滑动和点击后都还可以继续滚动,滚动到最下面就停试过几个插件,大部分都是用的定位的top控制。这就导致了在自动滚动一段距离后(假设当前的top是20px),往上滑动时最上也就是20的位置,20之前的滑不到(当然你也可以去试着改变top值,刚想到的。。。)结果就是自己写了一份↓准备如图所示,有6个长600px,高400px,margin为20px的矩形,加起来的高度超过了屏幕可视高度,可以滚动了原创 2020-07-28 13:39:45 · 2019 阅读 · 0 评论 -
计算雪碧图(精灵图)的横纵位移
前言本案例针对于那种图中各元素大小基本相同,间隔距离也基本一样的雪碧图通过一下代码获取位移前提假设雪碧图每行5个,一共30个每一小块宽度96px,高度98px,间隔30px代码for(var i = 1 ; i <= 30; i ++ ){ var col_num = parseInt((i-1)/5);//判断是在第几行,每行5个,0开始 //console.log("col_num : "+col_num); var y = -( col_num*98 + col_num*3原创 2020-07-21 11:25:09 · 395 阅读 · 1 评论 -
h5点击元素出现阴影块
只需要在出现阴影块的那个元素的css里加上以下属性即可:.class{-webkit-tap-highlight-color:transparent;}转自:https://blog.csdn.net/xionggegehao/article/details/80852801这个链接转载 2020-07-21 11:14:31 · 707 阅读 · 0 评论 -
h5截长图(html2canvas保存图片)
前言h5项目总是会有很多截图变成图片保存海报的功能,这次遇到了一个需求是保存长图(图片长度根据用户选择项目数量变化)注意需要被保存的页面是长图,需要有属性overflow:scroll;且每个元素都需要定宽高!!!否则会窜代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,原创 2020-07-21 11:08:42 · 3491 阅读 · 0 评论 -
获取焦点input旋转+金额正则小数点后两位
前言最近做了一个h5,开始几页都是横屏的(视频、长图等),有一个捐款页面,自定义金额时弹窗里input获取焦点,手机自带键盘出现和输入框时垂直的,所以需要给它转过来。自定义的金额要求最低0.01,就是只能输入数字和小数点,小数点最多只保留后两位效果图代码html:<div class="mengban mengban_pop"> <div class="mengban_back"></div>//后面的半透明蒙版 <div class="rota原创 2020-06-05 11:30:05 · 172 阅读 · 0 评论 -
h5视频自动横过来自适应页面且点击播放
h5视频自动横过来自适应页面且点击播放前言代码HTMLCSS功能快捷键如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入前言本代码适用于1920*1080的视频,如果是其他尺寸的视频,需要更改代码里的几个数字,重新计算视频宽高代码HTML <!-- 跳过视频按原创 2020-06-02 11:51:29 · 3873 阅读 · 0 评论