<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
#box{width: 120px;height: 180px;background: red;margin-top: 200px;position: relative;left: -120px;}
#box span{position: absolute;width: 20px;height: 80px;background: yellow;left: 120px;top: 50px;}
</style>
</head>
<body>
<div id="box">
<span>推荐更多</span>
</div>
<script type="text/javascript">
var oBox=document.getElementById('box');
var s=document.getElementsByTagName('span')[0];
var w=oBox.offsetWidth;
var t;
oBox.onmouseover=function(){
clearInterval(t);
t=setInterval(moveRight,50,5,0);
}
oBox.onmouseout=function(){
clearInterval(t);
t=setInterval(moveLeft,50,5,-w);
}
function moveRight(speed,end){
l=oBox.offsetLeft;
if (l>=end) {
clearInterval(t);
}else{
oBox.style.left=l+speed+'px';
}
}
function moveLeft(speed,end){
l=oBox.offsetLeft;
if (l<=end) {
clearInterval(t);
}else{
oBox.style.left=l-speed+'px';
}
}
</script>
</body>
</html>
9580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
