                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /用JavaScript实现图片缓慢缩放效果

js无法形成连续移动的效果，求解

有高人能指点下吗？

如下为js部分的代码，可是无法形成连续右移效果：

window.onload = function(){

var img = document.getElementById("myImage");

var btn = document.getElementById("btn");

//绑定点击事件

btn.onclick = function(){

imgSlide(); //点击按钮时执行滑动函数

}

var maxLeft = 700;//向右滑动的极限值

var imgLeft=img.offsetLeft;

//实现滑动函数

function imgSlide(){

var endLeft=300; //每次点击后向右滑动300px

var slideTimer = setInterval(function(){

//现在距离左边的距离

if(imgLeft < endLeft){

if(imgLeft < maxLeft){

//将图片的左偏移（left值）增加20px，注意单位

img.style.left=(imgLeft+20)+'px'

}

else{

clearInterval(slideTimer);

alert("已经移动到最右边");

}

else{

clearInterval(slideTimer);

}

},10);

}

小室友

2015-02-25

源自：用JavaScript实现图片缓慢缩放效果 5-1

关注问题我要回答

1107

操作

收起

2 回答

法王2024
2015-02-25

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>移动测试</title>
</head>

<body>
The content of the document......
<div style="padding:20px; width:10px; background:red; position:absolute" id="myImage"></div><button id="btn" style="padding:10px">move</button>
</body>
<script type="text/javascript">
window.onload = function(){
    var img = document.getElementById("myImage");
    var btn = document.getElementById("btn");
    //绑定点击事件
    var maxLeft = 700;//向右滑动的极限值
    //实现滑动函数
    function imgSlide(){
        var imgLeft=img.offsetLeft;
        var endLeft=imgLeft+300;   //每次点击后向右滑动300px 
        var  slideTimer = setInterval(function(){
            //现在距离左边的距离
            if(imgLeft < maxLeft){
                if(imgLeft < endLeft){
                    //将图片的左偏移（left值）增加20px，注意单位
                    img.style.left=(imgLeft+20)+'px' ;
                    imgLeft+=20;      
                }else{
                    clearInterval(slideTimer);
                }
            }else{
                alert("已经移动到最右边");
                clearInterval(slideTimer);
            }
        },100);
    }
    btn.onclick=function(){
        imgSlide(); //点击按钮时执行滑动函数
    }
}
</script>
</html>