纯JS实现左右滑动布局和滑动

最新推荐文章于 2024-03-15 09:33:44 发布
VIP文章 最新推荐文章于 2024-03-15 09:33:44 发布
阅读量1.8w 收藏 16
点赞数 2
分类专栏： JavaScript点滴知识 文章标签： JS 滑动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bbsyi/article/details/83861352
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=keywords content=首页>
    <meta name=description content=首页>
    <meta name=author content="">
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="format-detection" content="telphone=no" />
    <link rel="stylesheet" href="./css/global.css">
    <script type="text/javascript">
        var deviveWidth = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = deviveWidth / 7.5 + 'px';
    </script>
    <title>test</title>

    <style>
        .slider{
          overflow: h
最低0.47元/天 解锁文章
弹琴弹琴
关注
  • 2
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS实现同一个网页布局滑动门和TAB选项卡实例
11-25
本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡。分享给大家供大家参考。具体如下： 这里演示同一个网页布局滑动门和TAB选项卡效果，其实滑动门和选项卡没有太大的区别，无非是鼠标动作的不同而已，但是有...
js实现左右切换页面
qq_39048609的博客
08-20 2190
Document html, body{ height:100%;}body { margin:0; padding:0; font-family:sans-serif; text-align:center; color:#FFF; overflow:hidden; position:relative;} article{ position: absolute; width:100%;
原生js实现向右滑动验证
weixin_42380671的博客
03-13 5742
代码： html <body onload="yzm()"> <div class="box"> <!--按钮--> <div class="btn">></div> <!--文字--> <p class="text">请向右滑动滑块&...
jslider - 简单易用的JavaScript滑块插件
gitblog_00088的博客
03-15 356
jslider - 简单易用的JavaScript滑块插件 项目链接：https://gitcode.com/egorkhmelev/jslider?utm_source=artical_gitcode jslider 是一个轻量级、易于使用的 JavaScript 滑块插件，它可以帮助您在网站上添加功能丰富的滑块组件。无论是创建图片轮播、价格范围选择器还是其他类型的滑动条，jslider 都是您...
原生JS实现点击导航栏鼠标左右滑动（适用于PC端和移动端）
bugQueen的博客
12-03 4890
效果图： 点击导航栏左右拖动 代码： CSS： <style> .navBar { width: 1200px; margin-left: 25px; margin-top: 40px; margin-bottom: 40px; overflow-x: auto; white-space: nowrap; }
js实现touch移动触屏滑动事件
qq_41425194的博客
02-27 2392
targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches。changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches。touchcancel: //系统取消touch事件的时候触发，这个好像比较少用。clientX / clientY: //触摸点相对浏览器窗口的位置。screenX / screenY: //触摸点相对于屏幕的位置。pageX / pageY: //触摸点相对于页面的位置。target: //当前的DOM元素。
JS实现动画从左到右
qq_59861678的博客
02-28 752
动画，简单的从左往右移动
【js---鼠标点击可拖动左右内容的实现】
小蓝人的博客
05-21 859
只需要改变对IT变量的限制即可。
pc端原生JS实现鼠标点击屏幕左右滑动
m0_52611940的博客
06-05 406
pc端原生JS实现鼠标点击屏幕左右滑动
原生js实现简易的左右滑动的轮播图效果
Su__py的博客
04-26 1092
这是css的代码 .main { width: 750px; height: 500px; box-sizing: border-box; padding: 30px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
js商品图片左右拖拽滑块滚动预览
ICode联盟
09-19 434
原生js原生js仿苹果商品图片滑块滚动预览。① 拖动滚动条，图片列表缓冲滑动至目标点；② 滚动条两端鼠标移入自动滑动；③ 滚动条滑动到两端自动更换为停止标识；④ 点击滚动条黑色背景区，滚动条及图片列表缓冲滑动至目标点；⑤ 支持键盘左右键；
js左右联动实现滚动方法
weixin_68658847的博客
11-03 1096
js左右联动实现滚动方法
js实现移动端APP的方格布局横向滑动翻页带滚动条
11-17
个人全程手写实现移动端APP的方格布局，内容区域滚动，下方有横向滑动条同时滚动，支持左右滑动。滚动区域的滚动效果和滚动条的滚动幅度一致。
js实现简洁的滑动门菜单(选项卡)效果代码
11-23
一个简洁实用的网页选项卡菜单，在同一个页面中实现两个选项卡，第一个是滑动门，从布局上来说基本是相似的，第二个是选项卡，这里主要使用了Js自定义函数：tabMenu，函数功能：实现tab菜单，参数说明：tabMenu...
JS实现的简洁纵向滑动菜单(滑动门)效果
11-22
这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一个“门”的内容存入JS数组中，这样可以减少代码量，但也带来了一个扩展的问题...
jedis示例代码压缩包
04-23
jedis示例代码
高分课程设计 QT5.7+Sqllite数据库小系统源码+部署文档+全部数据资料
04-23
【资源说明】 高分课程设计 QT5.7+Sqllite数据库小系统源码+部署文档+全部数据资料 可实现数据库的可视化操作：增、删、改、查.zip 【备注】 1、该项目是高分毕业设计项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过mac/window10/11/linux测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！
中文文本分类 传统机器学习+深度学习.zip
04-23
中文文本分类 传统机器学习+深度学习
Linux学习笔记4-点亮LED灯（汇编裸机）程序
最新发布
04-23
Linux学习笔记4---点亮LED灯（汇编裸机）程序
在DevEco Studio上实现移动端块级标签左右滑动
05-31
在DevEco Studio上实现移动端块级标签左右滑动，可以使用HarmonyOS提供的ScrollView控件来实现，结合JavaScript的touch事件监听用户触摸事件，实现手指滑动标签的效果。具体实现步骤如下： 1. 在XML布局文件中添加ScrollView控件，设置宽度、高度和滚动方向为水平方向。 ``` <ScrollView id="$+id:scrollView" width="match_parent" height="50vp" orientation="horizontal"> </ScrollView> ``` 2. 在JS文件中获取ScrollView控件，并使用createElement方法动态创建标签元素，设置宽度、高度和样式，并将标签添加到ScrollView中。 ``` var scrollView = this.$element('scrollView'); for (var i = 0; i < 8; i++) { var tab = document.createElement('div'); tab.style.width = '100px'; tab.style.height = '40px'; tab.style.lineHeight = '40px'; tab.style.textAlign = 'center'; tab.style.backgroundColor = '#ccc'; tab.style.marginRight = '10px'; tab.textContent = '标签' + (i + 1); scrollView.appendChild(tab); } ``` 3. 监听touchstart、touchmove和touchend事件，获取手指滑动的距离，并通过修改ScrollView控件的scrollX属性来实现滚动效果。 ``` var scrollView = this.$element('scrollView'); var startX, moveX, endX; scrollView.addEventListener('touchstart', function(e) { startX = e.touches[0].pageX; }); scrollView.addEventListener('touchmove', function(e) { moveX = e.touches[0].pageX; var distance = moveX - startX; // 手指滑动的距离 scrollView.scrollX -= distance; // 修改滚动距离 e.preventDefault(); // 阻止默认事件 }); scrollView.addEventListener('touchend', function(e) { endX = e.changedTouches[0].pageX; }); ``` 完整代码如下： XML布局文件： ``` <ui:Page xmlns:ui="http://www.huawei.com/schema/harmonyos/ui" xmlns="$ns" background="{{color: '#fff'}}"> <ScrollView id="$+id:scrollView" width="match_parent" height="50vp" orientation="horizontal"> </ScrollView> </ui:Page> ``` JS文件： ``` export default { data: {}, onInit() { this.initView(); }, initView() { var scrollView = this.$element('scrollView'); for (var i = 0; i < 8; i++) { var tab = document.createElement('div'); tab.style.width = '100px'; tab.style.height = '40px'; tab.style.lineHeight = '40px'; tab.style.textAlign = 'center'; tab.style.backgroundColor = '#ccc'; tab.style.marginRight = '10px'; tab.textContent = '标签' + (i + 1); scrollView.appendChild(tab); } scrollView.addEventListener('touchstart', function(e) { startX = e.touches[0].pageX; }); scrollView.addEventListener('touchmove', function(e) { moveX = e.touches[0].pageX; var distance = moveX - startX; // 手指滑动的距离 scrollView.scrollX -= distance; // 修改滚动距离 e.preventDefault(); // 阻止默认事件 }); scrollView.addEventListener('touchend', function(e) { endX = e.changedTouches[0].pageX; }); } } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值