web建站教程

  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板下载

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

132 ℃
     

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://ipkd.cn/webs_13506.html

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

本文共计458个字,预计阅读时长4分钟
AI工作站-收录全球各行各业AI应用,轻轻松松做事!
BI模板合集
上一篇: 推荐一款免费开源的屏幕录制软件——OBS Studio
下一篇: 推荐一个高质量的图片素材网站——Unsplash
x