html
html相关
wflynn
研究代码中...将随缘更新
展开
-
兴趣小项目-抽签
项目演示路径:https://miofly.gitee.io/resources/html/project/caishen/index.html部分代码<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport"原创 2021-02-27 14:20:05 · 181 阅读 · 1 评论 -
jq监听页面滚动结束
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>&l.原创 2021-01-06 13:30:57 · 1126 阅读 · 1 评论 -
crossOrigin=“anonymous“
<img >加上crossOrigin="anonymous"之后导致图片无法显示原创 2021-01-19 20:29:00 · 10791 阅读 · 0 评论 -
微信免接口分享实现思路及代码
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git免接口分享实现免接口分享的逻辑:监听用户离开页面var shareATimes = 0var shareTTimes = 0var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden...原创 2020-05-06 10:04:15 · 441 阅读 · 0 评论 -
原生H5实现观音抽签祈福效果
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git<!DOCTYPE html><html lang="en"><head style="overflow: hidden!important;"> <meta charset="UTF-8"> <meta name...原创 2020-05-07 10:49:46 · 2107 阅读 · 1 评论 -
二维码带logo可微信长按二维码识别
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git注意logo图片必须在自己的服务器下,不能跨域H5适配<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,max原创 2020-05-10 10:35:36 · 420 阅读 · 0 评论 -
canvas合成文字以及对文字进行换行处理
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"&.原创 2020-05-10 14:51:15 · 594 阅读 · 0 评论 -
vue及原生html实现列表无缝上下滚动,以及单行滚动
vue版本npm i vue-seamless-scroll -S<template> <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp "> <ul class="item"> <li v-for="item in listData"> <span class="title" v-text="it.原创 2020-05-12 13:19:06 · 1921 阅读 · 0 评论 -
原生H5 520兴趣项目演示
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git移动端适配<!DOCTYPE html><html lang="en" style="overflow: hidden!important;"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-s原创 2020-05-18 09:21:21 · 336 阅读 · 0 评论 -
模拟微信红包效果
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git<!DOCTYPE html><html><head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-wi.原创 2020-06-15 09:42:01 · 1201 阅读 · 0 评论 -
H5仿爱奇艺选集横向滚动
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid...原创 2020-04-26 14:38:56 · 1082 阅读 · 0 评论 -
H5电影电视前端界面完整代码分享
移动端适配方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scal...原创 2020-04-27 10:14:29 · 9996 阅读 · 0 评论 -
H5页面蒙版层
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.gitHTML<div v-show="modalStatus" class="mio-modal-mask"></div>CSS.mio-modal-mask { position: fixed; top: 0; ...原创 2020-04-29 19:51:11 · 1159 阅读 · 0 评论 -
H5页面移动端适配且要根据UI设计图给出的单位出图方法总结
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git由于新公司要求用原生html写一些项目,之前是写vue的,对于原生的操作也不是很熟了,所以就直接嵌入vue,js。但又要完全按照UI的设计图还原代码,所以必须要完全适配移动端。以下是方法总结。<!DOCTYPE html><html lang="en"...原创 2020-05-01 15:53:21 · 933 阅读 · 0 评论 -
H5端关于img居中的一个兼容性bug
代码已上传至githubgithub代码地址:https://github.com/Miofly/mio.git最近写原生H5项目,让图片居中时,有时候会有flex布局或者position定位,使其居中,偶尔还会使用margin或者padding进行微调,此写法在...原创 2020-05-01 16:33:41 · 297 阅读 · 0 评论 -
在HTML文件中用import引入js模块
<script type="module"> import {tu} from './js/toolUtils.js' console.log(tu)</script>注意js要写全名不能省略后面的.js原创 2020-03-24 09:17:20 · 16296 阅读 · 0 评论 -
原生HTML实现文字横向滚动以及触摸暂停
html<div id="scroll_div" class="fl" style="margin-top:2rem;line-height:1.8rem"> <div id="scroll_begin" style="color: red;font-size:1rem;"> <span style="margin-left:12rem;...原创 2020-03-27 18:50:19 · 395 阅读 · 0 评论 -
backgroundImage加载图片报403解决方法
加载图片时报403错误,可能是链接防盗链导致解决方法:在html中加入<meta name="referrer" content="no-referrer"/>原创 2019-10-23 14:24:54 · 1970 阅读 · 1 评论 -
html语义化标签详解
什么是语义化标签?语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用<p>一行文字</p><span>一行文字</span>如上代码,p标签与span标签都区别之一就是,p标签的含义是:段落。而span标签责没有独特的含义。根据内容的结构化(内容语义化),选择合适的标签(代...原创 2019-09-25 11:30:25 · 206 阅读 · 0 评论