在编辑前端页面的过程中,会有一种效果图叫做轮播,轮播的主要方式是横向的,但是今天我举的例子是类似轮播的纵向动态切换图片。
一、基础知识储备如下:
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