HTML代码
<!DOCTYPE html>
<html>
<head>
<title>shareSport.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#div1{width:150px;height: 200px;background:#ECC;position:absolute;border-radius:5px;left:-150px;top:100px}
#div1 span{position: absolute;width:20px;height:60px;line-height:20px;background:#CEE;top:70px;left:150px;border-radius:5px;font-family:cursive;}
</style>
<script type="text/javascript" src="../js/shareSport.js"></script>
</head>
<body>
<div id="div1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<span>分享到</span>
</div>
</body>
</html>
js文件代码
window.onload = function(){
var div = document.getElementById('div1');
var timer = null;
div.onmouseover = function(){
shareSport(0);
}
div.onmouseout = function(){
shareSport(-150);
}
function shareSport(address){
var speed = 0;
if(address < 0){
speed = -10
}else{
speed = 10;
}
clearInterval(timer);
timer = setInterval(function(){
if(div.offsetLeft == address){
clearInterval(timer);
}else{
div.style.left = div.offsetLeft+speed+'px';
}
},10);
}
}
扫一扫
1703
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
