<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Examples</title>
<style type="text/css">
*{margin:0;padding:0;}
#box1{width:120px;height:200px;background:pink;position:relative;left:-120px;top:200px;}
#box2{font-size:14px;color:#fff;background:red;position:relative;left:120px;top:100px;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">我是广告</div>
</div>
<script type="text/javascript">
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var times=null;
var time=10;
var left=0;
box2.onmouseover = function(){
over();
}
box2.onmouseout = function(){
out();
}
function over(){
if(times)clearInterval(times);
times = setInterval(function(){
var leftDome = parseInt(getStyle(box1,'left'));
if(leftDome==left){
clearInterval(times);
}else{
box1.style.left = leftDome+time+'px';
}
},1000/13)
}
var time=-10;
var left=-120;
function out(){
if(times)clearInterval(times);
times = setInterval(function(){
var leftDome = parseInt(getStyle(box1,'left'));
if(leftDome==left){
clearInterval(times);
}else{
box1.style.left=time+leftDome+'px';
}
},1000/13)
}
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
</script>
</body>
</html>
怎么鼠标都无法执行,有没报错
相关分类