在编辑前端页面的过程中,会有一种效果图叫做轮播,轮播的主要方式是横向的,但是今天我举的例子是类似轮播的纵向动态切换图片。
一、基础知识储备如下:
1、获取浏览器以及页面的宽高信息
获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();
2、获取滚动条的相关信息
获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
3、获取当前元素的偏移信息
获取当前元素相对于body顶部的偏移信息 :$(selector).offset().top
获取当前元素相对于body左侧的偏移信息 :$(selector).offset().left
4、动画效果实现页面滚动
var scroll_offset = $(selector).offset(); //得到selector的offset,包含两个值,top和left
$("body,html").animate({
scrollTop:scroll_offset.top //让body的scrollTop等于selector的top,就实现了滚动
},动画持续的时间);
【注】动画持续时间用 100 1000 等类似的整数表示。
【注】用alert()方法弹出的方式可以看到值,但是用console.log()打印出来的则是一个很复杂的对象。
二、举例说明
实现纵向的div界面切换效果。
方法:1、给div绑定一个id 为 one
2、搭建滚动效果的函数
function getTop() {
var top = $("#one").offset().top;
$("body,html").animate({
scrollTop: top
},500);
}
3、编辑事件触发函数
$("a").click(function(){
getTop(); // 调用该函数,实现对应效果
//业务逻辑代码......
});