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 相关文章推荐
可缩放Reloaded-一个针对可缩放元素的复用组件
Mar 10 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
js实现固定宽高滑动轮播图效果
Jan 13 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
jQuery的一些注意
2006/12/06 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
Vue表单实例代码
2016/09/05 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
python去除拼音声调字母,替换为字母的方法
2018/11/28 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
详解Python实现进度条的4种方式
2020/01/15 Python
python中tab键是什么意思
2020/06/18 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
建筑工程自我鉴定
2013/10/18 职场文书
运动会通讯稿150字
2014/02/15 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
学术会议开幕词
2016/03/03 职场文书
Django+Celery实现定时任务的示例
2021/06/23 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL