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

有没有什么函数方法可以恢复原状态? removeAttribute是删除style的元素,我想要的是显示结果一样,但是恢复后可以继续又点击向右滑动怎么做?这个removeAttribute删除之后就不可以继续点击向右滑动了。求大神!

<!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>
<!--页面布局-->
    <!--图片相关属性设置-->
<div>
    
<!--滑动按钮设置-->
<img style="position: absolute; left: 0; top: 0; width: 315px; height: 315px;" src="../图片的放大缩小/小黄人.jpeg" id="myImage"  /><br/>
    <input style="position:absolute;left:0;top:315px; " type="button" id="btn" value="向右滑动"/>
    <input style="position:absolute;left:80px;top:315px;" type="button" id="Btn" value="恢复"/>
</div>    
<script>
    window.onload = function(){
        var img = document.getElementById("myImage");
        var btn = document.getElementById("btn");
        var Btn = document.getElementById("Btn");
        
        //绑定点击事件
        btn.onclick = function(){
            imgSlide();    //点击按钮时执行滑动函数
        }
        Btn.onclick = function() {
            rec();//点击恢复原状态
        }
        
        var maxLeft = 700;//向右滑动的极限值
        //实现滑动函数
        function imgSlide(){
            var endLeft = img.offsetLeft + 300;//每次点击后向右滑动300px
            var slideTimer = setInterval(function(){
                var imgLeft =img.offsetLeft;   //现在距离左边的距离
                if(imgLeft < endLeft){
                    if(imgLeft < maxLeft){
                        img.style.left=imgLeft + 20 + 'px';//将图片的左偏移(left值)增加20px,注意单位        
                    }else{
                        alert("已经到达最大值");
//终止定时器函数        
                        clearInterval(slideTimer);
                        
                    }
                }else{
                        clearInterval(slideTimer);    
                }
            },10);    
        }
        
        function rec() {
            var message = confirm("是否恢复?");
            if(message == true)
                {
               img.removeAttribute('style');
                }
        }
    }
</script>
</body>
</html>

正在回答

1 回答

你要的不就是想让那个框回到原始位置吗?如果是向右移动了,你再移动回去不就行了

因为你一旦清除所有样式之后,那么在元素加载之后的那些都会被清楚的,需要浏览器重新加载才能把原有样式加载出来

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

qq_树_11 提问者

非常感谢!
2015-10-15 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

有没有什么函数方法可以恢复原状态? removeAttribute是删除style的元素,我想要的是显示结果一样,但是恢复后可以继续又点击向右滑动怎么做?这个removeAttribute删除之后就不可以继续点击向右滑动了。求大神!

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