为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我左边移动的时候出现BUG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<!--页面布局-->
    <!--图片相关属性设置-->
    
    <img style="position:absolute;left:0;top:0" src="./mynameyy.jpg" id="myImage" />
<!--滑动按钮设置-->
<input type ="button" id="btnright" value="向右滑动" style="margin-top:250px;"/>
<input type ="button" id="btnleft" value="向左滑动" style="margin-top:250px;"/>
</div>
<script>
    window.onload = function(){
        var img = document.getElementById("myImage");
        var btnright = document.getElementById("btnright");
        var btnleft=document.getElementById("btnleft");
        
        //绑定点击右移事件
        btnright.onclick = function(){
            imgSlideRight();    //点击按钮时执行滑动函数
        }
        //绑定点击左移事件
        btnleft.onclick=function(){
            imgSlideLeft(); //点击按钮时执行滑动函数
        }
        
        var maxLeft = 700;//向右滑动的极限值
        //var maxRight= 800;//向左划
        //实现滑动函数
            //得到网页的宽度
            var bodyWidth=document.body.clientWidth; 
            //得到图片的宽度
            var imgWidth=parseInt(img.width);
        
            
            alert(endRight);
        function imgSlideRight(){
            var endLeft=img.offsetLeft + 200; 
            var slideTimer = setInterval(function(){
            var imgLeft=img.offsetLeft;      //现在距离左边的距离
            //得到图片现在距离右边的距离
            var imgRight=parseInt(bodyWidth-endLeft-imgWidth);
                //alert(imgRight);
                if(imgLeft < endLeft){
                    if(imgRight>0){
                    //将图片的左偏移(left值)增加20px,注意单位
                    img.style.left=imgLeft+20+'px';
                    }else{
                    alert("已经到了最大值,不能在移动了");
                //终止定时器函数
                    clearInterval(slideTimer);    
                    }
                }else{
                clearInterval(slideTimer);    
                }
            },20);    
        }
    
        function imgSlideLeft(){
        //每一次左移多少
        //var imgRight=parseInt(bodyWidth-endLeft-imgWidth);
            var imgLeft=img.offsetLeft; 
            var endLeft=img.offsetLeft-200; 
            //alert(endLeft);
            var slideTimer=setInterval(function(){
                img.style.left=parseInt((imgLeft-200))+'px'
            },20);
        }
        
    }
</script>
</body>
</html>


正在回答

2 回答

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<!--页面布局-->
    <!--图片相关属性设置-->
    
    <img style="position:absolute;left:0;top:0" src="./mynameyy.jpg" id="myImage" />
<!--滑动按钮设置-->
<input type ="button" id="btnright" value="向右滑动" style="margin-top:250px;"/>
<input type ="button" id="btnleft" value="向左滑动" style="margin-top:250px;"/>
</div>
<script>
    window.onload = function(){
        var img = document.getElementById("myImage");
        var btnright = document.getElementById("btnright");
        var btnleft=document.getElementById("btnleft");
        
        //绑定点击右移事件
        btnright.onclick = function(){
            imgSlideRight();    //点击按钮时执行滑动函数
        }
        //绑定点击左移事件
        btnleft.onclick=function(){
            imgSlideLeft(); //点击按钮时执行滑动函数
        }
        
        var maxLeft = 700;//向右滑动的极限值
        //var maxRight= 800;//向左划
        //实现滑动函数
            //得到网页的宽度
            var bodyWidth=document.body.clientWidth;
            //得到图片的宽度
            var imgWidth=parseInt(img.width);
        
            
            alert(endRight);
        function imgSlideRight(){
            var endLeft=img.offsetLeft + 200;
            var slideTimer = setInterval(function(){
            var imgLeft=img.offsetLeft;      //现在距离左边的距离
            //得到图片现在距离右边的距离
            var imgRight=parseInt(bodyWidth-endLeft-imgWidth);
                //alert(imgRight);
                if(imgLeft < endLeft){
                    if(imgRight>0){
                    //将图片的左偏移(left值)增加20px,注意单位
                    img.style.left=imgLeft+20+'px';
                    }else{
                    alert("已经到了最大值,不能在移动了");
                //终止定时器函数
                    clearInterval(slideTimer);    
                    }
                }else{
                clearInterval(slideTimer);    
                }
            },20);    
        }
    
        function imgSlideLeft(){
            var endLeft=img.offsetLeft-200;
            var slideTimer=setInterval(function(){
                //移动了多少
                 var imgLeft=img.offsetLeft;
                if(imgLeft>endLeft){
                    if(endLeft>0){
                img.style.left=parseInt((imgLeft-20))+'px'
                }else{
                alert("到最左边了,搞不的了");
                clearInterval(slideTimer);
                }
                }else{
                clearInterval(slideTimer);
                }
            },20);
        }
        
    }
</script>
</body>
</html>

1 回复 有任何疑惑可以回复我~

定义的变量没有写在函数里面。只能执行一次定位

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
用JavaScript实现图片缓慢缩放效果
  • 参与学习       32790    人
  • 解答问题       91    个

本课程讲解如何使用JavaScript技术实现图片缩放效果,并分析原理

进入课程

为什么我左边移动的时候出现BUG

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信