js运动之"伸缩分享界面"
2018-01-16 本文已影响0人
RL空RLR空L
cccc.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 100px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
position: absolute;
left: -100px;
text-align: center;
}
#div1 span {
position: absolute;
width: 20px;
height: 80px;
line-height: 20px;
background: #cccccc;
right: -20px;
top: 60px;
}
#div1 a {
line-height: 31px;
}
</style>
<script>
window.onload=function () {
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function(){
startMove(0);
};
oDiv.onmouseout=function(){
startMove(-100);
};
};
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1');
//点击前先清除定时器，防止每点击一次就启动一次定时器
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(oDiv.offsetLeft>iTarget){
speed=-10;
}
else{
speed=10;
}
if(oDiv.offsetLeft==iTarget){
clearInterval(timer);
}
else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<span>我要分享</span>
<a href="javascript:;">QQ空间</a>
<br>
<a href="javascript:;">朋友圈</a>
<br>
<a href="javascript:;">新浪微博</a>
<br>
<a href="javascript:;">腾讯微博</a>
<br>
<a href="javascript:;">百度贴吧</a>
<br>
<a href="javascript:;">人人网</a>
</div>
</body>
</html>
