让鼠标横向滚动插件

最新推荐文章于 2024-08-09 08:26:24 发布
最新推荐文章于 2024-08-09 08:26:24 发布
阅读量173 收藏
点赞数
https://github.com/gztrljh
本文链接：https://blog.csdn.net/ljh101/article/details/109272925
版权 
https://github.com/jquery/jquery-mousewheel
jquery-mousewheel-master

演示案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header {
            width: 1200px;
            height: 50px;
            border: 1px solid red;
            display: flex;
            overflow-x: auto;
            overflow-y: hidden;

            /* IE */
            -ms-overflow-style: none;
            /* 火狐 */
            scrollbar-width: none;
        }

        .a {
            flex-shrink: 0;
            width: 500px;
            height: 50px;
            border: 1px solid #e7e7e7;
            text-align: center;
            line-height: 50px;
        }

        /* 谷歌 */
        header::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <div class="a">
            商城
        </div>
        <div class="a">
            商城
        </div>
        <div class="a">
            商城
        </div>
        <div class="a">
            商城
        </div>
        <div class="a">
            商城
        </div>
        <div class="a">
            商城
        </div>
        <div class="a">
            商城
        </div>
        <div class="a">
            商城
        </div>
        <div class="a">
            商城
        </div>

        <div class="a">
            商城
        </div>

        <div class="a">
            商城
        </div>

        <div class="a">
            商城
        </div>

        <div class="a">
            商城
        </div>

        <div class="a">
            商城
        </div>



    </header>
    <main>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
        <h1>nihao</h1>
    </main>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-mousewheel/3.1.9/jquery.mousewheel.min.js"></script>
    <script>
        $(function () {

            $("header").mousewheel(function (event, delta) {

                this.scrollLeft -= (delta * 90);

                event.preventDefault();

            });

        });
    </script>
</body>

</html>
「已注销」
关注
横向滚动鼠标插件Horwheel.zip
07-05
横向滚动鼠标插件Horwheel是一款鼠标滚轮横向滚动插件特效。
横向滚动鼠标插件Horwheel
07-29
Horwheel是一个插件让您的鼠标滚轮支持横向滚动。这是跨浏览器兼容的。演示地址:http://www.jq22.com/jquery-info524
横向滚动插件
weixin_34074740的博客
03-25 146
(function ( $ ) { $.fn.ilscroll=function(options){ var settings = $.extend({ s:45 }, options ); $this=this; $children=this.children(); $par...
推荐一款Vue.js的无缝滚动插件：vue-seamless-scroll
最新发布
gitblog_00652的博客
08-09 872
推荐一款Vue.js的无缝滚动插件：vue-seamless-scroll vue-seamless-scroll :beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component项目地址:https://gitcode.com/gh_mirrors/vu/vue-seamless-scroll 在网页设计中，流畅的滚动效果往...
BetterScroll：可能是目前最好用的移动端滚动插件
weixin_34381666的博客
09-12 492
作者：滴滴webapp架构组-付楠 BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件（GitHub地址），适用于滚动列表、选择器、轮播图、索引列表、开屏引导等应用场景。 为了满足这些场景，它不仅支持惯性滚动、边界回弹、滚动条淡入淡出等效果的灵活配置，让滚动更加流畅，同时还提供了很多 API 方法和事件，以便我们更快地实现滚动场景下的需求，如下拉刷新、上拉加载。 由于它基于原...
鼠标滚轮插件
weixin_30929195的博客
12-19 89
在做视觉差幻灯片时，为了美观需要将滚动条隐藏掉，没有滚动条就无法出发scroll()事件，所以可以使用鼠标滚轮事件来代替。 使用原生的js鼠标滚轮事件会有兼容性问题，为jQuery也没有实现鼠标滚轮事件，有一款不错的jQuery插件可以弥补 文档:https://github.com/jquery/jquery-mousewheel 实例：http://sandbox.runjs.cn/s...
横向滚动鼠标插件Horwheel特效代码
03-20
【横向滚动鼠标插件Horwheel特效代码】是一个针对网页交互体验优化的JavaScript插件，它允许用户通过鼠标滚轮实现页面水平方向上的滚动，而非传统的垂直滚动。这种效果在一些特殊设计的网页或数据展示场景中非常有用...
鼠标滚轮控制网页横向移动实现思路
09-05
当我们改变这个值时，浏览器会相应地调整元素的可视区域，从而实现横向滚动。 在给定的描述中提到，必须使用`window`而不是`body`来设置`scrollLeft`，这是因为`window`对象代表了整个浏览器窗口，包括边栏、工具栏...
PC端横向滚动视觉差效果
03-26
在本案例中，我们关注的是"PC端横向滚动视觉差效果"，这是一种在个人电脑平台上通过鼠标滚轮实现的特殊滚动效果，能够让用户在水平方向上浏览内容，同时产生视觉上的立体感。 实现这种效果通常涉及到以下几个关键...
jquery -mousewheel 鼠标滚动插件
01-08
jquery -mousewheel 鼠标滚动插件
vue3-seamless-scroll 自动横向滚动 滚动插件
linx_i的博客
05-15 3847
Vue3.0 无缝滚动组件，支持Vite2.0，支持服务端打包目前组件支持上下左右无缝滚动，单步滚动，并且支持复杂图标的无缝滚动，目前组件支持平台与Vue3.0支持平台一致。
jQuery 鼠标滚轮插件 mousewheel
04-16
NULL 博文链接：https://liuna718-163-com.iteye.com/blog/1796887
实用的jquery横向无限循环滚动插件
12-28
自动无限传送带 Automatic Infinite Carousel ~
jQuery横向和纵向内容滚动插件Sly
01-05
jQuery横向和纵向内容滚动插件Sly，已经测试，还算不错
fullpage.JS横向滑屏插件 onepage-scroll.JS
11-30
基于fullpage.JS 我们可以做出很多滑屏效果，但是，在我们公司qietu.com的项目中碰到一个项目需要横向滑动，最终锁定到了这一款插件。 onepage-scroll.JS
【vue】vue-slick-carousel插件，实现横向滚动列表手动左右滚动（也可设置为自动滚动）
花椒和蕊的博客
12-03 2373
在npm官网搜vue-slick-carousel，查看更详细的配置。1、VueSlickCarousel 一定要设width: 100%如果设置了箭头展示，而页面中没有左右箭头，可能是样式影响了。2、carouselOptions具体配置项。3、allFlowArr要展示的内容数组。
滚动插件
renxingxingge的专栏
04-08 474
<br />用法：在需要滚动的的地方加上scrollDiv id 可以是任何标签，在此标签的下面必须是ul 和li 滚动的ul下的li<br /> <br /> <script type="text/javascript"><br />         (function ($) {<br />             jQuery.fn.extend({<br />                 Scroll: function (opt, callback) {<br />          
vue橱窗横向滚动组件
weixin_41171651的博客
02-01 451
【代码】vue橱窗横向滚动组件。
滚动插件【better-scroll】
aoteman_web的博客
12-03 927
使用better-scroll实现界面滚动效果
jquery设置区域内滑动鼠标横向滚动
08-10
要使用 jQuery 设置区域内滑动鼠标横向滚动，你可以使用以下代码： ``` $(document).ready(function() { $('#your-element').mousemove(function(e) { // 获取鼠标滚动事件 var scroll = e.originalEvent....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值