<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分享侧边栏 css3</title>
<style>
html,body,div,span{
padding: 0;
margin: 0;
}
.shareContent{
width: 100px;
height: 200px;
background: #f5f5f5;
}
.shareTitle{
width: 30px;
height: 60px;
position: absolute;
top: 50%;
left: 100px;
margin-top: -30px;
background: yellow;
display: block;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.shareModel{
width: 130px;
height: 200px;
position: absolute;
top: 50%;
left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="shareModel" id="shareModel">
<div class="shareContent" id="shareContent"></div>
<label class="shareTitle" id="shareTitle">分享</label>
</div>
<script>
window.οnlοad=function(){
var timer=null;//定时器
var slideTime=30;//30ms一帧
var shareModel=document.getElementById('shareModel');
function slideModelFunc(slideWidth,speed){
clearInterval(timer);//防止多次点击增加多个定时器
timer=setInterval(function(){
var offWidth=shareModel.offsetLeft;//标题所在的pane移动的距离
if(offWidth==slideWidth){//指定宽度停止运动，这里使用clearinterval清除timer
clearInterval(timer);
return false;
}else{//未到达宽度继续运动，通过改变样式中的属性position:absolute;距离left的距离（本demo在css样式中设置的是left=0）
shareModel.style.left=offWidth+speed+'px';
}
},slideTime);
}
shareModel.οnmοuseοver=function(){
slideModelFunc(0,10);
};
shareModel.οnmοuseοut=function(){
slideModelFunc(-100,-10);
};
}
</script>
</body>
</html>
转载于:https://my.oschina.net/firstnum/blog/724033
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
