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 判断checkbox是否选中的操作方法
Nov 09 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
JS触摸事件、手势事件详解
May 04 Javascript
浅谈React之状态(State)
Sep 19 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
vue打开子组件弹窗都刷新功能的实现
Sep 21 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/05/20 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
PHP递归算法的详细示例分析
2013/02/19 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
Javascript客户端脚本的设计和应用
2006/08/21 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
饲料采购员岗位职责
2013/12/19 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
婚前财产公证书
2014/04/10 职场文书
给市场的环保建议书
2014/05/14 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2016十一国庆节感言
2015/12/09 职场文书
JavaScript的Set数据结构详解
2022/02/18 Javascript