<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select</title>
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
display: block;
line-height: 30px;
padding-left: 10px;
color:#333;
}
a:hover{
background: #ccc
}
#contain{
width:200px;
margin:100px auto;
}
cite{
width:188px;
height: 30px;
border:1px solid #888;
padding-left: 10px;
line-height: 30px;
position: relative;
cursor:pointer;
font-style: normal;
display: block;
}
cite:before{
content:'';
position:absolute;
width: 0;
height:0;
border-width: 5px;
border-style:solid;
border-color:#888 #fff #fff #fff;
right:10px;
top:15px;
transition: 0.2s;
transform-origin:50% 25%;
}
#select_body{
width:200px;
height:151px;
position:relative;
overflow: hidden;
}
ul{
width:198px;
border:1px solid #888;
border-top: 0;
position:absolute;
top:-151px;
}
.extended:before{
transform:rotate(180deg);
}
</style>
<script>
window.onload=function(){
var oHead=document.getElementsByTagName('cite')[0];;
var oUl=document.getElementsByTagName('ul')[0];
var aLi=document.getElementsByTagName('li');
var flag=0;
oHead.onclick=function(){
flag=flag+1;
if(flag%2!=0){
return slideDown();
}
else{
return slideUp();
}
}
}
function slideDown(){
var oHead=document.getElementsByTagName('cite')[0];;
var oUl=document.getElementsByTagName('ul')[0];
addClass(oHead,"extended");
startMove(oUl,{top:0});
}
function slideUp(){
var oHead=document.getElementsByTagName('cite')[0];;
var oUl=document.getElementsByTagName('ul')[0];
removeClass(oHead,"extended");
startMove(oUl,{top:-151});
}
function hasClass(obj,cls){
return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
}
function addClass(obj,cls){
if(!hasClass(obj,cls)){
obj.className+=" "+cls;
}
}
function removeClass(obj,cls){
if(hasClass(obj,cls)){
obj.className=obj.className.replace(new RegExp("(\\s|^)"+cls+"(\\s|$)")," ");
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
function startMove(obj,json,fn){
clearInterval(obj.timer);
obj.temer=setInterval(function(){
var bStop=true;
for(var attr in json){
var cur=0;
if(attr=='opacity'){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
cur=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-cur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur!=json[attr]){
bStop=false;
}
if(attr=='opacity'){
obj.style.filter="alpha(opacity:'+cur+peed+')";
obj.style.opacity=(cur+speed)/100;
}
else{
obj.style[attr]=cur+speed+'px';
}
}
if(bStop){
clearInterval(obj.timer);
if(fn){
return fn();
}
}
},30)
}
</script>
</head>
<body>
<div id="contain">
<cite>请选择课程</cite>
<div id="select_body">
<ul>
<li><a href="##" class="select1">PHP</a></li>
<li><a href="##" class="select2">JAVA</a></li>
<li><a href="##" class="select3">HTML</a></li>
<li><a href="##" class="select4">CSS</a></li>
<li><a href="##" class="select5">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>看的我好辛苦。。。
startMove 第二行： obj.temer -> obj.timer