开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

鼠标控制图文左右滚动js代码

要实现鼠标控制图文左右滚动的效果，可以使用JavaScript结合CSS来完成。以下是一个简单的示例代码，展示了如何实现这一功能：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Scroll Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="scroll-container">
        <div class="scroll-content">
            <img src="image1.jpg" alt="Image 1">
            <img src="image2.jpg" alt="Image 2">
            <img src="image3.jpg" alt="Image 3">
            <!-- Add more images as needed -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body {
    margin: 0;
    overflow: hidden;
}

.scroll-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.scroll-content {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

JavaScript代码

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const container = document.querySelector('.scroll-container');
    const content = document.querySelector('.scroll-content');
    let isScrolling = false;
    let scrollDirection = 0;

    container.addEventListener('mousedown', (e) => {
        isScrolling = true;
        scrollDirection = e.clientX > container.offsetLeft + container.offsetWidth / 2 ? 1 : -1;
    });

    container.addEventListener('mouseup', () => {
        isScrolling = false;
    });

    container.addEventListener('mouseleave', () => {
        isScrolling = false;
    });

    container.addEventListener('mousemove', (e) => {
        if (!isScrolling) return;
        const delta = e.clientX - container.offsetLeft - container.offsetWidth / 2;
        const scrollAmount = delta * 0.5; // Adjust sensitivity as needed
        content.style.transform = `translateX(${scrollAmount}px)`;
    });

    // Reset scroll position on mouse up
    container.addEventListener('mouseup', () => {
        content.style.transform = 'translateX(0)';
    });
});

解释

HTML结构：创建一个包含滚动内容的容器，并在其中放置需要滚动的图片。
CSS样式：设置容器和内容的样式，确保内容可以水平滚动。
JavaScript代码：
- 监听鼠标按下、移动和释放事件。
- 根据鼠标位置判断滚动方向。
- 在鼠标移动时更新内容的transform属性以实现滚动效果。
- 在鼠标释放时重置滚动位置。

应用场景

轮播图：用于网站的轮播图展示，用户可以通过鼠标拖动来切换图片。
长页面导航：在长页面中，用户可以通过鼠标拖动来快速浏览不同部分的内容。
交互式数据可视化：在数据可视化应用中，用户可以通过鼠标拖动来查看不同时间段的数据。

可能遇到的问题及解决方法

滚动不流畅：可能是由于transition属性设置不当或计算滚动量时的误差。调整transition的时间和缓动函数，或优化滚动量的计算方式。
滚动方向错误：确保在鼠标按下时正确判断滚动方向，并在鼠标移动时根据方向更新滚动量。
滚动位置重置问题：在鼠标释放时，确保将内容的transform属性重置为初始状态。

通过以上代码和解释，你应该能够实现一个基本的鼠标控制图文左右滚动的效果。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

左右滚动，带控制按钮

