HTML5
关注
分享
扫一扫
文章平均质量分 50
HTML5
HqL丶1024
这个作者很懒，什么都没留下…
展开
-
H5瀑布流布局
<view class="content"> <view class="left"> <block wx:for="{{note}}" wx:for-item="item" wx:key="index"> <view class="item" wx:if="{{index%2==0}}"> ...原创 2019-12-12 09:57:22 · 442 阅读 · 1 评论 -
JS点击复制文字或图片，和监控鼠标右键和ctrl+c事件
js点击复制图片或文字原创 2019-11-25 16:06:23 · 2856 阅读 · 1 评论 -
alert弹出框ios系统去掉url
修改前修改后 window.alert = function(name){ var iframe = document.createElement("IFRAME"); iframe.style.display="none"; iframe.setAttribute("src", 'data:text/plain,'); d...原创 2019-12-10 14:30:27 · 191 阅读 · 0 评论 -
h5循环video播放下一个停止上一个
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="maximum-scale=1.0,minimum-sc原创 2020-11-27 16:58:49 · 742 阅读 · 0 评论 -
ios系统h5识别图片关闭系统弹窗
html,body { touch-callout: none; -webkit-touch-callout: none; -ms-touch-callout: none; -moz-touch-callout: none;}原创 2020-10-08 16:23:46 · 436 阅读 · 0 评论 -
html2canvas单页面打水印
http://html2canvas.hertzen.com/configuration/<!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-Compat原创 2020-09-02 17:18:31 · 876 阅读 · 0 评论 -
Vue的九宫格抽奖
<template> <div> <div> <p v-if="prize != ''" id="prize">恭喜您抽中{{prize}}！！！</p> <div class="fankuan"> <span v-for="(item,index) in list" :key="index" :class="[sele原创 2020-07-20 17:34:59 · 252 阅读 · 0 评论 -
微信H5分享好友参数配置
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script><script> //根据自己的域名配置 wx.config({ debug: false, appId: '{$signPackage["appId"]}', timestamp: '<?php echo $signPackage["timestamp"];?>原创 2020-06-05 10:46:11 · 1025 阅读 · 0 评论 -
Vue全屏弹幕滑动，可输入弹幕
<div class="barrage_area"> <!-- 弹幕 --> <div class="dmGroup" v-for="(item,index) in dmData" :key="index" v-bind:style="{top:item.top +'%',animationName:'dmAnimation',animationDuration:item.time + 's',animationTimingFunction:'.原创 2020-06-03 15:45:34 · 518 阅读 · 0 评论 -
Css实现内容溢出添加横向滚动条
<div class="banner"> <div class="one"> <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片"> <p>元气少女妆</p> </div>...原创 2020-05-25 11:35:43 · 2524 阅读 · 0 评论 -
名片上传视频
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="styleshe...原创 2020-02-27 09:45:15 · 439 阅读 · 0 评论 -
原生上传单张图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="vie...原创 2020-02-27 09:41:54 · 215 阅读 · 0 评论 -
h5实现录音功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>录音</title> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0...原创 2020-02-20 17:47:22 · 5512 阅读 · 4 评论 -
H5调试器vconsole
<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script> <script> // 初始化 var vConsole = new VConsole(); conso...原创 2019-11-21 11:48:17 · 205 阅读 · 0 评论 -
H5的JQ上传图片
<!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-...原创 2019-11-21 11:50:06 · 250 阅读 · 0 评论 -
文字从左到右滚动的标签
<marquee behavior="" direction="">123123132</marquee>原创 2020-01-18 11:07:27 · 371 阅读 · 0 评论 -
h5,小程序大转盘抽奖
<!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-...原创 2019-11-21 11:52:54 · 628 阅读 · 0 评论 -
Vue用vant上传图片，前端上传之前压缩处理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/van...原创 2020-01-02 11:51:56 · 896 阅读 · 1 评论 -
前端实现画布长按保存全图
<!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-U...原创 2019-12-25 16:08:23 · 608 阅读 · 5 评论 -
前端实现手机验证码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图形验证码</title> </head> <body> <div id="v_container" st...原创 2019-12-24 11:17:45 · 1957 阅读 · 0 评论 -
移动端旋转地球轮播图
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta charset="utf-8">...原创 2019-12-12 17:11:20 · 496 阅读 · 0 评论 -
html页面实现swiper轮播图
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/swiper/v4.3.0/swiper.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale...原创 2019-12-12 15:51:20 · 2613 阅读 · 0 评论 -
原生js下拉加载更多
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script> <script src="http://cdn.suoluomei.com/common/js2.0/axios/axios.min.js"></script> &...原创 2019-12-07 15:56:56 · 280 阅读 · 0 评论 -
小程序筛选框弹出动画效果
.fadein { animation: fadein .5s;}@keyframes fadein { 0% { transform: translate(100%, 0); } 100% { transform: none; }}原创 2019-12-07 15:49:28 · 970 阅读 · 0 评论 -
H5使用vant封装的底部tabbar导航
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首页</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js...原创 2019-12-07 13:45:08 · 1313 阅读 · 0 评论 -
html引入vant省市区选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2....原创 2019-12-04 11:25:50 · 2047 阅读 · 2 评论 -
微信点击图片预览
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js">...原创 2019-12-04 11:00:09 · 193 阅读 · 0 评论