[英]mousemove to touchmove isn't working
我有一个非常简单的脚本,其中两个图像相互重叠,然后通过水平滑动鼠标来使顶部图像褪色或重新出现。 这用于当时/现在的混搭。
该脚本在台式机上可以完美运行,但我无法在移动设备上运行。 在移动设备上,仅在初始触摸时会拾取“鼠标”,而不会在幻灯片上拾取。
我尝试过touch-punch.js,尝试修改我的代码以使用它,但是到目前为止,我一点都没有运气...
这是我的代码
<script type="text/javascript" language="JavaScript">
$(document).ready(function() {
$('.trackMe').each(function(){
//$(this).children("img:last").mousemove(function(e) {
$(this).children("img:last").on("mousemove touchmove", function(e) {
var offset = $(this).offset();
var xpos = (e.pageX - offset.left);
var ypos = (e.pageY - offset.top);
//now to get the first child image width..
var thisImage = $(this);
var thisWidth = thisImage.width();
var pct = Math.round((xpos/thisWidth)*100)/100;
var ipct = Math.abs(Math.round(((xpos-thisWidth)/thisWidth)*100)/100);
thisImage.css({ 'opacity' : ipct });
});
});
});
</script>
我没有公开访问它,但是缺少的唯一组件是样式和上/下图像。
<style type="text/css">
.trackMe img.packard {
width:100% !important;
top:0 !important;
left:0 !important;
position:absolute;
margin:0 !important;
}
.trackMe img.now{
width:100% !important;
margin:0 !important;
}
</style>
<div style="position:relative; min-width:320px; height:auto; overflow:hidden;" class="trackMe">
<img src="1a.jpg" class="now" />
<img src="1b.jpg" class="packard" />
</div>
嘿,在您的代码中尝试这个。.尝试像这样获得x和y
$(document).bind('touchmove mousemove', function (e) {
var currentY = e.originalEvent.touches ? e.originalEvent.touches[0].pageY : e.pageY;
var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
//do your stuff
});
谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.