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 相关文章推荐
div失去焦点事件实现思路
Apr 22 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
纯js封装的ajax功能函数与用法示例
May 14 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
实例分析javascript中的异步
Jun 02 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
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
php计算整个目录大小的方法
2015/06/19 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php字符串函数 str类常见用法示例
2020/05/15 PHP
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
浅谈Javascript事件对象
2017/02/05 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
js调用刷新界面的几种方式
2017/05/03 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
微信小程序实现下拉刷新动画
2019/06/21 Javascript
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python字符串中查找子串小技巧
2015/04/10 Python
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
Python二分查找详解
2015/09/13 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
详细分析python3的reduce函数
2017/12/05 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
传媒专业推荐信范文
2013/11/23 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
干部对照检查材料范文
2014/08/26 职场文书
清洁员岗位职责
2015/02/15 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers