<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>全屏切换效果</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } html { overflow-x: hidden; } ul li { list-style: none; } ul { position: fixed; right: 5px; top: 50%; } ul li { margin: 5px 0; width: 15px; height: 15px; border-radius: 50%; background: white; cursor: pointer; } .active { background: red; } </style> </head> <body> <div>我是内容1</div> <div>我是内容2</div> <div>我是内容3</div> <div>我是内容4</div> <div>我是内容5</div> <ul> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> <script type="text/javascript"> var viewWidth = $(window).width(); //获取屏幕可视宽 var viewHeight = $(window).height(); //获取屏幕可视高 var arr = ['yellow', 'red', 'blue', 'black', 'pink']; $('div').css({ width: viewWidth, height: viewHeight }); $('div').each(function(i, v) { $(v).css('background', arr[i]); }) $(window).scroll(function() { var index = Math.floor(($(document).scrollTop() + viewHeight / 2) / viewHeight); $('li').eq(index).attr('class', 'active').siblings().attr('class', ''); }) $('li').click(function() { //$(document).scrollTop($(this).index()*viewHeight); var H = $(this).index() * viewHeight; $('html,body').animate({ scrollTop: H }, 800); }); </script> </body> </html>
