H5前端开发
H5最新前沿技术
沉默是金~
这个作者很懒,什么都没留下…
展开
-
JS 解决鼠标悬浮显示弹窗 迅速离开时弹窗显示到其他位置的延迟问题
拿到要判断的div元素 获取offsetLeft(鼠标距离div左侧位置)offsetTop (鼠标距离div上侧位置)解决该问题的思路就是,判断当前鼠标的位置是否在某个div上,如果在这个div上则取消显示悬浮弹窗消息。offsetLeft+offsetWidth 表示整个div的宽度。offsetTop+offsetHeight 表示整个div的高度。判断是否在div里面进行相应的将弹窗元素隐藏即可。鼠标移动时判断是否在div里面进行移动了。client Y表示鼠标Y的位置。首先监听鼠标的移动事件。原创 2023-08-11 17:03:24 · 1275 阅读 · 0 评论 -
JS dom元素和鼠标位置之间的一系列属性快速参考
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。网页可见区域宽: document.body.offsetWidth (包括边线的宽)原创 2023-08-11 15:47:12 · 694 阅读 · 0 评论 -
ES6 数组操作大全
一、改变原数组的方法删除数组元素:1、pop 删除数组的最后一个元素,返回删除的数组2、shift 删除数组的第一个元素,返回删除的数组3、splice(1,3,'a1','b2') 第一个位置开始,删除到元素的3个位置,添加a1,b2,返回删除的数组扩展splice和slice的区别:splice 改变原数组 splice是返回更新后的数组长度 slice是返回新数组slice 不改变原数组 slice(1,3)是从第1个位置开始,删除到3个元素后返回剩下的数组...原创 2021-11-08 18:19:00 · 6533 阅读 · 2 评论 -
Jquery对象转成原生DOM对象
1、Jquery转成原生对象let j1 = $('#id');let dom1 = j1[0];let dom2 = j1.get(1);2、原生对象转Jquery对象let dom1 = document.querySelector('#dom1') let $p1 = $(dom1)原创 2021-11-08 15:44:09 · 610 阅读 · 0 评论 -
css3 元素从中间分别向两边展开动画特效
利用transition 和 transform 动画属性.requirelist-iteam .border-top { position: absolute; top: -1px; left: 50%; width: 2px; height: 2px; background: transparent; border-radius: 2px; transform: scaleX(0); opacity: 0; transition: all .4s;..原创 2021-09-16 11:55:53 · 4178 阅读 · 1 评论 -
JS 切换页面添加监听
需求分析:倒计时时间实时监听 刷新window.addEventListener('visibilitychange',()=>{ if(!document.hidden){ this.gettenderstatus(); // 获取最新标示位此处执行调用你想监听实时刷新的方法 }})原创 2021-04-17 14:37:29 · 875 阅读 · 0 评论 -
JS 递归调用实例及返回undefined问题解决
1、业务需求要求返回数组 如果有parent 则继续往下遍历数组查找id 直到没有父节点2、代码实现递归调用forOrgDatas函数查找是否有parent 有则push到数组中3、返回值undefined问题,是因为最外层没有return 这个值 在函数最外层return下即可...原创 2020-12-24 17:52:12 · 1672 阅读 · 2 评论 -
H5 生成海报优化,海报底部下边生成二维码和文字描述
上次展示的是在海报上生成二维码和文字描述,现在升级一下在海报底部生成二维码和文字描述,与海报独立出来,效果如下源码分享:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, ...原创 2020-07-16 14:08:32 · 677 阅读 · 0 评论 -
H5 实现天气效果(心知天气插件)
先上效果图鼠标移上去的效果展示核心代码如下:(function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[..原创 2020-07-13 14:20:42 · 25122 阅读 · 0 评论 -
H5+svg 实现左边图片右边文字描述的梯形微名片
先上效果图源码分享<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css实现div边框斜角</title> <style type="text/css">.labels { display: inline-block; display: inline-flex; color: #fff; /*line-heig...原创 2020-07-10 14:57:53 · 1025 阅读 · 0 评论 -
H5 输入框或者文本域虚拟键盘弹起时 自动弹起
if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function() { if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') { window.se...原创 2020-06-22 17:02:53 · 1427 阅读 · 0 评论 -
微信转发海报动态生成二维码和文字标题,并合成一张海报图
效果展示源码分享<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>拍照上传&...原创 2020-06-19 10:38:37 · 1248 阅读 · 0 评论 -
css3 实现图片闪过一道光效果 亲测可用
html部分: <div class="icon_div"> <img style="display: block; height: 180px; width: 100%;" src="../../images/wydk/sfrz_bg.png"> <img style="display: block;height: 27px;width: 199px;p...原创 2020-05-20 10:51:01 · 2334 阅读 · 0 评论 -
vue 用户登录 记住用户名和密码
第一种思路就是本地存储localStorage存储localStorage.setItem("rem_userName", c_name);localStorage.setItem("rem_userPwd", c_pwd);获取this.loginForm.username = localStorage.getItem("rem_userName");this.loginF...原创 2020-04-29 13:48:17 · 3337 阅读 · 1 评论 -
H5+css实现展开更多内容
<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" /><title>点击查看全...原创 2020-04-24 16:57:38 · 5086 阅读 · 0 评论 -
Uncaught TypeError: Cannot read property 'setAttribute' of null
这种情况是js中的空指针异常问题XXX.setAttribute 报控制针 XXX是空的 前面没有拿到值查看XXX是否有值原创 2020-04-23 09:40:56 · 10359 阅读 · 0 评论 -
IOS和小米手机拍照时旋转90度问题 针对一张图片 或者多张图片上传IOS卡顿问题解决方案分享
img.onload = function () { var data; if (navigator.userAgent.match(/iphone/i)) { //获取图片方向 if(Orientation != "" &&...原创 2020-04-17 10:11:29 · 914 阅读 · 0 评论 -
HTML5总结
初步认识HTML5一般广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分,而不只是第一印象仅仅HTML部分而已,在CSS 3和JavaScript层面也有许多的创新,让整个网页从布局到处理都更加给力,新囊括的技术让之前实现相当困难且安全性危机重重的功能变为了现实,HTML5有哪些优势?THML5在布局上更得体,记得以前的主流table过渡到主流div;而转载 2016-03-12 15:42:47 · 656 阅读 · 0 评论 -
Html+css+javascript总结
网站开发的主要原则是:– 用标签元素HTML描述网页的内容结构;– 用CSS描述网页的排版布局;– 用JavaScript描述网页的事件处理,即鼠标或键盘在网页元素上的动作后的程序HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,是最基础的网页语言 。 Html是通过标签来定义的语言,代码都是由标签所组成 。Html代转载 2016-03-22 10:43:40 · 3577 阅读 · 0 评论