JQuery는 페이지 node_jquery로 슬라이딩하는 마우스 휠을 인식합니다.
- WBOY원래의
- 2016-05-16 15:48:361549검색
다음은 JQuery 코드를 통해 마우스 휠이 페이지 노드로 슬라이드되고 디스플레이 렌더링을 통해 모든 사람에게 표시되는 방법을 자세히 소개합니다.
jQuery 마우스 휠을 기반으로 페이지의 노드 부분으로 슬라이드합니다. 이는 마우스 휠이나 제스처를 사용하여 페이지 노드의 일부로 슬라이드하는 jQuery CSS3 기반의 특수 효과입니다. 렌더링은 다음과 같습니다.
구현 코드.
html 코드:
<section class="panel home" data-section-name="home">
<div class="inner">
<header>
<h1></h1>
<p class="tagline">适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.<br><br>不支持IE8及以下浏览器。<br><br><br></p>
</header>
<div style="text-algin:center;margin:10px auto">
<script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br />
<a href="#overview" class="scroll">滑动鼠标滚轮</a>
</div>
</section>
<section class="panel overview" data-section-name="overview">
<div class="inner">
<h2>基本使用</h2>
<p>需要引入 jQuery 1.6+ 以及缓冲动画插件jquery.easing.js.</p>
<pre class="brush:php;toolbar:false">
<! doctype html>
<html>
<head>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>
配置
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
方法
滑动到指定的节点。
$.scrollify("move","#name");
js 코드:
$(function () {
$(".panel").css({ "height": $(window).height() });
var timer;
$(window).resize(function () {
clearTimeout(timer);
timer = setTimeout(function () {
$(".panel").css({ "height": $(window).height() });
}, 40);
});
$.scrollify({
section: ".panel"
});
$(".scroll").click(function (e) {
e.preventDefault();
$.scrollify("move", $(this).attr("href"));
});
});
위 코드는 JQuery를 사용하여 페이지 노드로 슬라이딩되는 마우스 휠을 구현하는 전체 내용입니다. 향후 프로젝트 과정에서 모두에게 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.