前端
时间在飞飞
联系方式:18501080314 有2年音乐艺术教育行业工作经验,3年电商行业工作经验。热爱思考和实践,有4年多前端开发经历,其中3年旅游服务电商行业开发经验。性格开朗,热爱技术,有责任心,工作能力强。
展开
-
css区别margin、padding、width、height值为百分比
margin、padding设置为百分比,是相对父元素宽来说的width设置百分比是相对父元素宽来说的height设置百分比是相对父元素高来说的使用padding占位的好处就是布局不会因为图片没有加载而改变。...原创 2021-11-05 11:04:20 · 421 阅读 · 1 评论 -
YouTube iframe嵌入式播放器及播放器参数 自动播放,循环播放,播放列表,不显示 YouTube 徽标
YouTube 嵌入式播放器及播放器参数概览本文档介绍如何在应用中嵌入 YouTube 播放器,并定义了 YouTube 嵌入式播放器可以使用的参数。通过将参数附加到 iframe 网址末尾,您可以自定义应用中的播放体验。例如,您可以使用autoplay参数自动播放多个视频,也可以使用loop参数重复播放一个视频。您还可以使用enablejsapi参数,允许通过iframe Player API控制播放器。目前,本页面定义了任意 YouTube 嵌入式播放器支持的全...原创 2021-11-04 14:29:36 · 7066 阅读 · 1 评论 -
前端应用的几种渲染方式的研究
Web网页渲染的几种模式 · Issue #50 · closertb/closertb.github.io · GitHubPrismic CMS: The Headless Website Builder for Jamstack - PrismicPrismic is the ideal headless CMS for React, Vue, and Jamstack. Manage your content in a component-based website builder experien原创 2021-10-11 10:20:31 · 146 阅读 · 0 评论 -
前端动画 GSAP.js
最近想学习。前端动画 GSAP.js原创 2021-08-13 14:17:22 · 677 阅读 · 2 评论 -
echarts图表宽度设置100%,结果echarts宽度只有100px,解决图表自适应宽度问题
问题我的echarts在tab选项卡中显示,为了自适应,用来渲染图表的div的宽度为100%,但是charts渲染出来以后默认设置为了100px。原因图表的父容器 li 是隐藏的,我默认设置 display:none,图表在执行js初始化的时候找不到这个元素,所以自动将“100%”转成了“100”,最后计算出来的图表就成了100px解决方法有两种(一种是切换tab以后,li显示以后再初始化图表,二是给li中渲染图表的div提前设置好width 宽度)第一种可以把图表的实例...原创 2021-08-11 11:44:27 · 8461 阅读 · 0 评论 -
h5跳转到 google play 应用商店 的APP详情页面
前段时间做了在h5页面中打开或者下载app的功能参考了咸鱼的提示短信短连接页面,西瓜视频页面,等等。最后根据公司的市场和场景,计划从h5直接跳转到google应用市场的app详情页面。https://developer.android.com/distribute/marketing-tools/linking-to-google-play#android-apphttps://stackoverflow.com/questions/11753000/how-to-open-the-google-pl原创 2020-10-26 11:45:12 · 4567 阅读 · 0 评论 -
h5页面 3d效果 淘宝造物节
js的视觉差引擎库parallax.jscss 3d 引擎原创 2020-10-21 14:38:58 · 311 阅读 · 0 评论 -
有趣的css
https://www.jasondavies.com/wordcloud/http://tridiv.com/https://720yun.com/css hintHoudiniworkletsCSS workflowsTyped OM Object使用css 变量更少的bug,例如数字值总是以数字的形式返回而不是字符串。el.style.opacity+=0.1;el.style.opacity==='0.301'//dragons!算数运算...原创 2020-10-21 10:41:00 · 157 阅读 · 0 评论 -
移动端 简单 图片上传 图片大小限制 获取base64
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl...原创 2020-10-16 10:39:20 · 633 阅读 · 0 评论 -
h5页面判断 js判断 是否安装APP,如果安装就拉起APP 打开app ,否则就下载
h5页面判断是否安装APP,如果安装就拉起APP,否则就下载 if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new Date(); window.location = "...";//schema链接或者universal link window.setTimeout(func原创 2020-10-15 17:39:57 · 4325 阅读 · 0 评论 -
animate.css 前端源码解析 css3重点 css重点 前端实践中的学习
这些是animation.css中比较典型的一些动画bounce在bounce.css 中 主要用到了animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 这个css属性。animation-timing-function 指定动画一个周期之内运动的速度。所以这个是用来控制值可以有 匀速 加速 什么linear , ease, ease in 什么的。还可以使用一个函数cubic-bezier(n,n,n,...原创 2020-08-13 17:30:15 · 249 阅读 · 0 评论 -
H5新增标签 css图标库 web 前端 字体 问题
1.<header>用在页面的头部或者版块的头部</header>2.<nav><a href="#">链接</a><a href="#">链接</a></nav><nav>//用在导航,具体用法仁者见仁智者见智,有几种原创 2018-04-09 20:14:47 · 943 阅读 · 0 评论 -
圣杯布局和双飞翼布局 为什么面试的时候总要问到?怎么掌握css布局的精髓?
圣杯和双飞翼到底做了什么圣杯布局和双飞翼布局解决的问题是相同的,就是两边顶宽,中间自适应的三栏布局,中间栏要在放在文档流前面以优先渲染。简述圣杯布局:为了让中间div内容不被遮挡,将中间div设置了左右padding-left和padding-right后,将左右两个div用相对布局position: relative并分别配合right和left属性,以便左右两栏div移动后不遮挡中间div。双飞翼布局:通过淘宝将圣杯布局的改进,改为了双飞翼布局,双飞翼布局集合了所有的css2核心的属性特原创 2020-08-03 13:10:34 · 206 阅读 · 0 评论 -
css3 3d关键点 淘宝购物节的3D效果 如何实现的 h5
规定被嵌套元素如何在 3D 空间中显示transform-style: preserve-3d;视距:(通过视距可以实现近大远小的视觉效果)这个属性也是规定 3D 元素的透视效果-webkit-perspective: 100px;视角-webkit-perspective-origin-x: center;淘宝购物节的3D效果公式:...原创 2020-08-03 10:25:12 · 223 阅读 · 0 评论 -
h5 html5 h5 页面 动画 效果 项目展示
720云VR全景平台www.720yun.comwww.h5doo.com原创 2020-08-03 09:45:55 · 750 阅读 · 0 评论 -
js中的事件委托 javascript事件代理详解
这篇博客的内容来自网络。个人为了更方便的学习放到这里。起因:1、这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的;2、其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考;概述:那什么叫事件委托呢?它还有一个名字叫事件代理,JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件原创 2017-09-03 20:16:51 · 334 阅读 · 0 评论 -
onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别
嗯嗯原创 2017-09-03 17:24:02 · 1682 阅读 · 0 评论 -
shopify theme 跨境电商开发 liquid
最近有有一个叫做shopify的跨境电商的东西需要开发一些主题和模板,使用了一个liquid的模板语言,这个模板语言就是他们公司开发的,买了一个模板进行二次开发,这个代码嵌套让人看着头疼。json格式多写一个逗号也会报错,要注意一下。已经研究好了,怎么增加模块,修改页面,接下来要跟后端开发对接数据了,还要继续研究。马上就要过年了,好忙。...原创 2019-12-26 11:23:28 · 2866 阅读 · 11 评论 -
js判断Android、iOS或浏览器
第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端。代码如下:<script type="text/javascript"> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; ...转载 2018-05-29 13:03:59 · 252 阅读 · 0 评论 -
在开发中总结的js
1.前段时间修改一个city picker 插件的时候需要操作数据,在遍历二维数据的时候要用到for in 循环 在for in 循环中需要用到obj.hasOwnProperty(prop)用来判断某个对象是否含有指定的属性的 返回Boolean.所有继承了Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性;和 i...原创 2018-08-04 11:52:12 · 185 阅读 · 0 评论 -
ios 设备的移动端页面 光标错位
1.这个问题遇到好多次了,经常是上下错位,原因是在input 获取焦点以后,键盘弹出后,页面网上移动,但是光标停留在了以前的位置,如果页面不复杂,可以在body上添加 position:fixed; 但是这样会引起页面失去滚动能力。目前只能是判断手势,使用js来改变滚动条的位置。为了页面稳定,尽量使用absolute,或者是float,还有flex。2.在ios 上还有一个问题是,在做一个使用了...原创 2018-08-04 12:30:02 · 5112 阅读 · 0 评论 -
一些大厂的开源平台
百度:http://fex.baidu.com/ http://efe.baidu.com/ 饿了么:https://fe.ele.me 腾讯:http://www.alloyteam.com/ 美团:https://tech.meituan.com/ 滴滴:https://didi.github.io/ 蚂蚁金服:https://ant.design/ 阿里巴巴:http://...原创 2018-08-05 18:41:57 · 1166 阅读 · 0 评论 -
今天遇到一个累加绑定事件的bug 触发一次事件,事件执行多次
今天遇到了一个bug 使用jquery的on()方法为元素绑定了点击事件,点击时会发送请求,让后台取消订单,并记录取消的原因。 首先我们知道jquery的on()方法是封装了原生JavaScript的addEventListener()方法,这个方法的特点是可以执行多个事件函数,我就在想是不是触发一次事件,事件执行了多个执行函数。后来看了代码的逻辑发现是,每次点击取消订单,就会绑定一次...原创 2018-08-10 15:07:37 · 855 阅读 · 0 评论 -
web,pc端及手机端支持的字体
页面地址为:《点击此处》以上为引致张鑫旭的网站内容,仅为了以后方便查看,如有不当,请指出谅解!手机端字体选择:手机端支持的字体比较少,对于要求的字体一般如何定义?相信大家会想到 @font-face 定义为微软雅黑字体并存放到 WEB 服务器上,在需要使用时被自动下载@font-face {font-family: 'MicrosoftYaHei';s...转载 2018-09-19 09:36:25 · 1785 阅读 · 0 评论 -
原生 fetch 请求 fetch和ajax的区别
//比如请求一个json文件async function(){ //请求 let res = fetch(“data1.json”); //解析内容 let data = await res.json() //获取到json 文件 console.log(data)}//比如请求一个图片async function(){ //请求 let res = fetch(“dat...原创 2019-05-19 13:06:46 · 1233 阅读 · 0 评论 -
jsonp 解决浏览器跨域 方法和原因 为什么不安全
jsonp 原理是什么?就是使用了script的src属性在请求文件的时候吧数据携带过来,就是一个函数的定义和函数的调用,然后设置一个回调函数在请求到以后执行这个函数 获取内容这个callback参数就是告诉服务器定义的函数的函数名,然后获取到以后执行这个函数show(){ //获取内容 //执行代码}let url="http://XXXXXX?cb=show";let scri...原创 2019-05-19 13:25:38 · 371 阅读 · 0 评论 -
CSS渐变之CSS3 gradient在Firefox3.6下的效果兼容使用
这是最近在公司做一个产品的官网遇到的。这是谷歌显示效果。这是兼容之后火狐的效果。贴上代码: <ul class="wifi-device"> <li><img id="wifi-watch" src="img/mkl_watch.png" alt=""></li> <li&am原创 2018-04-19 13:40:57 · 388 阅读 · 0 评论