<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>淡入淡出效果</title>
<style type="text/css">
#targetDiv
{
width: 150px;
height:200px;
text-align:center;
padding-top:80px;
background: #8a8a8a;
color: #fff;
position:absolute;
opacity: 0;
top:50px;
left:-100px;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
transition: all .5s ease-in;
}
#targetDiv.move
{
left: 10px;
opacity: 1;
}
.btnout,.btnin
{
padding:10px 20px;
background: #ff5a37;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<a href="javascript:;" class="btnout">滑出</a>
<a href="javascript:;" class="btnin">滑入</a>
<div id="targetDiv">
淡入淡出面板
</div>
<script>
(function(){
document.querySelector('body').addEventListener('click',function(e){
if(e.target.className === 'btnin')
{
document.querySelector('#targetDiv').className = 'move';
}
else
{
document.querySelector('#targetDiv').className = '';
}
},false);
})();
</script>
</body>
</html>
效果如图所示
网友评论