代码如下所示:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>页面侧栏动态效果</title>
<style>
*{
padding:0px;
margin:0px;
}
body{
background-color:skyblue;
height:1200px;
}
#sidebar{
position:fixed;
width:130px;
right:0px;
top:50%;
transform:translateY(-50%);
}
#sidebar ul{
list-style:none;
overflow:hidden;
}
#sidebar li{
line-height:30px;
border-bottom:2px solid gray;
position:relative;
background-color:white;
left:100px;
}
#sidebar li a{
text-decoration:none;
display:block;
}
#sidebar li a span{
display:inline-block;
height:30px;
width:30px;
background-color:blue;
color:white;
font-weight:bold;
text-align:center;
}
#sidebar li:hover a span{
background-color:white;
color:blue;
}
#sidebar li:hover a {
background-color:blue;
color:white;
}
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li><a href="#"><span>1</span>第一页</a></li>
<li><a href="#"><span>2</span>第二页</a></li>
<li><a href="#"><span>3</span>第三页</a></li>
<li><a href="#"><span>4</span>第四页</a></li>
<li><a href="#"><span>5</span>第五页</a></li>
<li><a href="#"><span>6</span>第六页</a></li>
<li><a href="#"><span>7</span>第七页</a></li>
<li><a href="#"><span>8</span>第八页</a></li>
<li><a href="#"><span>9</span>第九页</a></li>
<li><a href="#"><span>10</span>第十页</a></li>
<li><a href="#"><span>11</span>第十一页</a></li>
<li><a href="#"><span>12</span>第十二页</a></li>
<li><a href="#"><span>13</span>第十三页</a></li>
</ul>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(function(){
$("#sidebar").hover(function(){
$("#sidebar li").each(function(index){
setTimeout(function(){
$(this).stop().animate({"left":"0px"});
}.bind(this),index*50);
});
},function(){
$("#sidebar li").each(function(index){
setTimeout(function(){
$(this).stop().animate({"left":"100px"});
}.bind(this),index*50);
});
});
});
</script>
</body>
</html>
效果图如下:
相关知识点:
1、PC端默认不使用HTML5标签,例如<aside>标签,因为IE不支持
在<style>中编辑CSS,是一种DHTML风格,DHTML风格为HTML+JS+CSS都写在一个页面中,节约服务器的资源。在页面中代码少的情况下,建议使用该方法。但是在代码多时,建议使用<link>外联
2、使用通配符去除元素的默认内外边距
*{
padding:0px;
margin:0px;
}
即使元素的内外边距使我们需要的,也要去除,因为不同浏览器的兼容性(padding,margin)不同。
但是尽量不要使用*,因为很吃资源,可以设置具体的元素属性。
3、将元素移动到屏幕的左边,方法有浮动、定位、margin
使用margin的方法,如下设置
margin:auto;
margin-right:0px;
4、WEB语义化 ----重点----
5、行内块级元素有input、img、table
6、javascript是一门动态类型、弱类型、基于原型的面向对象编程语言
动态类型:
java中设置int i=0; //确定类型
js中设置var i; //可以为Number、NULL、String等类型
js中,最简单的是特效->数据交互和数据分离->数据结构->设计模式
推荐书籍:you don't know js