<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
#div1{
width: 400px;
height: 100px;
background: #5f5290;
position: relative;
left: -400px;
margin-bottom: 20px;
opacity: 0.3;
}
#div2{
width: 20px;
height: 60px;
background: #8e7dbf;
position: absolute;
right: -20px;
top:20px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">详情</div>
</div>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
div1.onmouseover=function(){
start(0);
changeOpacity(100);
}
div1.onmouseout=function(){
start(-400);
changeOpacity(30);
}
var i=null;
function start(target){
clearInterval(i);
var speed=0;
i=setInterval(function(){
if(div1.offsetLeft<target){
speed=10;
}else{
speed=-10;
}
if(div1.offsetLeft==target){
clearInterval(i)
}else{div1.style.left=div1.offsetLeft+speed+"px";
}
}
,20)
}
var timer=null;
var alpha=30;
function changeOpacity(target){
clearInterval(timer);
var speed=0;
timer=setInterval(function(){
if(alpha<target){
speed=10;
}else{
speed=-10;
}
if(alpha==target){
clearInterval(timer)
}else{
alpha+=speed;
div1.style.opacity=alpha/100;
}},100)
}
}
</script>
</body>
</html>
