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

532 ℃

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,我们会在看到邮件的第一时间内为您处理!

git教程之SourceTree使用介绍,附官网下载链接
介绍几种删除数组中最后一个元素的es6语法
php语法中如何利用switch语句实现循环
帝国cms采集分页规则有哪几种写法
关键词排名优化,网站内容优化应该如何提高关键词相关性