jquery.mousewheel.js

最新推荐文章于 2024-03-21 09:57:25 发布
最新推荐文章于 2024-03-21 09:57:25 发布
阅读量566 收藏
点赞数
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<style type="text/css">
 body{padding:0;margin:0; overflow:hidden }
  ul{list-style:none;}
  .div_01,.div_02,.div_03,.div_04{width:100%;margin:0 auto; text-align: center;}
  .div_01{background: #b20909;}
  .div_02{background: #0941b2;}
  .div_03{background: #2db209;}
  .div_04{background: #b29c09;}
  .left_fixed{position:fixed;width:15px; height:100px; left:100px;top:200px;z-index:999;}
  .left_fixed ul li{background:#000;cursor:pointer;width:15px;height: 15px;border-radius:15px;margin-bottom: 10px;}
  .left_fixed ul li.active{background:#fff;}
</style>
</head>
<body>
 <div class="content">
    <div class="div_01"></div>
    <div class="div_02"></div>
    <div class="div_03"></div>
    <div class="div_04"></div>
  </div>
  <div class="left_fixed">
    <ul>
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
<script>
var i=0;//翻屏变量，初始第一屏
var s = 0; //该变量作用是鼠标滑轮一直向下或者向上滑动时出现抖动现象
$(function(){
  var starttime = 0,endtime = 0;
  $("body").mousewheel(function(event, delta) {
    starttime = new Date().getTime(); //记录翻屏的初始时间
    if (delta < 0&& i>=0 && i<=2) { 
      if (s>=0&&(starttime == 0 || (endtime - starttime) <= -500)) { //在500ms内执行一次翻屏
        s=1;
        i++;
        renderPage(i,true); //翻屏函数
        endtime = new Date().getTime(); //记录翻屏的结束时间
      }
    } else if (delta > 0&& i>=1&&s==1&& (starttime == 0 || (endtime - starttime) <= -500)) {  
      i--;
      renderPage(i,true);
      endtime = new Date().getTime();           
    }  
  });
  var div_height=$(window).height(); 
  $(".div_01,.div_02,.div_03,.div_04").css({'height':div_height});
  $(window).resize(function(){
 var div_height=$(window).height();
 $(".div_01,.div_02,.div_03,.div_04").css({'height':div_height});
  });
  function renderPage(pageNumber, isScroll){ 
    if (isScroll){
        $('body, html').animate({scrollTop:pageNumber*div_height }, 'slow');
        $(".left_fixed ul li").removeClass("active");
        $(".left_fixed ul li").eq(pageNumber).addClass("active");
      }
     return;
  }
  $(".left_fixed ul li").on("click", function(){ //点击小导航也执行翻屏
    var index = $(this).index();
    renderPage(index, true);
    $(".left_fixed ul li").removeClass("active");
    $(this).addClass("active");
    return false;
  });
})
</script>
<script type="text/javascript" src="js/jquery.mousewheel.js" ></script>
</body>
</html>
暖宝宝兰宝宝
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html鼠标滚轮监听,jQuery - 鼠标滚轮插件jquery.mousewheel.js详解（上下、左右滚动监听）...
weixin_39962758的博客
06-04 1256
1，插件介绍jquery.mousewheel.js是一个用于添加跨浏览器的鼠标滚轮支持的 jQuery插件。2，使用说明(1)使用该插件，只需将 mousewheel事件绑定到一个元素上即可。当然也可以使用类似 jQuery中其他的事件方法写法。下面列出这两种方式：// 方式1：using on$('#my_elem').on('mousewheel', function(event) {con...
jQuery 鼠标滚轮插件 mousewheel
04-27
1.使用方法很简单，仅仅把mousewheel绑定到指定元素上。示例代码如下： // using on $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); // using the event helper $('#my_elem').mousewheel(function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); 2.它提供了两个很有帮助事件mousewheel和unmousewheel来封装了滚轮的事件：使用方法如下： //绑定mousewheel事件 $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); }); //解除mousewheel事件 $('#my_elem').unmousewheel(fn) 3.阻止事件冒泡，如果只想在某个元素上捕捉事件，而不想冒泡到document上，这样浏览器的滚动条就不会发生滚动了。事件代码如下： //阻止冒泡 $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaX, event.deltaY, event.deltaFactor); return false; }); 4.获取滚动的方向,示例代码如下： if (delta > 0) o += ' up (' + delta + ')'; else if (delta 0) o += ' north (' + event.deltaY + ')'; else if (event.deltaY 0) o += ' east (' + event.deltaX + ')'; else if (event.deltaX < 0) o += ' west (' + event.deltaX + ')'; 5.可以通过event.deltaFactor获取滚动的距离，代码如下： $('#my_elem').on('mousewheel', function(event) { console.log(event.deltaFactor); return false; });
jquery 滚轮插件 jquery.mousewheel.js
DevOps海洋的渔夫@专栏
05-01 1436
jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件，那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。 Github地址:jquery-mousewheel 下载jquery.mousewheel的js文件 访问Github之后，主要jquery需要用到这两个js文件。 那么先将项目git clone下来。 ...
鼠标滚轮插件jquery.mousewheel.js的简单使用
C_755028787的博客
05-31 1142
jquery中没有鼠标滚轮事件，那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。 jQuery鼠标滚轮插件是一个jQuery插件，添加了跨浏览器的鼠标滚轮支持和delta标准化。 GitHub主页：https://github.com/jquery/jquery-mousewheel 要使用这个插件，只需将mousewheel事件绑定到一个元素。 它还提供了两个辅助方法，分别称为mousewheel和unmousewheel，它们的作用与jQuery中的其他事件辅助方法一样。
jquery.mousewheel.min.js
12-11
jquery.mousewheel.min.js
jquery.mousewheel整屏图片上下翻滚动态效果.zip
09-22
标题 "jquery.mousewheel整屏图片上下翻滚动态效果.zip" 提供的是一个使用jQuery库实现的鼠标滚轮事件处理程序，特别设计用于实现全屏图片的上下滚动效果。这个项目可能是一个网页应用，用户可以通过鼠标滚轮来浏览...
jquery.mousewheel整屏图片上下翻滚动态效果
06-10
本效果主要采用jquery.mousewheel插件，基于jQuery库的基础之上 特点：代码简洁、易用 使用方法： 1、在你的网页head中引入lanrenzhijia.css样式以及jQuery库 2、将body中的代码部分拷贝到你的网页...
jquery mousewheel.js兼容高版本jq
07-16
《jQuery Mousewheel.js 插件在高版本jQuery中的兼容性及应用》 在现代网页开发中，用户体验成为了至关重要的考量因素。为了提升交互性，许多开发者会利用JavaScript库，如jQuery，来实现丰富的动态效果。其中，...
jquery-mousewheel-3.0.6
07-13
2. 接着，下载或通过CDN链接获取`jquery.mousewheel.js`文件，将其放置在项目目录下。 3. 在HTML文件中引入jQuery和Mousewheel插件，如下所示： ```html <script src="path/to/jquery.js"> <script src="path/to/...
jquery -mousewheel 鼠标滚动插件
01-08
jquery -mousewheel 鼠标滚动插件
jquery常用插件下载
10-08
jquery常用插件，jquery.js, jquery.form.js, jquery.jscrollpane.css jquery.mousewheel.js ......
jquery.mousewheel.js 滚动切换全屏插件，点击tab切换全屏，jquery.fullpage.min.js手机端滚动全屏
chose_DoIt的博客
04-12 956
jQuery - 鼠标滚轮插件jquery.mousewheel.js详解（上下、左右滚动监听） 1，插件介绍 jquery.mousewheel.js 是一个用于添加跨浏览器的鼠标滚轮支持的 jQuery 插件。 GitHub主页：https://github.com/jquery/jquery-mousewheel 2，使用说明 （1）使用该插件，只需将 mousewheel 事件绑定到...
jQuery 鼠标滚轮插件 jquery.mousewheel.js的基本使用
flame_007的博客
02-13 5850
jquery.mousewheel.js 是一个用于添加跨浏览器的鼠标滚轮支持的 jQuery 插件。 一、使用该插件，需要把 mousewheel 事件绑定到一个元素上即可。当然也可以使用类似 jQuery 中其他的事件方法写法。 例如： // 方式1：using on $('#某个元素').on('mousewheel', function(event) {     console.l...
项目总结 - jquery.mousewheel.js实际应用
qq_27680431的博客
12-01 815
jquery.mousewheel.js的实际应用，鼠标滚轮控制div滚动，模拟滚动条效果
推荐开源项目：jQuery Mousewheel - 精准控制滚动事件
最新发布
gitblog_00035的博客
03-21 450
推荐开源项目：jQuery Mousewheel - 精准控制滚动事件 项目地址:https://gitcode.com/jquery/jquery-mousewheel jQuery Mousewheel 是一个轻量级的jQuery插件，专门用于处理鼠标滚轮触发的事件。如果你在开发Web应用时需要对页面滚动有更精细的控制，那么这个项目值得你关注。 项目简介 jQuery Mousewheel 插...
jQuery-mousewheel 整屏滚动
qq_33840688的博客
07-21 391
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery-mousewheel.js"&g.
jQuery Mousewheel 基本使用
u013590356的专栏
02-08 9406
jQuery Mousewheel提供了对鼠标滚轮事件的支持。 现对其基本使用做简单介绍。具体参考以下代码： $(document).ready(function(){ $("div").mousewheel(function(event,delta){ //鼠标位置信息 $("span").append("event.pageX="+event.pageX +"");
luckysheet提示$(...).mousewheel is not a function
07-20
<script src="https://cdn.jsdelivr.net/npm/jquery-mousewheel@3.1.13/jquery.mousewheel.min.js"> ``` 请确保该代码在加载 Luckysheet 之前被引入。 另外，还要确保 `mousewheel` 插件的版本与你使用的 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值