jquery.mousewheel.js 滚动切换全屏插件，点击tab切换全屏，jquery.fullpage.min.js手机端滚动全屏

最新推荐文章于 2023-02-26 12:59:50 发布

Do_It_Better

最新推荐文章于 2023-02-26 12:59:50 发布

阅读量929

点赞数

分类专栏：功能实现 JQuery

本文链接：https://blog.csdn.net/chose_DoIt/article/details/105477163

版权

功能实现同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JQuery

12 篇文章 0 订阅

订阅专栏

jQuery - 鼠标滚轮插件jquery.mousewheel.js详解（上下、左右滚动监听）

1，插件介绍
jquery.mousewheel.js 是一个用于添加跨浏览器的鼠标滚轮支持的 jQuery 插件。
GitHub主页：https://github.com/jquery/jquery-mousewheel

2，使用说明
（1）使用该插件，只需将 mousewheel 事件绑定到一个元素上即可。当然也可以使用类似 jQuery 中其他的事件方法写法。下面列出这两种方式：

// 方式1：using on
$('#my_elem').on('mousewheel', function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});
 
// 方式2：using the event helper
$('#my_elem').mousewheel(function(event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

（2）事件对象中可以获取如下三个属性值：
deltaX：值为负的（-1），则表示滚轮向左滚动。值为正的（1），则表示滚轮向右滚动。
deltaY：值为负的（-1），则表示滚轮向下滚动。值为正的（1），则表示滚轮向上滚动。
deltaFactor：增量因子。通过 deltaFactor * deltaX 或者 deltaFactor * deltaY 可以得到浏览器实际的滚动距离。

（3）如果想要对整个窗口进行滚轮事件监听，可以将监听添加在 window 上。
1
2
3
$(window).mousewheel(function(event) {
   console.log(event.deltaX, event.deltaY, event.deltaFactor);
});

3，使用样例
（1）效果图
黄色的 div 方块使用绝对定位放置在页面中。
当我们鼠标移动到方块上时，通过上下滚动滚轮可以控制方块上下移动。而左右滚动滚轮可以控制方块的左右移动。
原文:jQuery - 鼠标滚轮插件jquery.mousewheel.js详解（上下、左右滚动监听）

（2）样例代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hangge.com</title>
    <script src="jquery-3.1.1.js"></script>
    <script src="jquery.mousewheel.js"></script>
    <style>
      #cube {
          width: 150px;
          height: 150px;
          position: absolute;
          top: 10px;
          left: 65px;
          background: yellow;
          opacity: 0.5;
      }
    </style>
    <script type="text/javascript">
      $(function() {
        //使用on监听滚轮事件
        $('#cube').on('mousewheel', function(event) {
            //输出滚轮事件响应结果
            console.log(event.deltaX, event.deltaY, event.deltaFactor);
            //上下滚动时让鼠标垂直移动
            var newTop = $(this).position().top - event.deltaY + "px";
            $(this).css("top", newTop);
            //左右滚动时让鼠标水平移动
            var newLeft = $(this).position().left + event.deltaX + "px";
            $(this).css("left", newLeft);
        });
      });
    </script>
  </head>
  <body>
    <div id="cube"></div>
  </body>
</html>

原文出自：www.hangge.com  转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1863.html

项目使用：滚动全屏切换，点击tab切换全屏


var curIndex = 0
var isChangingFrame = false
var tolFrame = 6

var frameSpeed = 1000

function setFrames () {
  curIndex = 0
  $('#menu li').each(function (i) {
    $(this).click(function () {
      if (curIndex == i) {
        return false
      }
      if (isChangingFrame) return false
      isChangingFrame = true
      $('#menu li').removeClass('active')
      $('#menu li').eq(i).addClass('active')
      $('.frame-main').eq(curIndex).fadeOut(frameSpeed)
      $('.frame-main').eq(i).fadeIn(frameSpeed)
      // console.log(i)
      // if (i == 0) {
      //   $('.showNext').fadeIn()
      // } else {
      //   $('.showNext').fadeOut()
      // }
      curIndex = i
      setTimeout(function () {
        isChangingFrame = false
      }, frameSpeed)
      return false
    })
  })
  $('.showNext').click(function () {
    showNextFrame(-1)
    return false
  })
}



function setMouseWeel () {
  $('.container').on('mousewheel', function (event) {
    console.log(event.deltaX, event.deltaY, event.deltaFactor)
    if (isChangingFrame) return
    showNextFrame(event.deltaY)
  })
}

function showNextFrame (dir) {
  // console.log(dir)
  if (dir < 0) {
    if (curIndex < (tolFrame - 1)) {
      console.log('show Next frame')
      $('#menu li').eq(curIndex + 1).click()
    }
  } else {
    if (curIndex > 0) {
      console.log('show Prev frame')
      $('#menu li').eq(curIndex - 1).click()
    }
  }
}

<ul id="menu">
						<li class="indexBtn"><a href="#index" title="首页"></a></li>
						<li class="supermanBtn"><a href="#index" title="故事"></a></li>
						<li class="friendshipBtn active"><a href="#index" title="羁绊故事"></a></li>
						<li class="peopleBtn"><a href="#index" title="专区"></a></li>
					</ul>

jquery.fullpage.min.js手机端滚动全屏

$('#fullpage').fullpage({
          afterLoad(anchorLink, index) {
            if (index == '5') {
              $('.nextPage_btn').attr('src', '')
            } else {
              $('.nextPage_btn').attr('src', '{$pt_url}/new_plat/images/yxxq_3/1845/wap/down.png')
            }
          },
        });


  $('.catalogWrapper ul li').click(function (argument) {
    $.fn.fullpage.moveTo( $(this).index()+1);
  })

Do_It_Better

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.mousewheel.js 滚动切换全屏插件，点击tab切换全屏，jquery.fullpage.min.js手机端滚动全屏

jQuery - 鼠标滚轮插件jquery.mousewheel.js详解（上下、左右滚动监听）1，插件介绍jquery.mousewheel.js 是一个用于添加跨浏览器的鼠标滚轮支持的 jQuery 插件。GitHub主页：https://github.com/jquery/jquery-mousewheel2，使用说明（1）使用该插件，只需将 mousewheel 事件绑定到...
复制链接

扫一扫