web前端实现局部左右滑动

最新推荐文章于 2024-05-29 15:53:40 发布
最新推荐文章于 2024-05-29 15:53:40 发布
阅读量6.7k 收藏 6
点赞数 3
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weshouldhelp/article/details/83176612
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="../css/caishunqiall.css">-->
    <!--
    <script>
        //通过window.screen.width获取屏幕的宽度
        var offWidth = window.screen.width / 30; //这里用宽度/30表示1rem取得的px
        document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size
    </script>
 -->
    <script type="text/javascript">
        (function(doc, win) {
            var docEl = doc.documentElement,
                    isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
                    dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
                    dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
                    dpr = 1,
                    scale = 1 / dpr,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
            docEl.dataset.dpr = dpr;
            var metaEl = doc.createElement('meta');
            metaEl.name = 'viewport';
            metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
            docEl.firstElementChild.appendChild(metaEl);
            var recalc = function() {
                var width = docEl.clientWidth;
                if (width / dpr &
最低0.47元/天 解锁文章
Caishunqi
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度
chenchuang0128的博客
06-12 6857
swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表。swiperTabList: ["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"], //导航列表。curSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色。
前端实现上滑下滑左滑右滑
ycc1111的博客
09-15 714
安装:npm install vue-touch@next -S。5.在menthods里面定义对应的方法操作。1.首先我们借助一个插件v-touch。2.在main.js里面引入。
html如何实现图片左右滑动效果,HTML+CSS入门 如何实现图片(image) 左右滑动
热门推荐
weixin_35772595的博客
06-03 1万+
本篇教程介绍了HTML+CSS入门 如何实现图片(image) 左右滑动，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<1、需求需要用简单动画的形式将一组图片进行展示，图片数量不固定2、效果如下:3、思路说到动画，首先想到使用-webkit-transition:;因为这个最简单好用,首先将图片都放在左侧，然后根据图片数量计算每个图片的左边距，这样就可以依次排列了。然后就...
前端：横向滚动条，拖动进行左右滚动（含隐藏滚动条）
最新发布
qq_59625204的博客
05-29 392
device-list是要执行滑动的dom元素。
table列表左右拖拽实现滑动效果
qq_39585172的博客
05-23 3670
添加table左右拖动效果的指令
JS与CSS实现区域内容自动左右滑动
ALeeYaaaa的博客
12-09 5176
实现功能 1、鼠标在区域内滚轮上/下滑能够实现内容左/右滑 2、内容能够自动滑动，并且在到达区域两侧后能切换方向 3、鼠标悬浮时能够停止滑动，并且此时支持滑轮操作 4、鼠标从移入变为移出时自动滑动，滑动方向能够自动判断此期间的滑轮操作方向，或者按照移入前的方向继续滑动 实现思路 1、使用定时器来实现自动/停止滚动功能 2、使用方向标志位来判定左/右滑动 3、使用...
Web课程设计报告，优秀课设
08-15
6. 其他网页设计：通过超链接实现页面间的跳转，集成菜单、滑动图片、表格和JS功能。 五、网站系统测试与评估 课程设计完成后，进行了系统测试和自我评估，确认所有功能正常，页面间跳转无误。同时，也识别出一些...
js.rar_js web_前台页面
09-22
JavaScript（简称JS）是Web开发中的重要组成部分，尤其在前端页面功能开发中起着核心作用。作为一门轻量级的脚本语言，...深入理解和掌握这些知识点，将有助于提升Web前端开发的能力，创造出更加优秀的交互式网页。
部分区域滑动的弹出框
03-28
6. **编程实现**：在技术实现上，可以使用各种前端框架，如React、Vue或Angular，结合CSS3动画来创建这部分滑动效果。对于iOS开发，可以使用Swift的UIPresentationController或自定义转场动画；对于Android，可以...
jquery实现的图片滑动并带有放大镜效果代码.rar
09-05
这个“jquery实现的图片滑动并带有放大镜效果代码.rar”压缩包文件，显然包含了一个使用jQuery创建的图片展示功能，该功能不仅能够实现图片的滑动展示，还具有放大镜效果，以便用户可以更清晰地查看图片的细节。...
前端项目-godlike.css.zip
09-03
在前端开发领域，CSS（Cascading Style Sheets）是用于表现HTML或XML...通过解压和研究godlike.css-master，开发者可以深入了解这个框架如何实现上述功能，并将其应用到自己的前端项目中，提升开发效率和用户体验。
web前端仿手机左右滑动
08-25
web前端仿手机左右滑动，这个功能在手机上用的很多，但是现在很多网站都在用这个功能，所以我上传了这个例子
table 固定列 纯css 上下滚动固定 顶部 th ，左右滚动固定 第一列 td
qq_34720531的博客
06-07 907
table 固定列
怎样通过css控制table的部分td
梁同学与Android
11-07 1498
我们先看一个table的简单例子: 预期达到的效果是这样的: 即每一行的第二个td都有个20px的内边距,我们大家习惯上为每一个需要所近距离的td设置padding-left:20px;但是这种写法是不标准，效率低的。 下面给大家介绍一下这个东西: CSS3 :nth-child() 选择器 定义和用法 :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 n...
Css之 table表格 实现表头滚动固定并且固定最后一列在右侧
qq_39835505的博客
03-15 2060
固定表头 https://blog.csdn.net/qq_36939013/article/details/108101677 固定最后一列在最右侧 https://blog.csdn.net/weixin_39884872/article/details/117763346 纯css 实现 table固定首行、首列以及最后一列冻结 https://www.cnblogs.com/a876459952/p/15737003.html <!DOCTYPE html> <html>
vue实现购物车页面功能交互，单选、全选、左滑删除
cd13849109771的博客
10-27 2426
vue实现购物车页面功能交互，单选、全选、左滑删除
前端实现鼠标滑动滚轴 滚动轴左右滚动 div盒子左右滚动
weixin_43286206的博客
07-07 2483
前端实现鼠标滑动滚轴 滚动轴左右滚动 div盒子左右滚动
移动web前端开发，页面局部滑动之iscroll框架
zanazh的专栏
08-19 2653
先看个简单的，移动设备上，横向滑动内容块的例子： body,ul,li { padding:10px; margin:0; } body { font-size:12px; -webkit-user-select:none; -webkit-text-size-adjust:none; font-family:helvetica; }
对于web页面上某个显示框内部滚动条的滚动办法
我去热饭的博客
09-13 2583
欢迎来到此博客 “”“目前网络上常用的 js = “var q=document.documentElement.scrollTop=1200” 等命令或代码，是对整个浏览器的滚动生效的。目前我的一个简单的办法就是用selenium： 在页面内，拖拽（注意是拖拽）一个不可移动的控件 到指定位置的一个控件 上的土办法。 简单有效。标准办法还是用js修改 该显示框的 属性，让它自动显示某一位置
写一个前端的左右滑动页面
05-25
可以使用CSS3的`transform: translateX()`属性来实现左右滑动页面的效果。具体实现步骤如下： 1. HTML结构：需要一个包含所有页面的父元素和多个子元素作为每一页。 ```html <div class="slider"> <div class="page page1">Page 1</div> <div class="page page2">Page 2</div> <div class="page page3">Page 3</div> </div> ``` 2. CSS样式：设置每个页面的宽度和高度，并将所有页面的父元素设置为横向排列，隐藏超出父元素宽度的部分。 ```css .slider { width: 100%; height: 500px; overflow: hidden; display: flex; } .page { width: 100%; height: 100%; flex-shrink: 0; text-align: center; } .page1 { background-color: red; } .page2 { background-color: green; } .page3 { background-color: blue; } ``` 3. JavaScript代码：监听用户滑动手势并将页面滑动到相应位置。 ```javascript const slider = document.querySelector('.slider'); let isDragging = false; let startPosition = 0; let currentTranslate = 0; let previousTranslate = 0; function onTouchStart(event) { if (event.type === 'mousedown') { startPosition = event.pageX; } else { startPosition = event.touches[0].pageX; } isDragging = true; slider.classList.add('grabbing'); } function onTouchMove(event) { if (isDragging) { const currentPosition = event.type === 'mousemove' ? event.pageX : event.touches[0].pageX; currentTranslate = previousTranslate + currentPosition - startPosition; } } function onTouchEnd() { isDragging = false; slider.classList.remove('grabbing'); previousTranslate = currentTranslate; } slider.addEventListener('mousedown', onTouchStart); slider.addEventListener('mousemove', onTouchMove); slider.addEventListener('mouseup', onTouchEnd); slider.addEventListener('touchstart', onTouchStart); slider.addEventListener('touchmove', onTouchMove); slider.addEventListener('touchend', onTouchEnd); ``` 4. 实现滑动效果：根据用户手势滑动的距离来调整页面的位置。 ```javascript function updateSliderPosition() { slider.style.transform = `translateX(${currentTranslate}px)`; } function animateSlider() { requestAnimationFrame(animateSlider); updateSliderPosition(); } animateSlider(); ``` 完整的代码如下所示： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Slider</title> <style> .slider { width: 100%; height: 500px; overflow: hidden; display: flex; } .page { width: 100%; height: 100%; flex-shrink: 0; text-align: center; } .page1 { background-color: red; } .page2 { background-color: green; } .page3 { background-color: blue; } .slider.grabbing { cursor: grabbing; cursor: -webkit-grabbing; } </style> </head> <body> <div class="slider"> <div class="page page1">Page 1</div> <div class="page page2">Page 2</div> <div class="page page3">Page 3</div> </div> <script> const slider = document.querySelector('.slider'); let isDragging = false; let startPosition = 0; let currentTranslate = 0; let previousTranslate = 0; function onTouchStart(event) { if (event.type === 'mousedown') { startPosition = event.pageX; } else { startPosition = event.touches[0].pageX; } isDragging = true; slider.classList.add('grabbing'); } function onTouchMove(event) { if (isDragging) { const currentPosition = event.type === 'mousemove' ? event.pageX : event.touches[0].pageX; currentTranslate = previousTranslate + currentPosition - startPosition; } } function onTouchEnd() { isDragging = false; slider.classList.remove('grabbing'); previousTranslate = currentTranslate; } function updateSliderPosition() { slider.style.transform = `translateX(${currentTranslate}px)`; } function animateSlider() { requestAnimationFrame(animateSlider); updateSliderPosition(); } slider.addEventListener('mousedown', onTouchStart); slider.addEventListener('mousemove', onTouchMove); slider.addEventListener('mouseup', onTouchEnd); slider.addEventListener('touchstart', onTouchStart); slider.addEventListener('touchmove', onTouchMove); slider.addEventListener('touchend', onTouchEnd); animateSlider(); </script> </body> </html> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值