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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
JQuery 入门实例1
Jun 25 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
Bootstrap每天必学之进度条
Nov 30 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
对javascript继承的理解
Oct 11 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
[原创]微信小程序获取网络类型的方法示例
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
phpBB BBcode处理的漏洞
2006/10/09 PHP
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
AngualrJs清除定时器遇到的坑
2017/10/13 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
Python读写Excel文件方法介绍
2014/11/22 Python
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
Python 变量的创建过程详解
2019/09/02 Python
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
工程部主管岗位职责
2013/11/17 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
2014年安全员工作总结
2014/11/13 职场文书
先进工作者推荐材料
2014/12/23 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
暂停营业通知
2015/04/25 职场文书
机关保密工作承诺书
2015/05/04 职场文书
党员公开承诺书2016
2016/03/24 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
关于@OnetoMany关系映射的排序问题,使用注解@OrderBy
2021/12/06 Java/Android
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android
python实现学生信息管理系统(面向对象)
2022/06/05 Python