网页特效之屏幕滑动
阎烨
效果：点击任意一个li选项，滑动到相对应的屏幕页面
思路：
布局：对于每个li铺满整个浏览器可视区域，必须让其父级宽高都为100%;
js: 使用for循环，对每一个li(属于ol盒子)点击时，使用定时器和window.scrollTo()方法实现内容滑动一个屏幕;
关键知识：index索引号的使用,定时器setInterval,scrollTo()
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屏幕滑动</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,ol {
list-style: none;
}
html,body,.box,ul,ul li{
width: 100%;
height: 100%;
}
ul li{
/*background-color: pink;*/
}
.ol {
width: 200px;
position: fixed;
top: 100px;
left: 200px;
}
.ol li{
width: 40px;
height: 40px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul>
<li>首页</li>
<li>风格</li>
<li>官网</li>
<li>作品</li>
</ul>
<ol class="ol">
<li>首页</li>
<li>风格</li>
<li>官网</li>
<li>作品</li>
</ol>
</div>
</body>
<script src="my.js"></script>
<script>
var box = $("box");
var ulLis = box.children[0].children;
var olLis = box.children[1].children;
var colors = ["pink","blue","green","red","purple"];
var leader=0,target=0,timer=null;
for(var i=0;i<ulLis.length;i++){
ulLis[i].style.backgroundColor = colors[i];
olLis[i].style.backgroundColor = colors[i];
olLis[i].index = i;//记录当前索引号
olLis[i].onclick = function(){
target = ulLis[this.index].offsetTop;//关键语句,给目标位置赋值
timer = setInterval(function(){
leader = leader + (target - leader)/10;
window.scrollTo(0,leader);
console.log(window.scrollTop);
},30)
}
}
</script>
</html>my.js文件：
function $(id){
return document.getElementById(id);
}
function scroll(){
if(window.pageYOffset != null){
//ie9+和各种最新浏览器，注意：为什么使用！=null,因为加载完页面pageYOffset就是0
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}else if(document.compatMode == "CSS1Compat"){
//不是怪异模式(即声明了DTD)
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}else{
//怪异模式(未声明DTD)
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
}具体效果可见：屏幕滑动
类似资料：