update
This commit is contained in:
parent
8e61e00422
commit
7895ac1106
@ -31,4 +31,21 @@
|
|||||||
}
|
}
|
||||||
},10)
|
},10)
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
* 轮播图按钮案例
|
||||||
|
[linkToHtml](./buttonslider.html)
|
||||||
|
|
||||||
|
* css定位一般不超过5级
|
||||||
|
|
||||||
|
* html 特殊字符
|
||||||
|
* `<` > 大于号
|
||||||
|
* `>` < 小于号
|
||||||
|
* `&` & 与号
|
||||||
|
* `"` " 引号
|
||||||
|
* `®` 已注册
|
||||||
|
* `©` 版权
|
||||||
|
* `™` 商标
|
||||||
|
* ` ` 半方大的空白
|
||||||
|
* ` ` 全方大的的空白
|
||||||
|
* ` ` 不断行的空
|
||||||
|
|||||||
156
20191019/buttonSlider.html
Normal file
156
20191019/buttonSlider.html
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
<!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">
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
width: 590px;
|
||||||
|
height: 470px;
|
||||||
|
padding: 10px;
|
||||||
|
border : 1px solid #ccc;
|
||||||
|
margin: 50px auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.slider .inner {
|
||||||
|
width: 590px;
|
||||||
|
height: 470px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
}
|
||||||
|
.slider .inner ul {
|
||||||
|
width: 500%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.slider .inner ul li {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider .btns {
|
||||||
|
/* position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
right: 10px;
|
||||||
|
top: 50%; */
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider .btns span {
|
||||||
|
/* display: inline-block; */
|
||||||
|
width:45px;
|
||||||
|
height: 45px;
|
||||||
|
line-height: 45px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #000000;
|
||||||
|
background: rgba(255, 255, 255, 0.8);
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
left: 10px;
|
||||||
|
top: 50%;
|
||||||
|
margin-top:-22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider .btns span:last-child {
|
||||||
|
right: 10px;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="slider" id="slider">
|
||||||
|
<div class="inner">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/82345/16/13178/77786/5da93550E6449f58e/f5b14f641913efba.jpg.webp" alt="" srcset=""></a></li>
|
||||||
|
<li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/73861/8/7311/133024/5d562902E29c956c1/da390c8c345c48e0.jpg.webp" alt="" srcset=""></a></li>
|
||||||
|
<li><a href="#"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/79136/10/13206/197242/5da92d47Ee54665df/39d85a2990ba58d1.jpg.webp" alt="" srcset=""></a></li>
|
||||||
|
<li><a href="#"><img src="https://imgcps.jd.com/ling/22692212401/6JGh6JCE6YWS6ZKc5oOg/6YOo5YiGMuS7tjXmipg/p-5bd8253082acdd181d02fa02/153dad62.jpg" alt="" srcset=""></a></li>
|
||||||
|
<li><a href="#"><img src="https://img14.360buyimg.com/pop/s590x470_jfs/t1/46901/24/7545/62345/5d52317fEebadcf80/8fb168cddd5ef2b9.jpg.webp" alt="" srcset=""></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="btns">
|
||||||
|
<span><</span>
|
||||||
|
<span>></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
function my$(id) {
|
||||||
|
return document.getElementById(id)
|
||||||
|
}
|
||||||
|
//获取元素slider
|
||||||
|
var slider = my$('slider');
|
||||||
|
//获取inner
|
||||||
|
var inner = slider.children[0]
|
||||||
|
//获取ul
|
||||||
|
var ul = inner.children[0]
|
||||||
|
//获取btn
|
||||||
|
var btns = slider.children[1]
|
||||||
|
//获取图片的宽度
|
||||||
|
var imgW = inner.offsetWidth
|
||||||
|
//获取左边按钮
|
||||||
|
var prev = btns.children[0]
|
||||||
|
//获取右边按钮
|
||||||
|
var next = btns.children[1]
|
||||||
|
//添加右侧按钮的点击事件
|
||||||
|
//添加计数器
|
||||||
|
var index = 0
|
||||||
|
next.onclick = function() {
|
||||||
|
if(index < 4) index++
|
||||||
|
var target = -imgW * index
|
||||||
|
//ul移动 改变ul的left值
|
||||||
|
//向左移动一张图片的距离 点击一次
|
||||||
|
//向左移动2张图片的距离 点击2次
|
||||||
|
//向左移动3张图片的距离 点击3次
|
||||||
|
//向左移动4张图片的距离 点击4次
|
||||||
|
//向左移动5张图片的距离 点击5次
|
||||||
|
//...
|
||||||
|
aniamte(ul, target)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
prev.onclick = function() {
|
||||||
|
if(index > 0) {
|
||||||
|
index --
|
||||||
|
}
|
||||||
|
var target = -imgW * index
|
||||||
|
aniamte(ul, target)
|
||||||
|
}
|
||||||
|
|
||||||
|
//给slider添加鼠标移入移出效果， 控制按钮的显示和隐藏
|
||||||
|
slider.onmouseover = function() {
|
||||||
|
btns.style.display = 'block';
|
||||||
|
}
|
||||||
|
slider.onmouseout = function() {
|
||||||
|
btns.style.display = 'none';
|
||||||
|
}
|
||||||
|
function aniamte(ele,target) {
|
||||||
|
clearInterval(ele.timer)
|
||||||
|
ele.timer = setInterval(function(){
|
||||||
|
var current = ele.offsetLeft
|
||||||
|
|
||||||
|
var step = 10;
|
||||||
|
step = target - current >= 0 ? step : - step
|
||||||
|
current += step
|
||||||
|
|
||||||
|
if(Math.abs(target - current) > step) {
|
||||||
|
ele.style.left = current + 'px';
|
||||||
|
} else {
|
||||||
|
clearInterval(ele.temer)
|
||||||
|
ele.style.left = target + 'px'
|
||||||
|
ele.temer = null;
|
||||||
|
}
|
||||||
|
}, 10)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5
20191020/20191020.md
Normal file
5
20191020/20191020.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# 20191020
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
*
|
||||||
154
Miscellaneous/img2string.html
Normal file
154
Miscellaneous/img2string.html
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<script>
|
||||||
|
let img = new Image();
|
||||||
|
let logo;
|
||||||
|
|
||||||
|
//加载canvas
|
||||||
|
window.onload = () => {
|
||||||
|
let canvas = document.getElementById("canvas");
|
||||||
|
canvasInfo = canvas.getContext("2d");
|
||||||
|
document.getElementById('btn').onclick = start
|
||||||
|
document.getElementById('upButton').onchange = getImg;
|
||||||
|
};
|
||||||
|
|
||||||
|
//执行
|
||||||
|
let start = () => {
|
||||||
|
console.log('start')
|
||||||
|
//清空字符画
|
||||||
|
logo = "";
|
||||||
|
|
||||||
|
//先记录比率,如果宽，那么先缩放宽,再用比率算出长,反之同理
|
||||||
|
let rate = img.width / img.height;
|
||||||
|
if (rate > 1) {
|
||||||
|
img.width = 400;
|
||||||
|
img.height = 400 / rate;
|
||||||
|
} else {
|
||||||
|
img.height = 400;
|
||||||
|
img.width = 400 / rate;
|
||||||
|
}
|
||||||
|
|
||||||
|
//将图片绘制在canvas上
|
||||||
|
canvasInfo.drawImage(img, 0, 0, img.width, img.height);
|
||||||
|
|
||||||
|
//从canvas上获取像素信息
|
||||||
|
var imgData = canvasInfo.getImageData(0, 0, img.width, img.height);
|
||||||
|
|
||||||
|
//调整字符大小，追求更高精度就在这里调小
|
||||||
|
let size = 5 - parseInt(document.getElementById("thisSize").value);
|
||||||
|
//调整是否为彩色
|
||||||
|
let color = document.getElementById("thisColor").value !== "false";
|
||||||
|
|
||||||
|
//生成主体，逐个读取字符
|
||||||
|
for (let i = 0; i < img.width; i = i + size) {
|
||||||
|
for (let j = 0; j < img.height; j = j + size) {
|
||||||
|
let curPoint = (i * img.width + j) * 4; //×4是因为，1为r，2为g，3为b，4为a，四个是一组rgba值
|
||||||
|
let gray =
|
||||||
|
imgData.data[curPoint] * 0.299 +
|
||||||
|
imgData.data[curPoint + 1] * 0.587 +
|
||||||
|
imgData.data[curPoint + 2] * 0.114; //计算灰度值
|
||||||
|
thisColor = `rgb(${imgData.data[curPoint]},${
|
||||||
|
imgData.data[curPoint + 1]
|
||||||
|
},${imgData.data[curPoint + 2]})`; //保存像素点rgb值
|
||||||
|
color ? toText(gray, thisColor) : toText(gray, false); //有颜色就转化rgb值，没颜色就不转
|
||||||
|
}
|
||||||
|
logo = logo + "</br>";
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("rightDiv").innerHTML = logo; //将字符串填充到html
|
||||||
|
};
|
||||||
|
|
||||||
|
//读取图片
|
||||||
|
let getImg = file => {
|
||||||
|
var reader = new FileReader();
|
||||||
|
reader.readAsDataURL(document.getElementById("upButton").files[0]);
|
||||||
|
reader.onload = function() {
|
||||||
|
img.src = reader.result;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
//根据灰度转化字符，添加颜色
|
||||||
|
function toText(g, thisColor) {
|
||||||
|
if (thisColor) {
|
||||||
|
logo = logo + "<span style='color:" + thisColor + "'>";
|
||||||
|
}
|
||||||
|
if (g <= 17) {
|
||||||
|
logo = logo + "M";
|
||||||
|
} else if (g > 17 && g <= 34) {
|
||||||
|
logo = logo + "N";
|
||||||
|
} else if (g > 34 && g <= 51) {
|
||||||
|
logo = logo + "H";
|
||||||
|
} else if (g > 51 && g <= 68) {
|
||||||
|
logo = logo + "Q";
|
||||||
|
} else if (g > 68 && g <= 85) {
|
||||||
|
logo = logo + "&";
|
||||||
|
} else if (g > 85 && g <= 102) {
|
||||||
|
logo = logo + "O";
|
||||||
|
} else if (g > 102 && g <= 119) {
|
||||||
|
logo = logo + "C";
|
||||||
|
} else if (g > 119 && g <= 136) {
|
||||||
|
logo = logo + "?";
|
||||||
|
} else if (g > 136 && g <= 153) {
|
||||||
|
logo = logo + "7";
|
||||||
|
} else if (g > 153 && g <= 170) {
|
||||||
|
logo = logo + ">";
|
||||||
|
} else if (g > 170 && g <= 187) {
|
||||||
|
logo = logo + "!";
|
||||||
|
} else if (g > 187 && g <= 204) {
|
||||||
|
logo = logo + ":";
|
||||||
|
} else if (g > 204 && g <= 221) {
|
||||||
|
logo = logo + "-";
|
||||||
|
} else if (g > 221 && g <= 238) {
|
||||||
|
logo = logo + ";";
|
||||||
|
} else {
|
||||||
|
logo = logo + ".";
|
||||||
|
}
|
||||||
|
if (thisColor) {
|
||||||
|
logo = logo + "<span>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<title>图片转字符</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- 图片上传 -->
|
||||||
|
<form id="uf">
|
||||||
|
<input type="file" name="file" id="upButton" οnchange="getImg()" />
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- 选择字符画大小 -->
|
||||||
|
请输入精度等级：
|
||||||
|
<select id="thisSize">
|
||||||
|
<option value="1">1</option>
|
||||||
|
<option value="2">2</option>
|
||||||
|
<option value="3">3</option>
|
||||||
|
<option value="4">4</option>
|
||||||
|
<option value="5">5</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- 选择颜色 -->
|
||||||
|
是否使用颜色：
|
||||||
|
<select id="thisColor">
|
||||||
|
<option value="true">是</option>
|
||||||
|
<option value="false">否</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- 执行按钮 -->
|
||||||
|
<button id="btn">开始执行</button>
|
||||||
|
|
||||||
|
<!-- 辅助canvas，设为隐藏 -->
|
||||||
|
<div id="leftDiv">
|
||||||
|
<canvas id="canvas" width="400" height="400" style="display:none">Canvas</canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 生成位置 -->
|
||||||
|
<div id="rightDiv" style="font-family:'Consolas';line-height: 0.5em;"></div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
49
README.md
49
README.md
@ -1,5 +1,18 @@
|
|||||||
# 吉软大前端笔记本
|
# 吉软大前端笔记本
|
||||||
|
|
||||||
|
## Miscellaneous
|
||||||
|
|
||||||
|
|
||||||
|
* 图片转字符串
|
||||||
|
[linkToHtml](./Miscellaneous/img2string.html)
|
||||||
|
|
||||||
|
|
||||||
|
* git常用命令总结
|
||||||
|
[linkToMd](./Miscellaneous/git.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
## 20190925
|
## 20190925
|
||||||
|
|
||||||
|
|
||||||
@ -58,3 +71,39 @@
|
|||||||
* [上课视频链接](https://pan.baidu.com/s/1l4mVVmklb1Hiz2uWQxBdxA)
|
* [上课视频链接](https://pan.baidu.com/s/1l4mVVmklb1Hiz2uWQxBdxA)
|
||||||
提取码：nc9w
|
提取码：nc9w
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 20191016
|
||||||
|
|
||||||
|
|
||||||
|
[linkToMd](./20191016/20191016.md)
|
||||||
|
|
||||||
|
* offset示例
|
||||||
|
|
||||||
|
* [上课视频链接](https://pan.baidu.com/s/1-iDQ03LSqXQ1Yu04IX0rgg)
|
||||||
|
提取码：ixle
|
||||||
|
---
|
||||||
|
|
||||||
|
## 20191018
|
||||||
|
|
||||||
|
|
||||||
|
[linkToHtml](./20191018/offset.html)
|
||||||
|
|
||||||
|
* offset示例
|
||||||
|
|
||||||
|
* [上课视频链接](https://pan.baidu.com/s/1hGA9ohkQ7J9b1GO6AjSMeQ&shfl=sharepset)
|
||||||
|
提取码：smie
|
||||||
|
---
|
||||||
|
|
||||||
|
## 20191019
|
||||||
|
|
||||||
|
|
||||||
|
[linkToMd](./20191018/20191019.md)
|
||||||
|
|
||||||
|
* 轮播图案例
|
||||||
|
* 轮播图按钮案例
|
||||||
|
* css定位一般不超过5级
|
||||||
|
* html 特殊字符
|
||||||
|
|
||||||
|
* [上课视频链接](https://pan.baidu.com/s/18LetxRVExyVBQAq20Xo3_g&shfl=sharepset)
|
||||||
|
提取码：pne2
|
||||||
|
---
|
||||||
Loading…
x
Reference in New Issue
Block a user