js实现滑动切换上一篇下一篇功能

1、html中定义2个方法

onmousedown="mousedown()"
onmouseup="mouseup()"

2、js滑动效果代码

var startX = 0; //全局变量, 记录鼠标按下的横坐标
// 按下鼠标
function mousedown(event) {
  var e = window.event;
  var obj = e.srcElement;
  obj.style.color = 'blue';
  startX = e.clientX;
}
// 抬起鼠标
function mouseup(event) {
  var e = window.event;
  var obj = e.srcElement;
  obj.style.color = 'black';
  var endX = e.clientX;
  // 左滑
  if((startX - endX)>70){
    //上一篇文章
    console.log('左：e: '+ endX + ', s: ' + startX)
  }
  // 右滑
  if((endX - startX)>70){
    //下一篇文章
    console.log('右：e: '+ endX + ', s: ' + startX)
  }
}

js数组实现上一篇下一篇功能

标签： js上一篇文章, js下一篇文章, js滑动切换

上面是“js实现滑动切换上一篇下一篇功能”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_13506.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！