您的位置：首页 > Web前端 > JavaScript

js实现一个div缓缓移动到某一个位置再缓缓回到原来位置

2017-08-07 19:08 676 查看

这是js中onmouseover 和onmouseout 的一个练习题，前几天写的，写出来后div却频频抖动，和同学一起研究解决了这个问题。

现在我把代码贴出来，希望可以帮到遇到同样问题的童鞋！

效果图大致如下：

代码如下：

<style>



#father{

width: 150px;

height: 200px;

position: absolute;

background: blue;

top:100px;

left:-150px;

}

#son{

width: 20px;

height: 80px;

background: green;

color:white;

position: absolute;

top:60px;

left:150px;

}

</style>

<body>



<div id="father">

<div id = "son">分享到</div>

</div>

<script>

window.onload = function(){

var ofa = document.getElementById("father");

var oson = document.getElementById("son");

var change=null;

function move(speed){

clearInterval(change);

change=setInterval(function(){

if(speed>0){

if(ofa.offsetLeft>-1 ){

clearInterval(change);

}else{

ofa.style.left=ofa.offsetLeft+speed+'px';

}

}else{

if(ofa.offsetLeft<-149){

clearInterval(change);

}else{

ofa.style.left=ofa.offsetLeft+speed+'px';

}

}

},30)



}

ofa.onmouseover=function(){

move(10);

}

ofa.onmouseout=function(){

move(-10);

}

/*ofa.onmouseover = function(e){

if (!e) e = window.event;

var reltg = e.relatedTarget ? e.relatedTarget : e.fromElement;

while (reltg && reltg != this) reltg = reltg.parentNode;

if (reltg != this) {



clearInterval(change);

change = setInterval(function(){

var vashed = 10;

if(ofa.offsetLeft>-10){

clearInterval(change);

}else{

ofa.style.left = ofa.offsetLeft+vashed +"px";

}

},30)

}

}

ofa.onmouseout = function(e){



if (!e) e = window.event;

var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;

while (reltg && reltg != this) reltg = reltg.parentNode;

if (reltg != this) {

// clearInterval(transform);

transform = setInterval(function(){

var chased =-10;

if(ofa.offsetLeft<-140){

clearInterval(transform);

}else{

ofa.style.left = ofa.offsetLeft+chased +"px";

}

},30)

}

}*/



}

</script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript web前端开发

相关文章推荐

新的分享

章节导航