10 2020 档案

pc端布局
摘要：链接：https://pan.baidu.com/s/1yX-f4Mzn7zpBjSEVxASvJQ 提取码：Eric 阅读全文
posted @ 2020-10-08 20:32 13522679763-任国强 阅读(124) 评论(0) 推荐(0)
开机动画
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 20:40 13522679763-任国强 阅读(219) 评论(0) 推荐(0)
天猫墙 效果
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 20:22 13522679763-任国强 阅读(96) 评论(0) 推荐(0)
立体相册
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 18:08 13522679763-任国强 阅读(167) 评论(0) 推荐(0)
旋转相册
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 17:52 13522679763-任国强 阅读(148) 评论(0) 推荐(0)
扇形导航
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 17:15 13522679763-任国强 阅读(146) 评论(0) 推荐(0)
马赛克效果
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ /*border: 1px solid #ddd;*/ } </style></head><body>< 阅读全文
posted @ 2020-10-06 16:19 13522679763-任国强 阅读(125) 评论(0) 推荐(0)
刮刮卡效果
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 14:08 13522679763-任国强 阅读(110) 评论(0) 推荐(0)
径向渐变
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 13:31 13522679763-任国强 阅读(129) 评论(0) 推荐(0)
颜色渐变
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 13:30 13522679763-任国强 阅读(169) 评论(0) 推荐(0)
文字
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 13:19 13522679763-任国强 阅读(97) 评论(0) 推荐(0)
画板绘制
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画板</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } #containe 阅读全文
posted @ 2020-10-06 11:53 13522679763-任国强 阅读(178) 评论(0) 推荐(0)
时钟绘制 封装
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 11:52 13522679763-任国强 阅读(142) 评论(0) 推荐(0)
擦除指定区域
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-06 11:51 13522679763-任国强 阅读(174) 评论(0) 推荐(0)
钢琴实现
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-05 23:21 13522679763-任国强 阅读(98) 评论(0) 推荐(0)
视频 相关
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-05 23:20 13522679763-任国强 阅读(80) 评论(0) 推荐(0)
音频相关
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-05 23:19 13522679763-任国强 阅读(93) 评论(0) 推荐(0)
移动端音悦台最终版
摘要：链接：https://pan.baidu.com/s/1wATCjZRHF0dNcCoL5kw-pw 提取码：Eric 阅读全文
posted @ 2020-10-05 21:28 13522679763-任国强 阅读(107) 评论(0) 推荐(0)
移动端图片懒加载最终版
摘要：链接：https://pan.baidu.com/s/1T9fDy037-1gr2vuEi4kHSw 提取码：Eric 阅读全文
posted @ 2020-10-05 21:25 13522679763-任国强 阅读(349) 评论(0) 推荐(0)
移动端缩放和 旋转
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, user-scalable=no, 阅读全文
posted @ 2020-10-05 21:12 13522679763-任国强 阅读(187) 评论(0) 推荐(0)
transformCSS.js
摘要：(function (w) { /** * @param node 元素对象 * @param prop 样式名称 * @param value 样式的值 不带单位 * * @example setting transformCSS(box, 'translateX', 300); * @examp 阅读全文
posted @ 2020-10-05 21:11 13522679763-任国强 阅读(145) 评论(0) 推荐(0)
touchview.js
摘要：/** * * 函数名 * Touchview * * 使用示例 new Touchview('#box'); new Touchview('img'); new Touchview('div'); 依赖 gesture.js */function Touchview(selector) { //获 阅读全文
posted @ 2020-10-05 21:05 13522679763-任国强 阅读(225) 评论(0) 推荐(0)
gesture.js
摘要：/** * Created by Eric on 2020/10/5. */(function(w){ function gesture(el,callback){ // 增加自定义属性 el.hasGestureStartTriggered = false; // el 绑定 手势事件 // 模拟 阅读全文
posted @ 2020-10-05 21:03 13522679763-任国强 阅读(226) 评论(0) 推荐(0)
tweenAnimation 实现动画效果
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, user-scalable=no, 阅读全文
posted @ 2020-10-04 12:25 13522679763-任国强 阅读(423) 评论(0) 推荐(0)
导航 滑动 效果 代码
摘要：<!--导航start--> <div id="nav"> <ul class="wrap"> <li class="active"> <a href="javascript:">首页</a> </li> <li > <a href="javascript:">MV</a> </li> <li > 阅读全文
posted @ 2020-10-03 20:10 13522679763-任国强 阅读(174) 评论(0) 推荐(0)
水平撑开元素 方法
摘要：父元素定位position: absolute;white-space: nowrap;font-size: 0; 子元素 转换行内块元素 display:inline-block; 阅读全文
posted @ 2020-10-03 16:18 13522679763-任国强 阅读(101) 评论(0) 推荐(0)
swiper 封装
摘要：html 部分 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scal 阅读全文
posted @ 2020-10-03 12:19 13522679763-任国强 阅读(307) 评论(0) 推荐(0)
地图拖拽效果实现
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-02 09:55 13522679763-任国强 阅读(377) 评论(0) 推荐(0)
正则替换 px 转换 rem
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> var str = ` <!DOCTYPE html><html lang="en"><hea 阅读全文
posted @ 2020-10-01 23:36 13522679763-任国强 阅读(427) 评论(0) 推荐(0)
1px 边框解决方案 2
摘要：<!doctype html><html lang="en" ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, 阅读全文
posted @ 2020-10-01 23:07 13522679763-任国强 阅读(133) 评论(0) 推荐(0)
1px 边框解决方案1
摘要：<!doctype html><html lang="en" ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, 阅读全文
posted @ 2020-10-01 23:05 13522679763-任国强 阅读(161) 评论(0) 推荐(0)
rem与less适配
摘要：<!doctype html><html lang="en" ><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, 阅读全文
posted @ 2020-10-01 22:20 13522679763-任国强 阅读(192) 评论(0) 推荐(0)
rem 比例值适配
摘要：<!doctype html><html lang="en" style="font-size: 37.5px;"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalab 阅读全文
posted @ 2020-10-01 21:59 13522679763-任国强 阅读(338) 评论(0) 推荐(0)
rem 固定值适配
摘要：<!doctype html><html lang="en" style="font-size: 100px;"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalabl 阅读全文
posted @ 2020-10-01 21:57 13522679763-任国强 阅读(215) 评论(0) 推荐(0)
pc端 事件
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-01 17:09 13522679763-任国强 阅读(177) 评论(0) 推荐(0)
拖拽效果实现方法
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-01 17:07 13522679763-任国强 阅读(164) 评论(0) 推荐(0)
pc端 阻止网页内容被复制 和禁止弹出右键菜单
摘要：window.onkeydown = function(e){ //获取当前按键的信息 ctrl + c console.log(e.keyCode); // 67 c console.log(e); if(e.keyCode == 67 && e.ctrlKey){ // alert('你按下了 阅读全文
posted @ 2020-10-01 15:14 13522679763-任国强 阅读(226) 评论(0) 推荐(0)
阻止浏览器默认行为 滑动留白
摘要：滑动留白 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1 阅读全文
posted @ 2020-10-01 15:03 13522679763-任国强 阅读(262) 评论(0) 推荐(0)
移动端事件
摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding:0; } ul{ list-style: none; } #box{ widt 阅读全文
posted @ 2020-10-01 14:30 13522679763-任国强 阅读(182) 评论(0) 推荐(0)
阻止默认行为
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-01 14:26 13522679763-任国强 阅读(102) 评论(0) 推荐(0)
点击穿透 解决方法 增加一个包裹元素
摘要：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m 阅读全文
posted @ 2020-10-01 14:24 13522679763-任国强 阅读(215) 评论(0) 推荐(0)