根据div.full来进行触发滚动事件,本示范屏高小于780像素滚动自动失效。
DIV:
<div class="full"></div>必须一个以上。
JS:
var h = $(window).height();
var cur = 0;
$(function(){
var sider = "";
for (var j = 0; j < $(".full").length; j++) {
sider = sider + "<li></li>";
}
if (h > 780) {
$(".full").height(h);
if ($(".full").length > 0) {
$("body").append("<ul class='sider-left'>" + sider + "</ul>");
$(".sider-left").css({
position: "fixed",
left: "3em",
top: 268,
zIndex: 1000
});
$(".sider-left li").css({
width: 20,
height: 20,
marginBottom: 10,
borderRadius: "50%",
border: "2px solid #888",
cursor: "pointer"
});
cur = Math.ceil($(window).scrollTop() / $(window).height());
mov(cur);
$(".sider-left li").click(function () {
mov($(this).index())
})
}
} else {
$(".full").height(780);
}
})
var doScroll = true;function mov(i) {
$(".sider-left li").css("background", "none");
$(".sider-left li").eq(i).css("background", "#888");
$("html,body").stop();
$("html,body").animate({
scrollTop: $(".full").eq(i).offset().top
}, 800, function () {
doScroll = true;
})
}
$(document).on("mousewheel DOMMouseScroll", function (e) {
if (doScroll) {
doScroll = false;
var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
if (delta > 0) {
cur = cur - 1;
if (cur < 0) cur = 0;
} else if (delta < 0) {
cur = cur + 1;
if (cur >= $(".full").length) cur = $(".full").length - 1;
}
setTimeout(mov(cur), 2000);
}
});
$(document).keydown(function (event) {
if (event.keyCode == 38) {
cur = cur - 1;
if (cur < 0) cur = 0;
} else if (event.keyCode == 40) {
cur = cur + 1;
if (cur >= $(".full").length) cur = $(".full").length - 1;
}
$("html,body").stop();
mov(cur);
});
示范模板:jhs |