今天需要一个左右滚动图的js，从网上着了半天，修改调试了半天才弄好，于是就收藏了。...不过以后真得看看js了关键代码有注释：（红色部分是我加的注释） js，而且高度和宽度不能省去，这里还有问题，为何单元格是750这的div设置成800？...为了便于滚动我调试的–> 代码如下： var $ = function (id) { return “string” == typeof id ?

3.5K6 0

左右滚动公告代码和上下滚动公告代码

左右滚动上下滚动

4.8K2 0

原生JS滚动鼠标改变元素大小

今天要分享的是运用原生JS滚动鼠标改变元素大小，效果如下：以下是代码实现，欢迎大家复制粘贴。原原生JS...滚动鼠标改变元素大小 #div1 { width: 200px; height: 200px;...window.onload = function () { var oDiv = document.getElementById('div1'); // 滚动事件...var oEvent = ev || event; var bDown = true; // 用于区分是向上滚动还是向下滚动

9.2K2 0

JS控制SVG缩放+鼠标控制事件

直接撸代码： js控制SVG缩放 ...; svgBackground.appendChild(line2) } } /* * js...drawGrid(gridSvg, width*(1/scale), height*(1/scale), gridLength); } // 绑定鼠标滑轮...} window.onmousewheel = document.onmousewhell = scrollZoom; /* * 滑轮滚动处理事件

24.5K5 0

html左右循环滚动代码,不间断循环滚动效果的实例代码(必看篇)

滚动测试 /** * @para obj 目标对象如:demo,deml1,demo2 中的”demo” 可任意，只要不重复 * * @para speed 滚动速度越大越慢 * * @para...direction 滚动方向包括:left,right,down,up * * @para objWidth 总可见区域宽度 * * @para objHeight 总可见区域高度 * * @para...filePath 存放滚动图片的路径 (如果是自动获取文件夹里的图片滚动) * * @para contentById 对某id为contentById下的内容进行滚动此滚动与filePath不能共存请注意...=””) demo1.innerHTML=$(contentById).innerHTML; demo2.innerHTML=demo1.innerHTML; // 左右滚动 function LRStructure...up(); break; default: return down(); } } // 重复执行 var myMarquee=setInterval(swichDirection,speed); // 鼠标悬停

4.8K2 0

Selenium 鼠标键盘操作与滚动条控制

move_to_element() 鼠标悬停鼠标操作 from selenium import webdriver from selenium.webdriver.common.action_chains...move_to_element(above).perform() sleep(4) driver.quit() 键盘操作测试案例在百度搜索关键词“Python” 然后将关键词复制或剪切到搜狗搜索框进行搜索代码实现...input[@id='stb']").click() driver.find_element_by_css_selector("#stb").click() sleep(3) driver.quit() 滚动条控制...=webdriver.Firefox() driver.get("http://www.51zxw.net/") sleep(2) #将滚动调拖到最底部 js="var action=document.documentElement.scrollTop...=10000" driver.execute_script(js) sleep(2) #将滚动条拖到最顶部 js="var action=document.documentElement.scrollTop

3.5K5 0

pycharm鼠标滚动控制字体大小_pycharm窗口放大

increase，点击increase Font Size，双击Add Mouse Shortcut（先不用点OK）第二步：点击Add Mouse Shortcut弹出下面对话框，然后按住ctrl并向上滚动鼠标滑轮

1.3K1 0

three.js鼠标控制物体旋转

移动旋转物体可以使用Three.js提供的OrbitControls.js，也可以手动写控制器。原理：获取鼠标点击的位置与移动的距离，根据移动的距离计算出大概旋转的角度。.../dist/js/three.js"> js/Projector.js"> js/CanvasRenderer.js"> var container; var camera, scene, renderer...= targetRotation; } function onDocumentMouseMove(event) { //移动的时候鼠标相对位置 mouseX...= event.layerX - windowHalfX; //移动的时候旋转的角度 = 刚按下鼠标的角度+移动的位置-鼠标按下时的位置 targetRotation

15.6K5 3

Java selenuim用执行js模拟鼠标滚动的方式

题目： Java selenuim用执行js模拟鼠标滚动的方式完成页面滚动的异步加载及Java接收浏览器js的返回值在使用selenuim webdriver爬取网页时，经常会有很多网页并不是访问链接就会加载全部内容的...，而是需要鼠标向下滚动，动态的加载内容，比如知乎首页。...这样在爬取的过程中并不能直接抓数据，需要先模拟鼠标滚动，让页面先加载出来才行。 ---- 我使用的方法是利用如下js代码来完成页面的滚动，每次滚动多少可以根据不同情况自行调整。...scroll(0,document.body.scrollHeight) 在浏览器控制台输入js代码即可看到效果，和程序中使用起来是一样的。...接下来的问题就是如何使Java代码能够接收到浏览器执行的js代码返回值的问题了。很简单，在js代码上加上return 即可。注意有一个空格。

4.5K2 0

cssjshtml vue.js 页面滚动位置控制

页面跳转时页面展示在 y轴100px的位置。 const router = new VueRouter({ routes, mode: 'history...

3.1K2 0

Python自动控制鼠标中键滚动并截屏保存图像

功能描述：程序启动3秒之后自动控制鼠标滚动，使得鼠标下方的窗口自动向下滚动并对屏幕上指定区域进行截图保存为图像文件。...参考代码： ? 使用方法：提前打开一个窗口或WEB页面，然后运行上面的代码，再用鼠标单击要截屏的窗口把它切换到前台，剩下的事情就交给这个程序了。

1.4K0 0

无缝循环滚动图片的JS代码

无缝循环滚动图片的JS代码，用来展示商品什么的最好了，图片URL可以自行替换，速度也可以自己调试。... 无缝滚动</

12.2K3 0

js无缝循环滚动图片示例代码

html代码 3 css代码 * { margin: 0; padding:...left; margin: 0; padding: 0; } #banner ul li img { width: 400px; height: 600px; } js...//oUl.style.left = oUl.offsetLeft-2+'px';//进行左横向滚动 } //调用方法 var timer = setInterval(move,30)//速度...//鼠标悬停时暂停 oDiv.onmouseover=function(){ clearInterval(timer); } //鼠标离开之后恢复 oDiv.onmouseout=function

12.2K2 0

【前端】js代码模拟用户键盘鼠标输入

js代码模拟用户键盘鼠标输入原生js var event = new Event('mousewheel'); event.wheelDelta = 360 document.dispatchEvent

1.2K4 0

评论框鼠标点击特效js代码

效果可以看本博客的评论框 [collapse title="特效JS代码"] (function webpackUniversalModuleDefinition(a,b){if(typeof exports...POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE); [/collapse] 将其上面代码复制进一个新建的...js文件，放在网站目录某个地方，然后编辑主题文件模板名称/component/footer.php 在后面添加以下代码。...JS文件路径)"> 博主只在目前使用的模板测试成功使用，其他模板自测。

10.1K5 0

MouseJack：15行代码控制无线鼠标和键盘

Bastille的研究团队发现了一种针对蓝牙键盘鼠标的攻击，攻击者可以利用漏洞控制你的电脑操作。研究团队将此攻击命名为MouseJack。...攻击者部署了漏洞代码并且将信息上传到GitHub ，所有未打补丁的设备的用户现在面临被攻击的风险。...纽林认识到了这一点，使用现有的一个古老的任天堂游戏控制器内的nrf24l收发器制作了一个伪造的鼠标。...这使NES控制器不需要SDR就能识别无线鼠标和键盘。NES控制器是学习鼠标通信协议行为的一个很好的平台。...另一个带有用来数据包嗅探的几行Python代码和注入编织成一个放大的具有模糊能力的USB crazyradio适配器建立了。纽林说漏洞包括按键注射，鼠标、键盘欺骗和强制配对。

2.3K5 0

原生JS实现拖拽进度条、滚动鼠标显示相应的内容

今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容，实现效果如下： ? 以下是代码实现，欢迎大家复制粘贴。原生JS...实现拖拽进度条、滚动鼠标显示相应的内容 #parent { width: 400px; height...document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); //鼠标滚动时...目前主要针对的是javascript培训，同时还提供了css教程、javascript 视频、js特效等，最新推出了外地学员们喜欢的javascript网络课程服

4.9K2 0

原生 JS 实现惯性滚动，给鼠标滚轮增加阻尼感，纵享丝滑

然而鼠标滚轮的传感器通常采用光电或机械的方式运作，由一个旋转轴和一个传感器组成，旋转轴通常无法做出细微的距离控制，使得距离检测更像是段落式的，这些信号在传输到计算机后，并不能实现丝滑的滚动。...，同时讲解其中技术原理与细节，用最少量的代码实现 JS 鼠标惯性滚动。...实现原理首先需要利用 DOM 事件禁止鼠标滚动，转为 JS 控制。...60 FPS 左右就能让人眼的感受流畅不卡顿了，修改代码如下：const damp = (x, y, lambda, dt) => lerp(x, y, 1 - Math.exp(-lambda *...完整代码下面贴出文章的完整代码，整个 demo 的代码差不多 50 行左右：const lerp = (start, end, amt) => (1 - amt) * start + amt * end

1.8K4 1

JS-事件之鼠标、键盘都能控制的下拉选框效果

index值将对应的选项设为当前（灰色背景） 5、按下回车键时将对应选中的选项设为菜单标题，且将所有选项设为无背景，index恢复为-1，菜单收起注意：没有任何选项被选中时，按下回车键不做任何操作三、鼠标滑过每个选项时高亮显示...，离开时去掉背景，点击高亮选项时菜单标题改变提示: 1.遍历所有a标签，绑定鼠标点击的事件注意：要考虑到浏览器兼容，使用innerHTML，不要使用innerText 四、点击页面空白处收起菜单

3.2K5 0

【说站】JS代码实现鼠标点击爱心特效

本文编程笔记首发使用非常简单，需要在哪个页面显示就把代码放到哪个页面就行。 !

3.5K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