vue图片时间轴滑动_vue时间轴风格式的图片展示

项目将近完结，在修正bug的同时，也对自己项目中代码进行回顾分析。

看回半年前写的东西，真是很多都感到陌生，所以趁着下午的空档时间总结下之前遇到的难点。

好的，先上图，目标效果

先分析

上下两层，上层样品轮播，下层层进式时间轴 + 小型样本展示，要注意的是上下两层的样品是有逻辑的，即点击下层小样品，上层样品会有响应

上下两个步进器，上层左右是会影响下层的，而下层时间轴横移不会影响上层

时间刻度，此处偷懒了下，我直接用了样品的时间，而不是等宽时间线

首先是上层的html代码

为左右步进器以及中间图片添加事件

然后是下层的html代码

为将要移动的div添加ref，样式为 position: relative; left: 0，同时为小样品的上下分流设好样式，ps：时间轴圆形节点要放在for循环里

方法代码

左移

handlePre() {

let left = parseInt(this.$refs.mytimeline.style.left);

if(left < (-220)){

this.$refs.mytimeline.style.left = left + 250 + 'px';

}

不为最左边的时候，可以左移，步进长度应为小样品长度再大一点

右移

handleNext() {

let left = parseInt(this.$refs.mytimeline.style.left);

if(left <= 20 && (left >= -650)){

this.$refs.mytimeline.style.left = left - 250 + 'px';

}

不为最右边时，可以右移，这里限制条件为总长度减去一个小样品的长度

成品展示

vue图片时间轴滑动_vue时间轴风格式的图片展示相关推荐

vue 时间刻度_vue时间轴风格式的图片展示
项目将近完结,在修正bug的同时,也对自己项目中代码进行回顾分析. 看回半年前写的东西,真是很多都感到陌生,所以趁着下午的空档时间总结下之前遇到的难点. 好的,先上图,目标效果先分析 1. 上下两层 ...
把多张 PNG 图片拼在一起合成一张 RAW 格式的图片（附代码）
把多张 PNG 图片拼在一起合成一张 RAW 格式的图片设定好输入和输出的路径即可代码如下 import numpy import os # import argparse from PIL imp ...
php把jpg图片处理webp,将jpg压缩成webp格式的图片
/** * Created by PhpStorm. * User: liuft * Date: 2016/1/22 * Time: 11:51 */ date_default_timezone_se ...
vue图片时间轴滑动_Vue实现可移动水平时间轴
本文实例为大家分享了Vue实现可移动水平时间轴的具体代码,供大家参考,具体内容如下里程碑时间轴具体实现效果图编辑里程碑效果图编辑里程碑里程碑状态: 开始超期关闭 {{'阶段名称:'+it ...
vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
vue列表左右箭头滑动_Vue实现点击箭头上下移动效果
{{item.name}} //i ↓ ↑ Vue.config.productionTip = false//不去提示 new Vue({ el: "#app", data() ...
xwpftemplate的时间设置_java poi设置生成的word的图片为上下型环绕以及其位置
问题描述在使用poi-tl word模版工具时,发现生成的文档中,图片格式为嵌入型,有的图片甚至被表格遮挡一半.而自己想要的图片格式为上下型环绕,并且图片需要居中. 问题分析 poi-tl渲染图片, ...
手机看html网页内容重叠,html5手机端叠加图片触屏滑动查看特效
特效描述:html5手机端叠加图片触屏滑动查看特效.html5手机叠加图片手指滑动查看代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 rutrum tellus a tempus ...
arcmap给tif添加地理坐标_如何将JPG格式的图片转化为带地理坐标的TIFF格式
最近有个项目需要用到开源软件GeoServer,数据源是一张高分辨率的2.5维图片,格式是jpg的,由于GeoServer不支持jpg格式的发布,因此考虑到要进行格式转换,将其转换成tiff格式. 1 ...
java图片框_用java语言，如何实现为图片添加边框素材，就是把图片和边框素材（图片）结合？...
展开全部用FrontPage2002来做吧,你点点下面的连接:62616964757a686964616fe4b893e5b19e31333264636265 具体是: Web页面可用预定义模板来创 ...

vue图片时间轴滑动_vue时间轴风格式的图片展示

vue图片时间轴滑动_vue时间轴风格式的图片展示相关推荐

最新文章

热门文章