移动鼠标

Question

I have a website with a splitscreen slider that I want to make mobile friendly. 我有一个网站，上面有一个希望使移动设备友好的分屏滑块。 I have an addeventlistener 'mousemove' which allows the slider to go back and forth, but I also want to make it touch activated as well. 我有一个addeventlistener'mousemove'，它允许来回滑动滑块，但我也想使其也被激活。

I tried replacing the 'mousemove' with 'pointermove' and 'touchmove' but nothing would change. 我尝试用“ pointermove”和“ touchmove”替换“ mousemove”，但是什么都不会改变。 It still won't work on mobile, help please. 它仍然无法在移动设备上运行，请提供帮助。 The codepen shows an example of what I have on my site. Codepen显示了我在网站上拥有的示例。

 document.addEventListener('DOMContentLoaded', function(){ let wrapper = document.getElementById('wrapper'); let topLayer = wrapper.querySelector('.top'); let handle = wrapper.querySelector('.handle'); let skew = 0; let delta = 0; if(wrapper.className.indexOf('skewed') != -1){ skew = 1000; } wrapper.addEventListener('mousemove', function(e){ delta = (e.clientX - window.innerWidth / 2) * 0.5; handle.style.left = e.clientX + delta + 'px'; topLayer.style.width= e.clientX + skew + delta + 'px'; }); });

 body{ margin: 0; padding:0; font-size: 100%; line-height: 1.6; font-family: Arial, Helvetica, sans-serif; } #wrapper{ position: relative; width: 100%; min-height:55vw; overflow: hidden; } .layer{ position:absolute; width:100vw; min-height: 55vw; overflow: hidden; } .layer .content-wrap{ position: absolute; width:100vw; min-height: 55vw; } .layer .content-body{ width: 25%; position:absolute; /* top:50%; */ top: 25%; text-align: center; transform:translateY(-50%); color:#fff; } .layer img{ position:absolute; width:65%; /*width: 35% */ top:50%; left:50%; transform:translate(-50%, -50%); } .layer h1 { font-size:2em; font-family: 'Lato', sans-serif; } .bottom{ background:#686965; z-index:1; } .bottom .content-body{ right:5%; } .bottom h1{ color:#7bbe9a; font-family: 'Lato', sans-serif; } .top{ background:#eff0ec; color:#222; z-index:2; width:50vw; } .top .content-body{ left:5%; color:#333; } .handle{ position: absolute; height: 100%; display: block; background-color: #7bbe9a; width: 5px; top:0; left: 50%; z-index:3; } .skewed .handle{ top:50%; transform:rotate(30deg) translateY(-50%); height:200%; transform-origin:top; } .skewed .top{ transform: skew(-30deg); margin-left:-1000px; width: calc(50vw + 1000px); } .skewed .top .content-wrap{ transform: skew(30deg); margin-left:1000px; } @media(max-width:768px){ body{ font-size:75%; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Images not Owned by Me --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href=""> <link href="https://fonts.googleapis.com/css?family=Lato|Nixie+One" rel="stylesheet"> </head> <body> <section id="wrapper" class="skewed"> <div class="layer bottom"> <div class="content-wrap"> <div class="content-body"> <h1>Designer</h1> <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> --> </div> <img src="http://3d.ford.com/assets/ford_gt-min.png" alt=""> </div> </div> <div class="layer top"> <div class="content-wrap"> <div class="content-body"> <h1>Developer</h1> <!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> --> </div> <img src="http://3d.ford.com/assets/ford_gt_print.png" alt=""> </div> </div> <div class="handle"></div> </section> <script src=""></script> </body> </html>

Answer 1

答案位于此处的其他帖子中。

移动鼠标

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-02-08 00:21:06

移动鼠标

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-02-08 00:21:06

解决方案1
0 已采纳 2018-02-08 00:21:06