<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
a{
color: #000;
text-decoration: none;
}
body{
background: #000;
height: 2000;
}
em{
font-style: normal;
}
#wrap{
width: 160px;
position: fixed;/*固定定位*/
right: 0;
}
#wrap a{
display: block;/*行转块*/
line-height: 30px;
border-bottom:2px solid #ddd ;/*下边框 粗细 样式 颜色*/
background: #fff;
position: relative;/*参照物 找父级*/
padding-left: 34px;
right: -130px;
}
#wrap a em{
display: block;
width: 30px;
height: 30px;
background: #0066cc;
color: #fff;
font-weight: bold;
text-align: center;
position: absolute;/*绝对定位 改变盒子的位置*/
left: 0;
}
#wrap a:hover{
color: #50C3EB;
}
#wrap a:hover em{
background: #459DF5;
}
</style>
</head>
<body>
<div id="wrap">
<a href="#"><em>0</em>HTML</a>
<a href="#"><em>1</em>JAVASCRIP</a>
<a href="#"><em>2</em>JAVA</a>
<a href="#"><em>3</em>ACTIONSCRIPT</a>
<a href="#"><em>4</em>Perl</a>
<a href="#"><em>5</em>PHP</a>
<a href="#"><em>6</em>NODE.JS</a>
<a href="#"><em>7</em>GO</a>
<a href="#"><em>8</em>C#</a>
<a href="#"><em>9</em>C++</a>
<a href="#"><em>10</em>PHP</a>
<a href="#"><em>11</em>ACTION</a>
<a href="#"><em>12</em>SCRIPT</a>
</div>
</body>
</html>
<script type="text/javascript" src="jQuery/jquery-3.1.1.min.js">
</script>
<script type="text/javascript">
/**
*
*/
var timer = null;
$(‘#wrap‘).hover(function(){
//鼠标滑入
var This = $(this);//
timer = setTimeout(function(){
This.find(‘a‘).each(function(i){
var $This = $(this);//当前a
setTimeout(function(){
$This.animate({right:‘0px‘},300);
},i*50);
});
},300);//定时器
},function(){
//鼠标滑出
if(timer){
clearTimeout(timer);
}
This = $(this);//
$(this).find(‘a‘).each(function(i){
var $This = $(this);//当前a
setTimeout(function(){
console.log();
$This.animate({right:‘-130px‘},300);
},i*50);
});
});//鼠标划过
</script>
<!--
a标签 行内元素 不能设置宽高 display: block; 行转块元素 会换行
浮动 定位会使元素脱离文档流
-->
时间： 2024-12-19 08:36:27