Vue实现类似Spring官网图片滑动效果方法


Posted in Javascript onMarch 01, 2019

先来看一下Spring官网首页的一个图片滑动显示效果

Vue实现类似Spring官网图片滑动效果方法

可以看到, 随着鼠标的滑动,绿色图片和灰色图片可以无缝的在鼠标俩两边切换显示。

显示这样的效果其实很简单,利用固定定位保证两张图片在同一位置下, 我们可以将灰色图片当做背景层图片,然后根据获取到的实时X轴坐标, 动态改变绿色图片的宽度, 隐藏超出X轴坐标的部分, 就可以达到这样的效果, 简单来说, 这效果就是动态改变上层图片的宽度。

实现效果:

Vue实现类似Spring官网图片滑动效果方法

我这边选择了两张同样大小的KDA卡莎的图片, 将金色图作为背景图,暗黑图作为左侧图, 用了Vue的mousemove来获取X轴坐标值, 并通过监听坐标轴变化来实时改变左侧图片的宽度。

鼠标部分, 简化了Spring官网上鼠标位置出轴承的显示, 采用了cursor: ew-resize样式, 使得鼠标看起来可以左右滑动。

代码粘贴

<template>
  <div class="scroll">
    <div class="container" @mousemove="mousemove">
      <div class="base"></div>
      <div class="left" ref="left">
        <img src="../../static/image/kda-karsa.jpg" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      posX: 0
    }
  },
  methods: {
    mousemove(e) {
      // 获取x 坐标
      this.posX = e.offsetX 
    }
  },
  watch: {
    posX(curX) {
      this.$refs.left.style.width = `${curX}px`
    }  
  }
}
</script>
<style lang="scss" scoped>
.scroll{
  .container{
    width: 960px;
    height: 540px;
    background-color: #cccccc;
    position: relative;
    cursor: ew-resize;
    .base{
      position: absolute;
      width: 960px;
      height: 540px;
      top: 0;
      left: 0;
      background: url('../../static/image/kda-karsa-golden.jpg') no-repeat;
      background-size: 100%;
    }
    .left{
      position: absolute;
      width: 480px;
      height: 540px;
      overflow: hidden;
      top: 0;
      left: 0;
      img{
       width: 960px;
       height: 540px; 
      }
    }
  }
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js点击事件链接的问题解决
Apr 25 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
javascript数据类型验证方法
Dec 31 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
js实现动态显示时间效果
Mar 06 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 Javascript
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
微信小程序APP的生命周期及页面的生命周期
Apr 19 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 #Javascript
使用JavaScript解析URL的方法示例
Mar 01 #Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 #Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 #Javascript
Javascript删除数组里的某个元素
Feb 28 #Javascript
vue强制刷新组件的方法示例
Feb 28 #Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 #Javascript
You might like
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
2017/08/06 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python读取网页内容的方法
2015/07/30 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
基于Python对数据shape的常见操作详解
2018/12/25 Python
浅析python的Lambda表达式
2019/02/27 Python
WxPython实现无边框界面
2019/11/18 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
施华洛世奇英国官网:SWAROVSKI英国
2017/03/13 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
打架检讨书800字
2014/01/10 职场文书
销售人员自我评价
2014/02/01 职场文书
2014植树节活动总结
2014/03/11 职场文书
爱心捐款倡议书范文
2014/05/12 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
介绍信模板
2015/01/31 职场文书
2015年班组工作总结
2015/04/20 职场文书
签字仪式主持词
2015/07/03 职场文书
springboot如何初始化执行sql语句
2021/06/22 Java/Android
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS