今天我们要做一个调整图片的demo，要求能够通过拖动图片的角标来实现旋转和等比放缩的操作，核心设计思路就是通过鼠标移动的位置和图片原位置的坐标进行数学计算，重新设置图片的宽高、坐标和旋转角度等属性。一.布局案例中图片和角标都放置在了对象组父容器中。父容器设置了X、Y原点为50%，即父容器的坐标原点在其中心位置，再设置图片组件的X、Y原点也为50%，并令其XY坐标为(0,0)，则可使图片中心点与父容
分类：
其他好文 时间：
2020-04-21 18:25:57
阅读次数：
140
行内元素： 与其他行内元素并排； 不能设置宽、高。默认的宽度，就是文字的宽度。 块级元素： 霸占一行，不能与其他任何元素并列； 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100% 块级元素可以转换为行内元素： 一旦，给一个块级元素（比如div）设置： display: inline; 那 ...
分类：
Web程序 时间：
2020-04-21 14:49:23
阅读次数：
82
用object-fit和object-position来处理图片 MDN：object-fit MDN：object-position 半深入理解CSS3 object-position/object-fit属性 用百分比设置图片宽高 方式一：width：100% height：100% div { ...
分类：
其他好文 时间：
2020-04-20 13:32:16
阅读次数：
88
mounted() { let that = this; // <!--把window.onresize事件挂在到mounted函数上--> window.onresize = () => { return (() => { window.fullHeight = document.document ...
分类：
其他好文 时间：
2020-04-18 18:27:24
阅读次数：
54
官方文档中 mode="widthFix" 宽度不变，高度自动变化，保持原图宽高比不变，即设置图片宽度而高度自适应。 但是在实际开发中发现图片在初始加载时瞬间竖向拉伸变形闪烁然后恢复正常宽高，也许是高度没设置的原因。 所以把图片设置 height: auto 即可解决问题 ...
分类：
微信 时间：
2020-04-17 12:36:36
阅读次数：
186
ps：没有在swiper中添加scroll-view是为了可以使用页面的下拉刷新，最终方法直接跳到方案四。（含代码片段） 初始方案 swiper高度固定，swiper-item默认绝对定位且宽高100%，每个swiper-item中内容由固定高度的child组成，然后根据child数量动态计算swi ...
分类：
微信 时间：
2020-04-16 22:38:18
阅读次数：
106
需求： 给到一段视频，首屏要求铺满整个屏幕，并且适配不同分辨率。 解决思路： 获取当前视口宽高，调整视频宽高比进行填充，调整视频窗口位置以水平居中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=" ...
分类：
其他好文 时间：
2020-04-16 00:48:36
阅读次数：
74
一、怪异盒模型： 1）触发怪异盒模型： box-sizing:border-box; 2）怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。 3）box-sizing: 属性值： box-sizing:content-box; 常规盒模型 box-sizing:bo ...
分类：
其他好文 时间：
2020-04-14 21:01:31
阅读次数：
62
这种型号的手机，整个页面<html></html>的字体偏大一些，导致页面css中 1rem > html中总体字体大小 所以： 如果页面中的宽高用rem这个单位，则会出现dom元素宽度偏大，页面错乱的结果！ 解决方案： 宽度用百分比（%）； 高度目前无能为力。 ...
分类：
微信 时间：
2020-04-14 18:50:52
阅读次数：
367
单独定义echarts中每个图例的样式,自定义图例的点击方法 //用不同样式的图例用数组写对应图例的样式 legend:[{ top: "15%", right: "24%", textStyle: { color: "#3BAEFE", fontSize: 14, fontFamily: "微软雅 ...
分类：
其他好文 时间：
2020-04-14 18:24:20
阅读次数：
179
