码迷,mamicode.com
首页 > 其他好文 > 详细

实现图片向左滑动

时间:2015-09-13 19:53:39      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:

<body>
<!--页面布局,图片左上边距设为0,设置绝对定位,给按钮足够的上边距,以免被覆盖-->
    <div>
        <img src ="wolf.jpg" id = "image" style = "position:absolute;top:0;left:0px"/>
        <input type = "button" id = "slide" style= "margin-top:350px" value = "滑动"/>
    </div>
    <script>
        window.onload = function(){
            var img = document.getElementById("image");
            var slideBtn = document.getElementById("slide");

            var maxLeft = 700 ;

            slideBtn.onclick = function(){
                slideFun();
            };

            var b = 10;
            var c = 10;//c=b
            b = 20;

            function slideFun(){
                var endLeft = 300 ;
                var slideTimer = setInterval(function(){
                    var imgLeft = img.style.left;
                    console.log("image left is " + (imgLeft));
                    var num = parseInt(imgLeft);
                    console.log( "parseInt(imgLeft):" + num )


                    if(parseInt(imgLeft) < endLeft){
                        console.log(parseInt(imgLeft));
                        if(parseInt(imgLeft) < maxLeft){
                            imgLeft = parseInt(img.style.left)+ 20  + "px";
                            img.style.left = imgLeft;
                        }else{
                            alert("已经滑动到最大值");
                            clearInterval(slideTimer);
                        }
                    }else{
                        clearInterval(slideTimer);
                    }
                },10);
            }
        };
    </script>
</body>

  

实现图片向左滑动

标签:

原文地址:http://www.cnblogs.com/sapho/p/4805383.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!