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);
})